diff --git a/changelog/unreleased/enhancement-extensions-sidebar-panels b/changelog/unreleased/enhancement-extensions-sidebar-panels
index 853fdb325b2..a521abf3e25 100644
--- a/changelog/unreleased/enhancement-extensions-sidebar-panels
+++ b/changelog/unreleased/enhancement-extensions-sidebar-panels
@@ -5,3 +5,4 @@ The benefit of this is that any app can register additional panels to be shown i
 available panels were hardcoded.
 
 https://github.com/owncloud/web/pull/10111
+https://github.com/owncloud/web/pull/10152
diff --git a/changelog/unreleased/enhancement-file-sidebar b/changelog/unreleased/enhancement-file-sidebar
index 463d14ac89f..d0a8d68ca03 100644
--- a/changelog/unreleased/enhancement-file-sidebar
+++ b/changelog/unreleased/enhancement-file-sidebar
@@ -4,3 +4,4 @@ Viewer and editor apps now have the same right sidebar available like the `files
 This makes in place viewing file details, tagging, sharing, and much more possible.
 
 https://github.com/owncloud/web/pull/10111
+https://github.com/owncloud/web/pull/10152
diff --git a/packages/web-app-external/src/App.vue b/packages/web-app-external/src/App.vue
index 6ee08f2938f..16457192ef8 100644
--- a/packages/web-app-external/src/App.vue
+++ b/packages/web-app-external/src/App.vue
@@ -6,7 +6,7 @@
     :title="iFrameTitle"
     allowfullscreen
   />
-  <div v-if="appUrl && method === 'POST' && formParameters" class="oc-height-1-1">
+  <div v-if="appUrl && method === 'POST' && formParameters" class="oc-height-1-1 oc-width-1-1">
     <form :action="appUrl" target="app-iframe" method="post">
       <input ref="subm" type="submit" :value="formParameters" class="oc-hidden" />
       <div v-for="(item, key, index) in formParameters" :key="index">
diff --git a/packages/web-app-external/tests/unit/__snapshots__/app.spec.ts.snap b/packages/web-app-external/tests/unit/__snapshots__/app.spec.ts.snap
index 618f8cc38ca..0fa9db98cd7 100644
--- a/packages/web-app-external/tests/unit/__snapshots__/app.spec.ts.snap
+++ b/packages/web-app-external/tests/unit/__snapshots__/app.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`The app provider extension should be able to load an iFrame via get 1`]
 exports[`The app provider extension should be able to load an iFrame via post 1`] = `
 <!--v-if-->
 
-<div class="oc-height-1-1">
+<div class="oc-height-1-1 oc-width-1-1">
   <form action="https://example.test/d12ab86/loe009157-MzBw" method="post" target="app-iframe">
     <input class="oc-hidden" type="submit" value="[object Object]">
     <div>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceDetails.vue b/packages/web-app-files/src/components/FilesList/ResourceDetails.vue
index eb51a4c1021..67f74f52bb6 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceDetails.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceDetails.vue
@@ -14,8 +14,7 @@ import { Resource, SpaceResource } from '@ownclouders/web-client/src/helpers'
 
 import FileActions from '../SideBar/Actions/FileActions.vue'
 import FileDetails from '../SideBar/Details/FileDetails.vue'
-import FileInfo from '../SideBar/FileInfo.vue'
-import { useFileActions } from '@ownclouders/web-pkg'
+import { useFileActions, FileInfo } from '@ownclouders/web-pkg'
 import { useRouteQuery } from '@ownclouders/web-pkg'
 
 export default defineComponent({
diff --git a/packages/web-app-files/src/components/SideBar/FileInfo.vue b/packages/web-app-files/src/components/SideBar/FileInfo.vue
deleted file mode 100644
index 25a58e4120c..00000000000
--- a/packages/web-app-files/src/components/SideBar/FileInfo.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <div class="file_info oc-flex oc-flex-between oc-p-s">
-    <div class="oc-flex oc-flex-middle">
-      <oc-resource-icon
-        v-if="isSubPanelActive"
-        :resource="resource"
-        size="large"
-        class="file_info__icon oc-mr-s"
-      />
-      <div class="file_info__body oc-text-overflow">
-        <h3 data-testid="files-info-name" class="oc-font-semibold">
-          <oc-resource-name
-            :name="resource.name"
-            :extension="resource.extension"
-            :type="resource.type"
-            :full-path="resource.webDavPath"
-            :is-extension-displayed="areFileExtensionsShown"
-            :is-path-displayed="false"
-            :truncate-name="false"
-          />
-        </h3>
-      </div>
-    </div>
-    <private-link-item v-if="privateLinkEnabled" class="oc-ml-s" />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, inject, unref } from 'vue'
-import PrivateLinkItem from './PrivateLinkItem.vue'
-import { Resource } from '@ownclouders/web-client'
-import {
-  useCapabilityFilesSharingPublicAlias,
-  useCapabilityPrivateLinks,
-  useStore
-} from '@ownclouders/web-pkg'
-
-export default defineComponent({
-  name: 'FileInfo',
-  components: {
-    PrivateLinkItem
-  },
-  props: {
-    isSubPanelActive: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup() {
-    const store = useStore()
-    const resource = inject<Resource>('resource')
-    const hasPublicLinkAliasSupport = useCapabilityFilesSharingPublicAlias()
-    const hasPrivateLinkSupport = useCapabilityPrivateLinks()
-    const areFileExtensionsShown = store.state.Files.areFileExtensionsShown
-
-    const privateLinkEnabled = computed(() => {
-      if (unref(hasPublicLinkAliasSupport)) {
-        // alias links are the next UI concept iteration for "file pointers"
-        // i.e. ignore private link capability if alias links are supported
-        return false
-      }
-      return unref(hasPrivateLinkSupport) && unref(resource).privateLink
-    })
-
-    return { resource, areFileExtensionsShown, privateLinkEnabled }
-  }
-})
-</script>
-
-<style lang="scss">
-.file_info {
-  &.sidebar-panel__file_info {
-    border-bottom: 1px solid var(--oc-color-border);
-  }
-
-  button {
-    white-space: nowrap;
-  }
-
-  &__body {
-    text-align: left;
-
-    h3 {
-      font-size: var(--oc-font-size-medium);
-      margin: 0;
-      word-break: break-all;
-    }
-  }
-
-  &__favorite {
-    .oc-star {
-      display: inline-block;
-
-      &-shining svg {
-        fill: #ffba0a !important;
-
-        path:not([fill='none']) {
-          stroke: var(--oc-color-swatch-passive-default);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
index dfe995ba008..057bbe96dc9 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap
@@ -20,7 +20,6 @@ exports[`ResourceDetails component renders resource details correctly 1`] = `
           </h3>
         </div>
       </div>
-      <!--v-if-->
     </div>
     <div class="oc-mb" id="oc-file-details-sidebar">
       <div>
diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index 437dd31450b..a01ae1f9e4b 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -17,52 +17,65 @@
       @close="closeApp"
     />
 
-    <div v-if="isFolderLoading || isFileContentLoading" class="oc-position-center">
-      <oc-spinner :aria-label="$gettext('Loading media file')" size="xlarge" />
-    </div>
-    <oc-icon
-      v-else-if="isFileContentError"
-      name="file-damage"
-      variation="danger"
-      size="xlarge"
-      class="oc-position-center"
-      :accessible-label="$gettext('Failed to load media file')"
-    />
-    <div v-else class="oc-flex oc-width-1-1 oc-height-1-1">
-      <div class="stage" :class="{ lightbox: isFullScreenModeActivated }">
-        <div v-show="activeMediaFileCached" class="stage_media">
-          <media-image
-            v-if="activeMediaFileCached.isImage"
-            :file="activeMediaFileCached"
+    <div class="oc-flex oc-width-1-1 oc-height-1-1">
+      <div
+        v-if="isFolderLoading || isFileContentLoading"
+        class="oc-width-1-1"
+        :class="{ 'preview-sidebar-open': isSideBarOpen }"
+      >
+        <div class="oc-position-center">
+          <oc-spinner :aria-label="$gettext('Loading media file')" size="xlarge" />
+        </div>
+      </div>
+      <oc-icon
+        v-else-if="isFileContentError"
+        name="file-damage"
+        variation="danger"
+        size="xlarge"
+        class="oc-position-center"
+        :class="{ 'preview-sidebar-open': isSideBarOpen }"
+        :accessible-label="$gettext('Failed to load media file')"
+      />
+      <div
+        v-else
+        class="oc-flex oc-width-1-1 oc-height-1-1"
+        :class="{ 'preview-sidebar-open': isSideBarOpen }"
+      >
+        <div class="stage" :class="{ lightbox: isFullScreenModeActivated }">
+          <div v-show="activeMediaFileCached" class="stage_media">
+            <media-image
+              v-if="activeMediaFileCached.isImage"
+              :file="activeMediaFileCached"
+              :current-image-rotation="currentImageRotation"
+              :current-image-zoom="currentImageZoom"
+            />
+            <media-video
+              v-else-if="activeMediaFileCached.isVideo"
+              :file="activeMediaFileCached"
+              :is-auto-play-enabled="isAutoPlayEnabled"
+            />
+            <media-audio
+              v-else-if="activeMediaFileCached.isAudio"
+              :file="activeMediaFileCached"
+              :is-auto-play-enabled="isAutoPlayEnabled"
+            />
+          </div>
+          <media-controls
+            class="stage_controls"
+            :files="filteredFiles"
+            :active-index="activeIndex"
+            :is-full-screen-mode-activated="isFullScreenModeActivated"
+            :is-folder-loading="isFolderLoading"
+            :is-image="activeMediaFileCached?.isImage"
             :current-image-rotation="currentImageRotation"
             :current-image-zoom="currentImageZoom"
-          />
-          <media-video
-            v-else-if="activeMediaFileCached.isVideo"
-            :file="activeMediaFileCached"
-            :is-auto-play-enabled="isAutoPlayEnabled"
-          />
-          <media-audio
-            v-else-if="activeMediaFileCached.isAudio"
-            :file="activeMediaFileCached"
-            :is-auto-play-enabled="isAutoPlayEnabled"
+            @set-rotation="currentImageRotation = $event"
+            @set-zoom="currentImageZoom = $event"
+            @toggle-full-screen="toggleFullscreenMode"
+            @toggle-previous="prev"
+            @toggle-next="next"
           />
         </div>
-        <media-controls
-          class="stage_controls"
-          :files="filteredFiles"
-          :active-index="activeIndex"
-          :is-full-screen-mode-activated="isFullScreenModeActivated"
-          :is-folder-loading="isFolderLoading"
-          :is-image="activeMediaFileCached?.isImage"
-          :current-image-rotation="currentImageRotation"
-          :current-image-zoom="currentImageZoom"
-          @set-rotation="currentImageRotation = $event"
-          @set-zoom="currentImageZoom = $event"
-          @toggle-full-screen="toggleFullscreenMode"
-          @toggle-previous="prev"
-          @toggle-next="next"
-        />
       </div>
       <file-side-bar :is-open="isSideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
     </div>
@@ -138,6 +151,7 @@ export default defineComponent({
 
     const activeIndex = ref()
     const cachedFiles = ref<CachedFile[]>([])
+    const folderLoaded = ref(false)
 
     const sortBy = computed(() => {
       if (!unref(contextRouteQuery)) {
@@ -234,7 +248,12 @@ export default defineComponent({
         if (!unref(currentFileContext) || unref(closed)) {
           return
         }
-        await appDefaults.loadFolderForFileContext(unref(currentFileContext))
+
+        if (!unref(folderLoaded)) {
+          await appDefaults.loadFolderForFileContext(unref(currentFileContext))
+          folderLoaded.value = true
+        }
+
         instance.proxy.setActiveFile(unref(unref(currentFileContext).driveAliasAndItem))
       },
       { immediate: true }
@@ -367,23 +386,15 @@ export default defineComponent({
       }
     },
     loadMedium() {
-      this.isFileContentLoading = true
-
-      // Don't bother loading if file is already loaded and cached
       if (this.activeMediaFileCached) {
-        setTimeout(
-          () => {
-            this.isFileContentLoading = false
-          },
-          // Delay to animate
-          50
-        )
         return
       }
 
       this.loadActiveFileIntoCache()
     },
     async loadActiveFileIntoCache() {
+      this.isFileContentLoading = true
+
       try {
         const loadRawFile = !this.isActiveFileTypeImage
         let mediaUrl
@@ -533,4 +544,9 @@ export default defineComponent({
     margin: 10px auto;
   }
 }
+@media (max-width: $oc-breakpoint-medium-default) {
+  .preview-sidebar-open {
+    display: none;
+  }
+}
 </style>
diff --git a/packages/web-app-preview/src/components/Sources/MediaImage.vue b/packages/web-app-preview/src/components/Sources/MediaImage.vue
index 706ab7cf356..854e8de2d1e 100644
--- a/packages/web-app-preview/src/components/Sources/MediaImage.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaImage.vue
@@ -9,8 +9,8 @@
   />
 </template>
 <script lang="ts">
-import { defineComponent, PropType, onMounted, ref, watch } from 'vue'
 import { CachedFile } from '../../helpers/types'
+import { defineComponent, PropType, onMounted, ref, VNodeRef, watch, unref, nextTick } from 'vue'
 import type { PanzoomObject } from '@panzoom/panzoom'
 import Panzoom from '@panzoom/panzoom'
 
@@ -31,11 +31,18 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const img = ref()
-    let panzoom: PanzoomObject
+    const img = ref<VNodeRef>()
+    const panzoom = ref<PanzoomObject>()
 
-    onMounted(() => {
-      panzoom = Panzoom(img.value, {
+    const initPanzoom = async () => {
+      if (unref(panzoom)) {
+        unref(panzoom)?.destroy()
+      }
+
+      // wait for next tick until image is rendered
+      await nextTick()
+
+      panzoom.value = Panzoom(unref(img) as any, {
         animate: true,
         duration: 300,
         overflow: 'auto',
@@ -65,16 +72,19 @@ export default defineComponent({
               v = y
           }
 
-          panzoom.setStyle(
+          unref(panzoom).setStyle(
             'transform',
             `rotate(${props.currentImageRotation}deg) scale(${scale}) translate(${h}px, ${v}px)`
           )
         }
       })
-    })
+    }
+
+    watch(img, initPanzoom)
+    onMounted(initPanzoom)
 
     watch([() => props.currentImageZoom, () => props.currentImageRotation], () => {
-      panzoom.zoom(props.currentImageZoom)
+      unref(panzoom).zoom(props.currentImageZoom)
     })
 
     return {
diff --git a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
index cd172133686..8c17e134d8f 100644
--- a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
+++ b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
@@ -9,7 +9,11 @@
     />
     <loading-screen v-if="loading" />
     <error-screen v-else-if="loadingError" :message="loadingError.message" />
-    <div v-else class="oc-flex oc-width-1-1 oc-height-1-1">
+    <div
+      v-else
+      class="oc-flex oc-width-1-1 oc-height-1-1"
+      :class="{ 'app-sidebar-open': isSideBarOpen }"
+    >
       <slot v-bind="slotAttrs" />
       <file-side-bar :is-open="isSideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
     </div>
@@ -306,6 +310,7 @@ export default defineComponent({
         })
         serverContent.value = newContent
         currentETag.value = putFileContentsResponse.etag
+        store.commit('Files/UPSERT_RESOURCE', putFileContentsResponse)
       } catch (e) {
         switch (e.statusCode) {
           case 401:
@@ -466,3 +471,10 @@ export default defineComponent({
   }
 })
 </script>
+<style lang="scss">
+@media (max-width: $oc-breakpoint-medium-default) {
+  .app-sidebar-open > *:not(:last-child) {
+    display: none;
+  }
+}
+</style>
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index 204f30a2c6e..da9ea11e2dc 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -94,8 +94,9 @@
 
 <script lang="ts">
 import { VisibilityObserver } from '../../observer'
-import { computed, defineComponent, PropType, unref } from 'vue'
+import { computed, defineComponent, PropType, onBeforeUnmount, unref } from 'vue'
 import { SideBarPanel, SideBarPanelContext } from './types'
+import { SideBarEventTopics, useEventBus } from '../../composables'
 
 let visibilityObserver: VisibilityObserver
 let hiddenObserver: VisibilityObserver
@@ -126,11 +127,16 @@ export default defineComponent({
   },
   emits: ['close', 'selectPanel'],
   setup(props) {
+    const eventBus = useEventBus()
     const panels = computed(() =>
       props.availablePanels.filter((p) => p.isVisible(props.panelContext))
     )
     const subPanels = computed(() => unref(panels).filter((p) => !p.isRoot?.(props.panelContext)))
 
+    onBeforeUnmount(() => {
+      eventBus.publish(SideBarEventTopics.close)
+    })
+
     return {
       panels,
       subPanels
diff --git a/packages/web-pkg/src/components/SideBar/index.ts b/packages/web-pkg/src/components/SideBar/index.ts
index 0e78ff5044e..c3d796c4138 100644
--- a/packages/web-pkg/src/components/SideBar/index.ts
+++ b/packages/web-pkg/src/components/SideBar/index.ts
@@ -1,4 +1,5 @@
 export * from './Spaces'
+export * from './Files'
 export * from './types'
 
 export { default as CompareSaveDialog } from './CompareSaveDialog.vue'
diff --git a/packages/web-app-files/tests/unit/components/SideBar/FileInfo.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/Files/FileInfo.spec.ts
similarity index 93%
rename from packages/web-app-files/tests/unit/components/SideBar/FileInfo.spec.ts
rename to packages/web-pkg/tests/unit/components/sidebar/Files/FileInfo.spec.ts
index c386d340a8f..b57bcb5ca7e 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/FileInfo.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/Files/FileInfo.spec.ts
@@ -1,4 +1,4 @@
-import FileInfo from 'web-app-files/src/components/SideBar/FileInfo.vue'
+import FileInfo from '../../../../../src/components/SideBar/Files/FileInfo.vue'
 import {
   createStore,
   defaultComponentMocks,