fix: prevent file sidebar clipping on small screens (CB-4260)

packages/web-pkg/src/components/SideBar/SideBar.vue

@@ -294,8 +294,11 @@ export default defineComponent({
   border-left: 1px solid var(--oc-color-border);
   position: relative;
   overflow: hidden;
-  min-width: 440px;
-  width: 440px;
+  flex: 0 1 440px;
+  min-width: 0;
+  max-width: 440px;
+  align-self: stretch;
+  min-height: 0;
 
   &:focus,
   &:focus-visible {
@@ -306,6 +309,7 @@ export default defineComponent({
 .app-sidebar-full-width {
   min-width: 100% !important;
   width: 100% !important;
+  max-width: 100% !important;
 }
 
 @media only screen and (max-width: $oc-breakpoint-medium-default) {
@@ -392,6 +396,7 @@ export default defineComponent({
   }
 
   &__body {
+    min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
     padding: var(--oc-space-small);

packages/web-pkg/tests/unit/components/sidebar/SideBar.spec.ts

@@ -0,0 +1,95 @@
+import SideBar from '../../../../src/components/SideBar/SideBar.vue'
+import { SideBarPanel } from '../../../../src/components/SideBar/types'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
+import { defaultPlugins, shallowMount } from '@ownclouders/web-test-helpers'
+import { defineComponent } from 'vue'
+
+const DummyPanel = defineComponent({ name: 'DummyPanel', template: '<div />' })
+
+const mockRootPanel: SideBarPanel<SpaceResource, Resource, Resource> = {
+  name: 'Details',
+  icon: 'information',
+  title: () => 'Details',
+  isVisible: () => true,
+  isRoot: () => true,
+  component: DummyPanel
+}
+
+describe('SideBar', () => {
+  it('renders app-sidebar landmark', () => {
+    const wrapper = shallowMount(SideBar, {
+      props: {
+        isOpen: true,
+        loading: false,
+        availablePanels: [mockRootPanel],
+        panelContext: { items: [] },
+        activePanel: ''
+      },
+      global: {
+        plugins: [...defaultPlugins()],
+        stubs: { OcSpinner: true, OcButton: true, OcIcon: true }
+      }
+    })
+    expect(wrapper.find('[data-testid="app-sidebar"]').exists()).toBe(true)
+  })
+
+  it('adds full-width class when viewport width is at most 960px', () => {
+    const original = window.innerWidth
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: 800
+    })
+    try {
+      const wrapper = shallowMount(SideBar, {
+        props: {
+          isOpen: true,
+          loading: false,
+          availablePanels: [mockRootPanel],
+          panelContext: { items: [] },
+          activePanel: ''
+        },
+        global: {
+          plugins: [...defaultPlugins()],
+          stubs: { OcSpinner: true, OcButton: true, OcIcon: true }
+        }
+      })
+      expect(wrapper.find('[data-testid="app-sidebar"]').classes()).toContain('app-sidebar-full-width')
+    } finally {
+      Object.defineProperty(window, 'innerWidth', {
+        configurable: true,
+        value: original
+      })
+    }
+  })
+
+  it('does not add full-width class when viewport is wider than 960px', () => {
+    const original = window.innerWidth
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: 1400
+    })
+    try {
+      const wrapper = shallowMount(SideBar, {
+        props: {
+          isOpen: true,
+          loading: false,
+          availablePanels: [mockRootPanel],
+          panelContext: { items: [] },
+          activePanel: ''
+        },
+        global: {
+          plugins: [...defaultPlugins()],
+          stubs: { OcSpinner: true, OcButton: true, OcIcon: true }
+        }
+      })
+      expect(wrapper.find('[data-testid="app-sidebar"]').classes()).not.toContain(
+        'app-sidebar-full-width'
+      )
+    } finally {
+      Object.defineProperty(window, 'innerWidth', {
+        configurable: true,
+        value: original
+      })
+    }
+  })
+})