diff --git a/changelog/unreleased/bugfix-do-not-push-sidebar-close-action-away.md b/changelog/unreleased/bugfix-do-not-push-sidebar-close-action-away.md
new file mode 100644
index 00000000000..36f78ea7821
--- /dev/null
+++ b/changelog/unreleased/bugfix-do-not-push-sidebar-close-action-away.md
@@ -0,0 +1,6 @@
+Bugfix: Do not push sidebar close action away
+
+We've fixed an issue with the sidebar close action which was pushed away when zooming. The layout of the screen was not adjusting the size and shifted the whole sidebar off the screen. We set a fixed width of 100% - sidebar width to prevent this.
+
+https://github.com/owncloud/web/pull/12045
+https://github.com/owncloud/web/issues/11536
diff --git a/changelog/unreleased/bugfix-update-sidebar-width-on-resize.md b/changelog/unreleased/bugfix-update-sidebar-width-on-resize.md
new file mode 100644
index 00000000000..e93d5260554
--- /dev/null
+++ b/changelog/unreleased/bugfix-update-sidebar-width-on-resize.md
@@ -0,0 +1,5 @@
+Bugfix: Update sidebar width on resize
+
+We've fixed an issue where the width of the sidebar was updated only when opening it. We added a resize event handler to the window object so that we can react to it and update the width accordingly.
+
+https://github.com/owncloud/web/pull/12045
diff --git a/changelog/unreleased/bugfix-use-correct-breakpoints-in-sidebar.md b/changelog/unreleased/bugfix-use-correct-breakpoints-in-sidebar.md
new file mode 100644
index 00000000000..def4b0db0aa
--- /dev/null
+++ b/changelog/unreleased/bugfix-use-correct-breakpoints-in-sidebar.md
@@ -0,0 +1,5 @@
+Bugfix: Use correct breakpoints in sidebar
+
+We've set the correct breakpoint used for setting width of the sidebar so that it matches the breakpoint in app wrapper.
+
+https://github.com/owncloud/web/pull/12045
diff --git a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
index ff741275b79..cdaee8881b9 100644
--- a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
+++ b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <main :id="applicationId" class="oc-height-1-1" @keydown.esc="closeApp">
+  <main :id="applicationId" class="app-wrapper oc-height-1-1" @keydown.esc="closeApp">
     <h1 class="oc-invisible-sr" v-text="pageTitle" />
     <app-top-bar
       v-if="!loading && !loadingError && resource"
@@ -18,7 +18,7 @@
       class="oc-flex oc-width-1-1 oc-height-1-1"
       :class="{ 'app-sidebar-open': isSideBarOpen }"
     >
-      <slot class="oc-height-1-1 oc-width-1-1" v-bind="slotAttrs" />
+      <slot class="app-wrapper-content oc-height-1-1" v-bind="slotAttrs" />
       <file-side-bar :is-open="isSideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
     </div>
   </main>
@@ -710,4 +710,15 @@ export default defineComponent({
     display: none;
   }
 }
+
+.app-wrapper {
+  .app-wrapper-content {
+    width: 100%;
+  }
+
+  .app-sidebar-open .app-wrapper-content {
+    // 440px is the width of the app sidebar
+    width: calc(100% - 440px);
+  }
+}
 </style>
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index ee1264d78eb..f624413e4fa 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -104,6 +104,7 @@ import {
   defineComponent,
   nextTick,
   onBeforeUnmount,
+  onMounted,
   PropType,
   ref,
   unref,
@@ -203,11 +204,21 @@ export default defineComponent({
       return $gettext('Back to main panels')
     })
 
-    const fullWidthSideBar = computed(() => window.innerWidth <= 1024)
+    const windowWidth = ref(window.innerWidth)
+
+    const fullWidthSideBar = computed(() => unref(windowWidth) <= 960)
     const backgroundContentEl = computed(() => {
       return unref(appSideBar)?.parentElement?.querySelector('div') as HTMLElement
     })
 
+    const onResize = () => {
+      if (!props.isOpen) {
+        return
+      }
+
+      windowWidth.value = window.innerWidth
+    }
+
     watch(
       () => props.isOpen,
       async (isOpen) => {
@@ -223,7 +234,13 @@ export default defineComponent({
       { immediate: true }
     )
 
+    onMounted(() => {
+      window.addEventListener('resize', onResize)
+    })
+
     onBeforeUnmount(() => {
+      window.removeEventListener('resize', onResize)
+
       if (unref(backgroundContentEl)) {
         unref(backgroundContentEl).style.visibility = 'visible'
       }
@@ -291,7 +308,7 @@ export default defineComponent({
   width: 100% !important;
 }
 
-@media only screen and (max-width: 1024px) {
+@media only screen and (max-width: $oc-breakpoint-medium-default) {
   .files-wrapper {
     flex-wrap: nowrap !important;
   }