diff --git a/changelog/unreleased/bugfix-fix-right-sidebar-on-small-screens b/changelog/unreleased/bugfix-fix-right-sidebar-on-small-screens
new file mode 100644
index 00000000000..e4f7eb1b59f
--- /dev/null
+++ b/changelog/unreleased/bugfix-fix-right-sidebar-on-small-screens
@@ -0,0 +1,9 @@
+Bugfix: Fix right sidebar content on small screens
+
+We've fixed the right sidebar content on small screens because some screen sizes caused the content to flow out of the screen. Things that have been done to achieve this:
+
+* Selection info has been removed.
+* Labels of the batch actions will hide on screens <1280px if the sidebar is open.
+
+https://github.com/owncloud/web/issues/7498
+https://github.com/owncloud/web/pull/7508
diff --git a/packages/web-app-files/src/components/ActionMenuItem.vue b/packages/web-app-files/src/components/ActionMenuItem.vue
index 5f067721b7a..c460efbc08c 100644
--- a/packages/web-app-files/src/components/ActionMenuItem.vue
+++ b/packages/web-app-files/src/components/ActionMenuItem.vue
@@ -1,6 +1,7 @@
 <template>
   <li>
     <oc-button
+      v-oc-tooltip="showTooltip || action.hideLabel ? action.label(filterParams) : ''"
       :type="action.componentType"
       v-bind="getComponentProps(action, items)"
       :class="[action.class, 'action-menu-item']"
@@ -29,9 +30,12 @@
         :fill-type="action.iconFillType || 'line'"
         size="medium"
       />
-      <span class="oc-files-context-action-label" data-testid="action-label">{{
-        action.label(filterParams)
-      }}</span>
+      <span
+        v-if="!action.hideLabel"
+        class="oc-files-context-action-label"
+        data-testid="action-label"
+        >{{ action.label(filterParams) }}</span
+      >
       <span
         v-if="action.shortcut && shortcutHint"
         class="oc-files-context-action-shortcut"
@@ -67,6 +71,11 @@ export default {
       type: Boolean,
       default: true,
       required: false
+    },
+    showTooltip: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   computed: {
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 67453bf6f7d..a604f04a705 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="files-app-bar">
+  <div id="files-app-bar" ref="filesAppBar" :class="{ 'files-app-bar-squashed': !sidebarClosed }">
     <oc-hidden-announcer :announcement="selectedResourcesAnnouncement" level="polite" />
     <div class="files-topbar oc-py-s">
       <h1 class="oc-invisible-sr" v-text="pageTitle" />
@@ -32,14 +32,13 @@
         </div>
       </div>
       <div class="files-app-bar-actions">
-        <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px">
-          <slot v-if="showActionsOnSelection || selectedFiles.length === 0" name="actions" />
-          <size-info
-            v-if="showSelectionInfo"
-            class="oc-visible@l"
-            :class="{ 'files-app-bar-actions-squashed': !sidebarClosed }"
+        <div class="oc-flex-1 oc-flex oc-flex-start">
+          <slot
+            v-if="showActionsOnSelection || selectedFiles.length === 0"
+            name="actions"
+            :limitedScreenSpace="limitedScreenSpace"
           />
-          <batch-actions v-if="showBatchActions" />
+          <batch-actions v-if="showBatchActions" :show-tooltips="limitedScreenSpace" />
         </div>
       </div>
       <slot name="content" />
@@ -56,7 +55,6 @@ import MixinFileActions from '../../mixins/fileActions'
 import BatchActions from './SelectedResources/BatchActions.vue'
 import ContextActions from '../FilesList/ContextActions.vue'
 import SharesNavigation from './SharesNavigation.vue'
-import SizeInfo from './SelectedResources/SizeInfo.vue'
 import SidebarToggle from './SidebarToggle.vue'
 import ViewOptions from './ViewOptions.vue'
 
@@ -66,7 +64,6 @@ export default {
     ContextActions,
     SharesNavigation,
     SidebarToggle,
-    SizeInfo,
     ViewOptions
   },
   mixins: [MixinFileActions],
@@ -79,6 +76,12 @@ export default {
     hasViewOptions: { type: Boolean, default: true },
     showActionsOnSelection: { type: Boolean, default: false }
   },
+  data: function () {
+    return {
+      resizeObserver: new ResizeObserver(this.onResize),
+      limitedScreenSpace: false
+    }
+  },
   computed: {
     ...mapGetters('Files', ['files', 'selectedFiles']),
     ...mapState('Files', ['areHiddenFilesShown', 'areFileExtensionsShown']),
@@ -88,15 +91,9 @@ export default {
       const title = this.$route.meta.title
       return this.$gettext(title)
     },
-    areDefaultActionsVisible() {
-      return this.selectedFiles.length < 1
-    },
     showContextActions() {
       return last(this.breadcrumbs).allowContextActions
     },
-    showSelectionInfo() {
-      return this.hasBulkActions && this.selectedFiles.length > 0
-    },
     showBatchActions() {
       return this.hasBulkActions
     },
@@ -112,6 +109,12 @@ export default {
       return this.$gettextInterpolate(translated, { amount: this.selectedFiles.length })
     }
   },
+  mounted() {
+    this.resizeObserver.observe(this.$refs.filesAppBar)
+  },
+  beforeDestroy() {
+    this.resizeObserver.unobserve(this.$refs.filesAppBar)
+  },
 
   created() {
     // Storage returns a string so we need to convert it into a boolean
@@ -132,7 +135,13 @@ export default {
   },
 
   methods: {
-    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY'])
+    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILE_EXTENSIONS_VISIBILITY']),
+
+    onResize() {
+      this.limitedScreenSpace = this.sidebarClosed
+        ? window.innerWidth <= 1000
+        : window.innerWidth <= 1280
+    }
   }
 }
 </script>
@@ -153,13 +162,6 @@ export default {
     gap: var(--oc-space-small);
     justify-content: flex-end;
     min-height: 3rem;
-
-    &-squashed {
-      display: none;
-      @media only screen and (min-width: 1400px) {
-        display: inherit;
-      }
-    }
   }
 
   #files-breadcrumb {
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 3da8cf461e2..7a80d7e74d2 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -1,17 +1,18 @@
 <template>
-  <div v-if="showActions" class="oc-flex-inline oc-width-1-1" style="gap: 15px">
+  <div v-if="showActions" class="create-and-upload-actions oc-flex-inline oc-width-1-1">
     <template v-if="createFileActionsAvailable">
       <span v-oc-tooltip="newButtonTooltip">
         <oc-button
           id="new-file-menu-btn"
           key="new-file-menu-btn-enabled"
+          v-oc-tooltip="hideButtonLabels ? $gettext('New') : ''"
           :aria-label="newButtonAriaLabel"
           appearance="filled"
           variation="primary"
           :disabled="uploadOrFileCreationBlocked"
         >
           <oc-icon name="add" />
-          <translate>New</translate>
+          <span v-if="!hideButtonLabels" v-text="$gettext('New')" />
         </oc-button>
       </span>
       <oc-drop
@@ -71,6 +72,7 @@
       <span v-oc-tooltip="newButtonTooltip">
         <oc-button
           id="new-folder-btn"
+          v-oc-tooltip="hideButtonLabels ? $gettext('New Folder') : ''"
           appearance="filled"
           variation="primary"
           :aria-label="newButtonAriaLabel"
@@ -78,7 +80,7 @@
           @click="showCreateResourceModal"
         >
           <oc-icon name="resource-type-folder" />
-          <translate>New folder</translate>
+          <span v-if="!hideButtonLabels" v-text="$gettext('New Folder')" />
         </oc-button>
       </span>
     </template>
@@ -86,11 +88,12 @@
       <oc-button
         id="upload-menu-btn"
         key="upload-menu-btn-enabled"
+        v-oc-tooltip="hideButtonLabels ? $gettext('Upload') : ''"
         :aria-label="uploadButtonAriaLabel"
         :disabled="uploadOrFileCreationBlocked"
       >
         <oc-icon name="upload" fill-type="line" />
-        <translate>Upload</translate>
+        <span v-if="!hideButtonLabels" v-text="$gettext('Upload')" />
       </oc-button>
     </span>
     <oc-drop
@@ -158,6 +161,13 @@ export default defineComponent({
     ResourceUpload
   },
   mixins: [MixinFileActions],
+  props: {
+    limitedScreenSpace: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
   setup() {
     const instance = getCurrentInstance().proxy
     const uppyService = instance.$uppyService
@@ -212,6 +222,9 @@ export default defineComponent({
     showPasteHereButton() {
       return this.clipboardResources && this.clipboardResources.length !== 0
     },
+    hideButtonLabels() {
+      return this.limitedScreenSpace && this.showPasteHereButton
+    },
     mimetypesAllowedForCreation() {
       // we can't use `mapGetters` here because the External app doesn't exist in all deployments
       const mimeTypes = this.$store.getters['External/mimeTypes']
@@ -876,4 +889,10 @@ export default defineComponent({
     border-left: 0px !important;
   }
 }
+.create-and-upload-actions {
+  gap: var(--oc-space-small);
+  @media only screen and (min-width: 1000px) {
+    gap: var(--oc-space-medium);
+  }
+}
 </style>
diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
index c8a3c4730a9..9a194383355 100644
--- a/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
+++ b/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
@@ -8,6 +8,7 @@
       appearance="outline"
       class="oc-mr-s"
       :shortcut-hint="false"
+      :show-tooltip="showTooltips"
     />
   </oc-list>
 </template>
@@ -24,6 +25,7 @@ import DownloadFile from '../../../mixins/actions/downloadFile'
 import EmptyTrashBin from '../../../mixins/actions/emptyTrashBin'
 import Move from '../../../mixins/actions/move'
 import Restore from '../../../mixins/actions/restore'
+import ClearSelection from '../../../mixins/actions/clearSelection'
 
 export default {
   name: 'BatchActions',
@@ -37,8 +39,16 @@ export default {
     DownloadFile,
     EmptyTrashBin,
     Move,
-    Restore
+    Restore,
+    ClearSelection
   ],
+  props: {
+    showTooltips: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
   computed: {
     ...mapGetters('Files', ['selectedFiles']),
 
@@ -50,6 +60,7 @@ export default {
 
     menuItemsBatchActions() {
       return [
+        ...this.$_clearSelection_items,
         ...this.$_acceptShare_items,
         ...this.$_declineShare_items,
         ...this.$_downloadArchive_items,
@@ -70,8 +81,6 @@ export default {
   display: block;
   li {
     float: left !important;
-    margin-top: var(--oc-space-xsmall);
-    margin-bottom: var(--oc-space-xsmall);
   }
 
   @media only screen and (min-width: 1200px) {
@@ -84,5 +93,20 @@ export default {
     display: flex;
     gap: var(--oc-space-small);
   }
+
+  .oc-files-context-action-label {
+    display: none;
+    @media only screen and (min-width: 1000px) {
+      display: inherit;
+    }
+  }
+}
+.files-app-bar-squashed .oc-files-appbar-batch-actions {
+  .oc-files-context-action-label {
+    display: none;
+    @media only screen and (min-width: 1280px) {
+      display: inherit;
+    }
+  }
 }
 </style>
diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
deleted file mode 100644
index cc9351550ed..00000000000
--- a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <div class="oc-flex oc-flex-middle oc-text-nowrap size-info">
-    <translate
-      v-if="selectedResourcesSize !== '?'"
-      key="multiple-select-info-with-size"
-      :translate-n="selectedResourcesCount"
-      :translate-params="{ amount: selectedResourcesCount, size: selectedResourcesSize }"
-      translate-plural="%{ amount } selected - %{ size }"
-      translate-comment="Number of selected resources and their size displayed above the files list"
-      >%{ amount } selected - %{ size }
-    </translate>
-    <translate
-      v-else
-      key="multiple-select-info"
-      :translate-n="selectedResourcesCount"
-      :translate-params="{ amount: selectedResourcesCount }"
-      translate-plural="%{ amount } selected"
-      translate-comment="Number of selected resources displayed above the files list"
-      >%{ amount } selected
-    </translate>
-    <oc-button
-      id="files-clear-selection"
-      v-oc-tooltip="clearSelectionLabel"
-      :aria-label="clearSelectionLabel"
-      class="oc-ml-m"
-      appearance="outline"
-      @click="RESET_SELECTION"
-    >
-      <oc-icon name="close" />
-    </oc-button>
-  </div>
-</template>
-
-<script>
-import { mapGetters, mapMutations } from 'vuex'
-
-import { formatFileSize } from 'web-pkg/src/helpers'
-
-export default {
-  computed: {
-    ...mapGetters('Files', ['selectedFiles']),
-
-    selectedResourcesCount() {
-      return this.selectedFiles.length
-    },
-
-    selectedResourcesSize() {
-      const totalSize = this.selectedFiles.reduce((totalSize, file) => {
-        const size = typeof file.size === 'string' ? parseInt(file.size) : file.size
-        return totalSize + size
-      }, 0)
-      return formatFileSize(totalSize, this.$language.current)
-    },
-
-    clearSelectionLabel() {
-      return this.$gettext('Clear selection')
-    }
-  },
-
-  methods: {
-    ...mapMutations('Files', ['RESET_SELECTION'])
-  }
-}
-</script>
-<style lang="scss">
-.size-info span {
-  color: var(--oc-color-swatch-passive-default);
-}
-</style>
diff --git a/packages/web-app-files/src/mixins/actions/clearSelection.js b/packages/web-app-files/src/mixins/actions/clearSelection.js
new file mode 100644
index 00000000000..6dc232286de
--- /dev/null
+++ b/packages/web-app-files/src/mixins/actions/clearSelection.js
@@ -0,0 +1,27 @@
+import { mapMutations } from 'vuex'
+
+export default {
+  computed: {
+    $_clearSelection_items() {
+      return [
+        {
+          name: 'clear-selection',
+          icon: 'close',
+          label: () => this.$gettext('Clear selection'),
+          hideLabel: true,
+          handler: this.$_clearSelection_trigger,
+          isEnabled: ({ resources }) => resources.length > 0,
+          componentType: 'button',
+          class: 'oc-files-actions-clear-selection-trigger'
+        }
+      ]
+    }
+  },
+  methods: {
+    ...mapMutations('Files', ['RESET_SELECTION']),
+
+    $_clearSelection_trigger() {
+      this.RESET_SELECTION()
+    }
+  }
+}
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index b4ee0dfa23d..34c6d27bf87 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -8,8 +8,8 @@
         :breadcrumbs-context-actions-items="[currentFolder]"
         :show-actions-on-selection="true"
       >
-        <template #actions>
-          <create-and-upload />
+        <template #actions="{ limitedScreenSpace }">
+          <create-and-upload :limited-screen-space="limitedScreenSpace" />
         </template>
       </app-bar>
       <app-loading-spinner v-if="areResourcesLoading" />
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 68675d3ba5d..93f30afd6a3 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -8,8 +8,8 @@
         :breadcrumbs-context-actions-items="[currentFolder]"
         :show-actions-on-selection="true"
       >
-        <template #actions>
-          <create-and-upload />
+        <template #actions="{ limitedScreenSpace }">
+          <create-and-upload :limited-screen-space="limitedScreenSpace" />
         </template>
       </app-bar>
       <app-loading-spinner v-if="areResourcesLoading" />
diff --git a/packages/web-app-files/src/views/shares/SharedResource.vue b/packages/web-app-files/src/views/shares/SharedResource.vue
index 854774956eb..11a43be2a9f 100644
--- a/packages/web-app-files/src/views/shares/SharedResource.vue
+++ b/packages/web-app-files/src/views/shares/SharedResource.vue
@@ -8,8 +8,8 @@
         :breadcrumbs-context-actions-items="[currentFolder]"
         :show-actions-on-selection="true"
       >
-        <template #actions>
-          <create-and-upload />
+        <template #actions="{ limitedScreenSpace }">
+          <create-and-upload :limited-screen-space="limitedScreenSpace" />
         </template>
       </app-bar>
       <app-loading-spinner v-if="areResourcesLoading" />
diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
index b789c4bab42..49e8cbc5ed9 100644
--- a/packages/web-app-files/src/views/spaces/Project.vue
+++ b/packages/web-app-files/src/views/spaces/Project.vue
@@ -8,8 +8,8 @@
         :breadcrumbs-context-actions-items="[currentFolder]"
         :show-actions-on-selection="true"
       >
-        <template #actions>
-          <create-and-upload />
+        <template #actions="{ limitedScreenSpace }">
+          <create-and-upload :limited-screen-space="limitedScreenSpace" />
         </template>
       </app-bar>
       <app-loading-spinner v-if="areResourcesLoading" />
diff --git a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js b/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
index a02856c7817..c8ce761e343 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
@@ -30,6 +30,14 @@ const breadCrumbItemWithContextActionAllowed = {
   allowContextActions: true
 }
 
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn()
+  }))
+
 describe('AppBar component', () => {
   describe('renders', () => {
     it('by default no breadcrumbs, no bulkactions, no sharesnavigation but viewoptions and sidebartoggle', () => {
diff --git a/packages/web-app-files/tests/unit/components/AppBar/SelectedResources/SizeInfo.spec.js b/packages/web-app-files/tests/unit/components/AppBar/SelectedResources/SizeInfo.spec.js
deleted file mode 100644
index aa961d85e08..00000000000
--- a/packages/web-app-files/tests/unit/components/AppBar/SelectedResources/SizeInfo.spec.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import Vuex from 'vuex'
-import GetTextPlugin from 'vue-gettext'
-import DesignSystem from 'owncloud-design-system'
-import stubs from 'tests/unit/stubs'
-import SizeInfo from '../../../../../src/components/AppBar/SelectedResources/SizeInfo.vue'
-
-const localVue = createLocalVue()
-localVue.use(Vuex)
-localVue.use(DesignSystem)
-localVue.use(GetTextPlugin, {
-  translations: 'translation.json',
-  silent: true
-})
-
-const selectedFiles = [
-  {
-    path: '/folder',
-    size: '5'
-  },
-  {
-    path: '/lorem.txt',
-    size: '100'
-  },
-  {
-    path: '/sample.pdf',
-    size: '200'
-  }
-]
-const componentStubs = { ...stubs, translate: true }
-
-describe('SizeInfo component', () => {
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  describe('when item(s) are selected', () => {
-    it.each([
-      { selected: [selectedFiles[0]], selectedCount: 1, totalSize: 5 },
-      { selected: selectedFiles, selectedCount: 3, totalSize: 305 }
-    ])('should have selected count and total size', ({ selected, selectedCount, totalSize }) => {
-      const store = createStore({ selected })
-      const wrapper = createWrapper({
-        store
-      })
-      const translate = wrapper.find('translate-stub')
-
-      expect(translate.exists()).toBeTruthy()
-      expect(translate.props().translateN).toBe(selectedCount)
-      expect(translate.props().translateParams.amount).toBe(selectedCount)
-      expect(translate.props().translateParams.size).toBe(totalSize + ' B')
-      expect(translate.text()).toBe('%{ amount } selected - %{ size }')
-    })
-    it('should have selected count but not size if item size is NaN', () => {
-      const store = createStore({ selected: [{ path: '/some-path', size: NaN }] })
-
-      const wrapper = createWrapper({
-        store
-      })
-      const translate = wrapper.find('translate-stub')
-
-      expect(translate.exists()).toBeTruthy()
-      expect(translate.props().translateN).toEqual(1)
-      expect(translate.props().translateParams.amount).toEqual(1)
-      expect(translate.props().translateParams.size).toBeFalsy()
-      expect(translate.text()).toEqual('%{ amount } selected')
-    })
-    it('should trigger "RESET_SELECTION" if clear button is clicked', () => {
-      const spyResetSelection = jest.spyOn(SizeInfo.methods, 'RESET_SELECTION').mockImplementation()
-      const store = createStore({ selected: selectedFiles })
-      const wrapper = createWrapper({
-        store,
-        stubs: { ...componentStubs, 'oc-button': false }
-      })
-      const clearSelectionButton = wrapper.find('button')
-      clearSelectionButton.trigger('click')
-
-      expect(spyResetSelection).toHaveBeenCalledTimes(1)
-    })
-  })
-})
-
-function createWrapper(options) {
-  return mount(SizeInfo, {
-    localVue,
-    stubs: componentStubs,
-    directives: { 'oc-tooltip': jest.fn() },
-    ...options
-  })
-}
-
-function createStore(state) {
-  return new Vuex.Store({
-    modules: {
-      Files: {
-        namespaced: true,
-        state: {
-          ...state
-        },
-        getters: {
-          selectedFiles: () => state.selected
-        }
-      }
-    }
-  })
-}
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.js.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.js.snap
index 63ee5c9ccfe..330c03bce80 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AppBar component renders breadcrumbs if given, by default without breadcrumbsContextActionsItems 1`] = `
-<div id="files-app-bar">
+<div id="files-app-bar" class="files-app-bar-squashed">
   <oc-hidden-announcer-stub level="polite" announcement="No items selected."></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
@@ -14,8 +14,7 @@ exports[`AppBar component renders breadcrumbs if given, by default without bread
       </div>
     </div>
     <div class="files-app-bar-actions">
-      <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
-        <!---->
+      <div class="oc-flex-1 oc-flex oc-flex-start">
         <!---->
       </div>
     </div>
@@ -24,7 +23,7 @@ exports[`AppBar component renders breadcrumbs if given, by default without bread
 `;
 
 exports[`AppBar component renders breadcrumbs if given, with breadcrumbsContextActionsItems if allowed on last breadcrumb item 1`] = `
-<div id="files-app-bar">
+<div id="files-app-bar" class="files-app-bar-squashed">
   <oc-hidden-announcer-stub level="polite" announcement="No items selected."></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
@@ -37,8 +36,7 @@ exports[`AppBar component renders breadcrumbs if given, with breadcrumbsContextA
       </div>
     </div>
     <div class="files-app-bar-actions">
-      <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
-        <!---->
+      <div class="oc-flex-1 oc-flex oc-flex-start">
         <!---->
       </div>
     </div>
@@ -47,7 +45,7 @@ exports[`AppBar component renders breadcrumbs if given, with breadcrumbsContextA
 `;
 
 exports[`AppBar component renders breadcrumbs if given, with content in the contextMenu slot 1`] = `
-<div id="files-app-bar">
+<div id="files-app-bar" class="files-app-bar-squashed">
   <oc-hidden-announcer-stub level="polite" announcement="No items selected."></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
@@ -60,8 +58,7 @@ exports[`AppBar component renders breadcrumbs if given, with content in the cont
       </div>
     </div>
     <div class="files-app-bar-actions">
-      <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
-        <!---->
+      <div class="oc-flex-1 oc-flex oc-flex-start">
         <!---->
       </div>
     </div>
@@ -70,7 +67,7 @@ exports[`AppBar component renders breadcrumbs if given, with content in the cont
 `;
 
 exports[`AppBar component renders bulkActions if enabled 1`] = `
-<div id="files-app-bar">
+<div id="files-app-bar" class="files-app-bar-squashed">
   <oc-hidden-announcer-stub level="polite" announcement="2 items selected. Actions are available above the table."></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
@@ -83,9 +80,8 @@ exports[`AppBar component renders bulkActions if enabled 1`] = `
       </div>
     </div>
     <div class="files-app-bar-actions">
-      <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
+      <div class="oc-flex-1 oc-flex oc-flex-start">
         <!---->
-        <size-info-stub class="oc-visible@l files-app-bar-actions-squashed"></size-info-stub>
         <batch-actions-stub></batch-actions-stub>
       </div>
     </div>
@@ -94,7 +90,7 @@ exports[`AppBar component renders bulkActions if enabled 1`] = `
 `;
 
 exports[`AppBar component renders by default no breadcrumbs, no bulkactions, no sharesnavigation but viewoptions and sidebartoggle 1`] = `
-<div id="files-app-bar">
+<div id="files-app-bar" class="files-app-bar-squashed">
   <oc-hidden-announcer-stub level="polite" announcement="No items selected."></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
@@ -107,8 +103,7 @@ exports[`AppBar component renders by default no breadcrumbs, no bulkactions, no
       </div>
     </div>
     <div class="files-app-bar-actions">
-      <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
-        <!---->
+      <div class="oc-flex-1 oc-flex oc-flex-start">
         <!---->
       </div>
     </div>
@@ -117,7 +112,7 @@ exports[`AppBar component renders by default no breadcrumbs, no bulkactions, no
 `;
 
 exports[`AppBar component renders if given, with content in the actions slot 1`] = `
-<div id="files-app-bar">
+<div id="files-app-bar" class="files-app-bar-squashed">
   <oc-hidden-announcer-stub level="polite" announcement="No items selected."></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
@@ -130,8 +125,7 @@ exports[`AppBar component renders if given, with content in the actions slot 1`]
       </div>
     </div>
     <div class="files-app-bar-actions">
-      <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;"><button class="action-slot">Click</button>
-        <!---->
+      <div class="oc-flex-1 oc-flex oc-flex-start"><button class="action-slot">Click</button>
         <!---->
       </div>
     </div>
@@ -140,7 +134,7 @@ exports[`AppBar component renders if given, with content in the actions slot 1`]
 `;
 
 exports[`AppBar component renders if given, with content in the content slot 1`] = `
-<div id="files-app-bar">
+<div id="files-app-bar" class="files-app-bar-squashed">
   <oc-hidden-announcer-stub level="polite" announcement="No items selected."></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
@@ -153,8 +147,7 @@ exports[`AppBar component renders if given, with content in the content slot 1`]
       </div>
     </div>
     <div class="files-app-bar-actions">
-      <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
-        <!---->
+      <div class="oc-flex-1 oc-flex oc-flex-start">
         <!---->
       </div>
     </div>
@@ -164,7 +157,7 @@ exports[`AppBar component renders if given, with content in the content slot 1`]
 `;
 
 exports[`AppBar component renders sharesNavigation if enabled 1`] = `
-<div id="files-app-bar">
+<div id="files-app-bar" class="files-app-bar-squashed">
   <oc-hidden-announcer-stub level="polite" announcement="No items selected."></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
@@ -177,8 +170,7 @@ exports[`AppBar component renders sharesNavigation if enabled 1`] = `
       </div>
     </div>
     <div class="files-app-bar-actions">
-      <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
-        <!---->
+      <div class="oc-flex-1 oc-flex oc-flex-start">
         <!---->
       </div>
     </div>
@@ -187,7 +179,7 @@ exports[`AppBar component renders sharesNavigation if enabled 1`] = `
 `;
 
 exports[`AppBar component renders viewoptions and sidebartoggle neither if both are disabled 1`] = `
-<div id="files-app-bar">
+<div id="files-app-bar" class="files-app-bar-squashed">
   <oc-hidden-announcer-stub level="polite" announcement="No items selected."></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
@@ -197,8 +189,7 @@ exports[`AppBar component renders viewoptions and sidebartoggle neither if both
       <!---->
     </div>
     <div class="files-app-bar-actions">
-      <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
-        <!---->
+      <div class="oc-flex-1 oc-flex oc-flex-start">
         <!---->
       </div>
     </div>
@@ -207,7 +198,7 @@ exports[`AppBar component renders viewoptions and sidebartoggle neither if both
 `;
 
 exports[`AppBar component renders viewoptions and sidebartoggle only sidebartoggle if viewoptions is disabled 1`] = `
-<div id="files-app-bar">
+<div id="files-app-bar" class="files-app-bar-squashed">
   <oc-hidden-announcer-stub level="polite" announcement="No items selected."></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
@@ -220,8 +211,7 @@ exports[`AppBar component renders viewoptions and sidebartoggle only sidebartogg
       </div>
     </div>
     <div class="files-app-bar-actions">
-      <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
-        <!---->
+      <div class="oc-flex-1 oc-flex oc-flex-start">
         <!---->
       </div>
     </div>
@@ -230,7 +220,7 @@ exports[`AppBar component renders viewoptions and sidebartoggle only sidebartogg
 `;
 
 exports[`AppBar component renders viewoptions and sidebartoggle only viewoptions if sidebartoggle is disabled 1`] = `
-<div id="files-app-bar">
+<div id="files-app-bar" class="files-app-bar-squashed">
   <oc-hidden-announcer-stub level="polite" announcement="No items selected."></oc-hidden-announcer-stub>
   <div class="files-topbar oc-py-s">
     <h1 class="oc-invisible-sr">ExampleTitle</h1>
@@ -243,8 +233,7 @@ exports[`AppBar component renders viewoptions and sidebartoggle only viewoptions
       </div>
     </div>
     <div class="files-app-bar-actions">
-      <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
-        <!---->
+      <div class="oc-flex-1 oc-flex oc-flex-start">
         <!---->
       </div>
     </div>
diff --git a/packages/web-app-files/tests/unit/mixins/actions/clearSelection.spec.js b/packages/web-app-files/tests/unit/mixins/actions/clearSelection.spec.js
new file mode 100644
index 00000000000..19eba53ca82
--- /dev/null
+++ b/packages/web-app-files/tests/unit/mixins/actions/clearSelection.spec.js
@@ -0,0 +1,55 @@
+import Vuex from 'vuex'
+import { createStore } from 'vuex-extensions'
+import { mount, createLocalVue } from '@vue/test-utils'
+import clearSelection from '@files/src/mixins/actions/clearSelection.js'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+const Component = {
+  render() {},
+  mixins: [clearSelection]
+}
+
+describe('clearSelection', () => {
+  describe('computed property "$_clearSelection_items"', () => {
+    describe('isEnabled property of returned element', () => {
+      it.each([
+        { resources: [], expectedStatus: false },
+        { resources: [{ id: 1 }], expectedStatus: true }
+      ])('should be set correctly', (inputData) => {
+        const wrapper = getWrapper()
+        const resources = inputData.resources
+        expect(wrapper.vm.$_clearSelection_items[0].isEnabled({ resources })).toBe(
+          inputData.expectedStatus
+        )
+      })
+    })
+  })
+
+  describe('method "$_clearSelection_trigger"', () => {
+    it('should trigger "RESET_SELECTION"', async () => {
+      const wrapper = getWrapper()
+      const spyCreateModalStub = jest.spyOn(wrapper.vm, 'RESET_SELECTION')
+      const resources = [{ id: 1 }]
+      await wrapper.vm.$_clearSelection_trigger({ resources })
+      expect(spyCreateModalStub).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+function getWrapper() {
+  return mount(Component, {
+    localVue,
+    store: createStore(Vuex.Store, {
+      modules: {
+        Files: {
+          namespaced: true,
+          mutations: {
+            RESET_SELECTION: jest.fn()
+          }
+        }
+      }
+    })
+  })
+}
diff --git a/packages/web-app-files/tests/unit/views/Favorites.spec.js b/packages/web-app-files/tests/unit/views/Favorites.spec.js
index 7ebb722014b..9c78cea9b8b 100644
--- a/packages/web-app-files/tests/unit/views/Favorites.spec.js
+++ b/packages/web-app-files/tests/unit/views/Favorites.spec.js
@@ -27,6 +27,14 @@ const listInfoStub = 'list-info-stub'
 
 const defaultActiveFiles = [createFile({ id: '1233' }), createFile({ id: '1234' })]
 
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn()
+  }))
+
 describe('Favorites view', () => {
   describe('loading indicator', () => {
     it('shows only the list-loader during loading', () => {
diff --git a/packages/web-app-files/tests/unit/views/Personal.spec.js b/packages/web-app-files/tests/unit/views/Personal.spec.js
index bc9f10bb554..6ee13095121 100644
--- a/packages/web-app-files/tests/unit/views/Personal.spec.js
+++ b/packages/web-app-files/tests/unit/views/Personal.spec.js
@@ -103,6 +103,14 @@ const resourcesFiles = [resourceForestJpg, resourceNotesTxt]
 const resourcesFolders = [resourceDocumentsFolder, resourcePdfsFolder]
 const resources = [...resourcesFiles, ...resourcesFolders]
 
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn()
+  }))
+
 describe('Personal view', () => {
   describe('file move with drag & drop', () => {
     it('should exit if target is also selected', async () => {
diff --git a/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts b/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
index b3ed2c73b85..0f62b3c6509 100644
--- a/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
+++ b/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
@@ -48,6 +48,14 @@ const stubSelectors = {
   listInfo: 'list-info-stub'
 }
 
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn()
+  }))
+
 describe('PublicFiles view', () => {
   describe('accentuate new files and folders', () => {
     // eslint-disable-next-line jest/expect-expect
diff --git a/tests/acceptance/pageObjects/personalPage.js b/tests/acceptance/pageObjects/personalPage.js
index 45d29b77766..7cc1fe40445 100644
--- a/tests/acceptance/pageObjects/personalPage.js
+++ b/tests/acceptance/pageObjects/personalPage.js
@@ -406,7 +406,7 @@ module.exports = {
       selector: '.oc-modal-body-input .oc-text-input'
     },
     clearSelectionBtn: {
-      selector: '#files-clear-selection'
+      selector: '.oc-files-actions-clear-selection-trigger'
     },
     dialogBoxInputTextInRed: {
       selector: '.oc-text-input-danger'