From dd91ac5ab96542fa870ac317f76032d9b2ce526d Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 5 Dec 2023 11:23:17 +0100
Subject: [PATCH 01/28] Bugfix: Gridview whitespace autosize

---
 .../web-app-files/src/components/FilesList/ResourceTiles.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 32c5fb00c20..369452cfae9 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -398,12 +398,12 @@ export default defineComponent({
 .oc-tiles {
   column-gap: 1rem;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(auto, var(--oc-size-tiles-default)));
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   justify-content: flex-start;
   row-gap: 1rem;
 
   &.resizableTiles {
-    grid-template-columns: repeat(auto-fill, minmax(auto, var(--oc-size-tiles-resize-step)));
+    grid-template-columns: repeat(auto-fit, minmax(var(--oc-size-tiles-resize-step), 1fr));
   }
 
   @media only screen and (max-width: 640px) {

From def728cf0922af8bb673a9a5adcb45403b67baa5 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 5 Dec 2023 13:56:28 +0100
Subject: [PATCH 02/28] Fix large scale

---
 packages/web-pkg/src/components/ViewOptions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 9f564008a6b..b9a041f1ccf 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -169,7 +169,7 @@ export default defineComponent({
     const setTilesViewSize = () => {
       const rootStyle = (document.querySelector(':root') as HTMLElement).style
       const currentSize = rootStyle.getPropertyValue('--oc-size-tiles-resize-step')
-      const newSize = `${(unref(viewSizeQuery) as any) * 12}rem`
+      const newSize = `${(unref(viewSizeQuery) as any) * 6}rem`
       if (!currentSize || currentSize !== newSize) {
         rootStyle.setProperty(`--oc-size-tiles-resize-step`, newSize)
       }

From b74e34f597049768f4b4e3287874ec8c0ad4b155 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 5 Dec 2023 14:20:16 +0100
Subject: [PATCH 03/28] Fix viewoption sizes

---
 .../web-app-files/src/components/FilesList/ResourceTiles.vue    | 2 +-
 packages/web-pkg/src/components/ViewOptions.vue                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 369452cfae9..b017a6d49ac 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -398,7 +398,7 @@ export default defineComponent({
 .oc-tiles {
   column-gap: 1rem;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   justify-content: flex-start;
   row-gap: 1rem;
 
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index b9a041f1ccf..04ca4f881e8 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -169,7 +169,7 @@ export default defineComponent({
     const setTilesViewSize = () => {
       const rootStyle = (document.querySelector(':root') as HTMLElement).style
       const currentSize = rootStyle.getPropertyValue('--oc-size-tiles-resize-step')
-      const newSize = `${(unref(viewSizeQuery) as any) * 6}rem`
+      const newSize = `${(unref(viewSizeQuery) as any) * 10}rem`
       if (!currentSize || currentSize !== newSize) {
         rootStyle.setProperty(`--oc-size-tiles-resize-step`, newSize)
       }

From f338af74b1c477f26427947cc13e15bfe6afc528 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 5 Dec 2023 14:22:20 +0100
Subject: [PATCH 04/28] Add changelog

---
 changelog/unreleased/bugfix-tiles-view-whitespace | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 changelog/unreleased/bugfix-tiles-view-whitespace

diff --git a/changelog/unreleased/bugfix-tiles-view-whitespace b/changelog/unreleased/bugfix-tiles-view-whitespace
new file mode 100644
index 00000000000..75b7300dfd3
--- /dev/null
+++ b/changelog/unreleased/bugfix-tiles-view-whitespace
@@ -0,0 +1,8 @@
+Bugfix: Tilesview has whitespace
+
+We've fixed a bug that caused the tiles-view to have whitespace
+on the right side of the screen which is not optimal for efficiant
+space management.
+
+https://github.com/owncloud/web/pull/10118
+https://github.com/owncloud/web/issues/10040

From ca5843334f78951813680beacb11f2403e3c71ec Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 5 Dec 2023 16:05:20 +0100
Subject: [PATCH 05/28] Update unittests

---
 packages/web-pkg/tests/unit/components/ViewOptions.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts b/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts
index f07f3eeba68..25ea68c1f55 100644
--- a/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts
+++ b/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts
@@ -117,7 +117,7 @@ describe('ViewOptions component', () => {
       })
       const rootStyle = (document.querySelector(':root') as HTMLElement).style
       expect(rootStyle.getPropertyValue('--oc-size-tiles-resize-step')).toEqual(
-        `${tileSize * 12}rem`
+        `${tileSize * 10}rem`
       )
     })
   })

From c8be4efdad71945292335c8fd61d877a0a51bea5 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 8 Dec 2023 14:30:32 +0100
Subject: [PATCH 06/28] WIP

---
 .../src/components/FilesList/ResourceTiles.vue             | 7 +++++--
 packages/web-pkg/src/components/ViewOptions.vue            | 2 ++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index b017a6d49ac..c544abbadd2 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -398,12 +398,15 @@ export default defineComponent({
 .oc-tiles {
   column-gap: 1rem;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(220px, var(--oc-size-tiles-resize-step2)));
   justify-content: flex-start;
   row-gap: 1rem;
 
   &.resizableTiles {
-    grid-template-columns: repeat(auto-fit, minmax(var(--oc-size-tiles-resize-step), 1fr));
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(var(--oc-size-tiles-resize-step), var(--oc-size-tiles-resize-step2))
+    );
   }
 
   @media only screen and (max-width: 640px) {
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 04ca4f881e8..e3e8011f1bd 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -170,8 +170,10 @@ export default defineComponent({
       const rootStyle = (document.querySelector(':root') as HTMLElement).style
       const currentSize = rootStyle.getPropertyValue('--oc-size-tiles-resize-step')
       const newSize = `${(unref(viewSizeQuery) as any) * 10}rem`
+      const newSize2 = `${((unref(viewSizeQuery) as any) * 1) / 10}fr`
       if (!currentSize || currentSize !== newSize) {
         rootStyle.setProperty(`--oc-size-tiles-resize-step`, newSize)
+        rootStyle.setProperty(`--oc-size-tiles-resize-step2`, newSize2)
       }
     }
 

From 2a1934cec2c8bdcca5350f572d721754e5095e4d Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 11 Dec 2023 15:40:34 +0100
Subject: [PATCH 07/28] Solution?

---
 .../src/components/FilesList/ResourceTiles.vue         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index c544abbadd2..05c6eae6959 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -398,15 +398,15 @@ export default defineComponent({
 .oc-tiles {
   column-gap: 1rem;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, var(--oc-size-tiles-resize-step2)));
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   justify-content: flex-start;
   row-gap: 1rem;
 
   &.resizableTiles {
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax(var(--oc-size-tiles-resize-step), var(--oc-size-tiles-resize-step2))
-    );
+    grid-template-columns: repeat(auto-fit, minmax(var(--oc-size-tiles-resize-step), 1fr));
+    .oc-tiles-item {
+      max-width: calc(var(--oc-size-tiles-resize-step) * 2);
+    }
   }
 
   @media only screen and (max-width: 640px) {

From bb517fd4f4c4894d4561b3caefc6b6807fe771e3 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 12 Dec 2023 12:39:59 +0100
Subject: [PATCH 08/28] WIP

---
 .../components/FilesList/ResourceTiles.vue    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 05c6eae6959..7991f81bdf6 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -85,6 +85,22 @@
           </template>
         </oc-tile>
       </li>
+      <template v-if="7 - viewSize - data.length > 0">
+        <li style="display: list-item" v-for="index in 8 - viewSize - data.length" :key="index">
+          <div
+            style="
+              opacity: 0;
+              box-shadow: none;
+              height: 100%;
+              display: flex;
+              flex-flow: column;
+              outline: 1px solid var(--oc-color-border);
+            "
+          >
+            {{ viewSize }}
+          </div>
+        </li>
+      </template>
     </oc-list>
     <Teleport v-if="dragItem" to="body">
       <oc-ghost-element ref="ghostElementRef" :preview-items="[dragItem, ...dragSelection]" />
@@ -308,7 +324,6 @@ export default defineComponent({
       }
       return sizeMap[props.viewSize] ?? 'xlarge'
     })
-
     onBeforeUpdate(() => {
       tileRefs.value = {
         tiles: [],
@@ -404,9 +419,6 @@ export default defineComponent({
 
   &.resizableTiles {
     grid-template-columns: repeat(auto-fit, minmax(var(--oc-size-tiles-resize-step), 1fr));
-    .oc-tiles-item {
-      max-width: calc(var(--oc-size-tiles-resize-step) * 2);
-    }
   }
 
   @media only screen and (max-width: 640px) {

From 2f561148375a0d44b6598e14a8d4780e68f0c811 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 12 Dec 2023 12:40:19 +0100
Subject: [PATCH 09/28] WIP

---
 .../web-app-files/src/components/FilesList/ResourceTiles.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 7991f81bdf6..6840f06f256 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -85,7 +85,7 @@
           </template>
         </oc-tile>
       </li>
-      <template v-if="7 - viewSize - data.length > 0">
+      <template v-if="8 - viewSize - data.length > 0">
         <li style="display: list-item" v-for="index in 8 - viewSize - data.length" :key="index">
           <div
             style="

From c12a7a8e93d2f37d34781c9328ecb63db8d9bc5f Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 12 Dec 2023 14:10:32 +0100
Subject: [PATCH 10/28] Remove dev leftover

---
 packages/web-pkg/src/components/ViewOptions.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index e3e8011f1bd..6f6b2d5bf63 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -169,11 +169,9 @@ export default defineComponent({
     const setTilesViewSize = () => {
       const rootStyle = (document.querySelector(':root') as HTMLElement).style
       const currentSize = rootStyle.getPropertyValue('--oc-size-tiles-resize-step')
-      const newSize = `${(unref(viewSizeQuery) as any) * 10}rem`
-      const newSize2 = `${((unref(viewSizeQuery) as any) * 1) / 10}fr`
+      const newSize = `${(unref(viewSizeQuery) as any) * 9}rem`
       if (!currentSize || currentSize !== newSize) {
         rootStyle.setProperty(`--oc-size-tiles-resize-step`, newSize)
-        rootStyle.setProperty(`--oc-size-tiles-resize-step2`, newSize2)
       }
     }
 

From 72c17203cc40918116ede302795eeab14fb3527e Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 12 Dec 2023 14:18:30 +0100
Subject: [PATCH 11/28] cleanup code

---
 .../components/FilesList/ResourceTiles.vue    | 38 ++++++++++++-------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 6840f06f256..494ba55abc9 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -85,18 +85,9 @@
           </template>
         </oc-tile>
       </li>
-      <template v-if="8 - viewSize - data.length > 0">
-        <li style="display: list-item" v-for="index in 8 - viewSize - data.length" :key="index">
-          <div
-            style="
-              opacity: 0;
-              box-shadow: none;
-              height: 100%;
-              display: flex;
-              flex-flow: column;
-              outline: 1px solid var(--oc-color-border);
-            "
-          >
+      <template v-if="renderGhostTiles">
+        <li class="ghost-tile" v-for="index in ghostTileCount" :key="index">
+          <div>
             {{ viewSize }}
           </div>
         </li>
@@ -378,6 +369,14 @@ export default defineComponent({
       context.emit('fileDropped', resource.id)
     }
 
+    const ghostTileCount = computed(() => {
+      return 8 - props.viewSize - props.data.length
+    })
+    const renderGhostTiles = computed(() => {
+      const count = unref(ghostTileCount)
+      return count > 0
+    })
+
     return {
       areFileExtensionsShown,
       emitTileClick,
@@ -398,7 +397,9 @@ export default defineComponent({
       dragStart,
       dragSelection,
       fileDropped,
-      setDropStyling
+      setDropStyling,
+      ghostTileCount,
+      renderGhostTiles
     }
   },
   data() {
@@ -456,4 +457,15 @@ export default defineComponent({
     }
   }
 }
+.ghost-tile {
+  display: list-item;
+  div {
+    opacity: 0;
+    box-shadow: none;
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    outline: 1px solid var(--oc-color-border);
+  }
+}
 </style>

From 7cc5d54b8808e820222546184c3a6c7b154ad445 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 15 Dec 2023 10:47:30 +0100
Subject: [PATCH 12/28] Calculate max tiles count per row / still needs to be
 recalculated when the slider value changes

---
 .../components/FilesList/ResourceTiles.vue    | 46 ++++++++++++++++++-
 .../__snapshots__/ResourceTiles.spec.ts.snap  | 39 +++++++++++++++-
 .../web-pkg/src/components/ViewOptions.vue    |  2 +-
 .../tests/unit/components/ViewOptions.spec.ts |  2 +-
 4 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 494ba55abc9..355b03327b2 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -103,7 +103,16 @@
 </template>
 
 <script lang="ts">
-import { onBeforeUpdate, defineComponent, nextTick, PropType, computed, ref, unref } from 'vue'
+import {
+  onBeforeUpdate,
+  defineComponent,
+  nextTick,
+  PropType,
+  computed,
+  ref,
+  unref,
+  onMounted
+} from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
 import { useStore, SortDir, SortField, ViewModeConstants } from '@ownclouders/web-pkg'
@@ -369,8 +378,41 @@ export default defineComponent({
       context.emit('fileDropped', resource.id)
     }
 
+    const maxRowCount = ref(0)
+
+    const getCssVariableValue = (variableName) => {
+      var style = getComputedStyle(document.documentElement)
+      return style.getPropertyValue(variableName).trim()
+    }
+
+    const remToPixels = (rem) => {
+      var fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
+      return rem * fontSize
+    }
+
+    const calculateGhostTileCount = () => {
+      var element = document.getElementById('tiles-view')
+      var style = window.getComputedStyle(element)
+      var paddingLeft = parseInt(style.getPropertyValue('padding-left'), 10)
+      var paddingRight = parseInt(style.getPropertyValue('padding-right'), 10)
+      var maxWidthWithoutPadding = element.clientWidth - paddingLeft - paddingRight
+
+      var cssVariableValue = getCssVariableValue('--oc-size-tiles-resize-step') // CSS variable name
+      var remValue = parseFloat(cssVariableValue) // Convert the value to a number
+      var pixels = remToPixels(remValue)
+      var tileCount = Math.floor(maxWidthWithoutPadding / pixels)
+      maxRowCount.value = tileCount
+    }
+
+    onMounted(() => {
+      window.addEventListener('resize', () => {
+        calculateGhostTileCount()
+      })
+      calculateGhostTileCount()
+    })
+
     const ghostTileCount = computed(() => {
-      return 8 - props.viewSize - props.data.length
+      return unref(maxRowCount) - props.data.length
     })
     const renderGhostTiles = computed(() => {
       const count = unref(ghostTileCount)
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index 1a7026cbfe1..04b8bdf984c 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -3,7 +3,29 @@
 exports[`ResourceTiles component renders a footer slot 1`] = `
 <div>
   <!--v-if-->
-  <oc-list class="oc-tiles oc-flex"></oc-list>
+  <oc-list class="oc-tiles oc-flex">
+    <li class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li class="ghost-tile">
+      <div>1</div>
+    </li>
+  </oc-list>
   <!--v-if-->
   <div class="oc-tiles-footer">Hello, ResourceTiles footer!</div>
 </div>
@@ -19,6 +41,21 @@ exports[`ResourceTiles component renders an array of spaces correctly 1`] = `
     <li class="oc-tiles-item has-item-context-menu">
       <oc-tile draggable="false" is-resource-selected="false" resource="[object Object]" resource-icon-size="xlarge" resource-route="[object Object]"></oc-tile>
     </li>
+    <li class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li class="ghost-tile">
+      <div>1</div>
+    </li>
   </oc-list>
   <!--v-if-->
   <div class="oc-tiles-footer"></div>
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 6f6b2d5bf63..025c1ca3bd9 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -89,7 +89,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, unref, watch } from 'vue'
+import { computed, defineComponent, onMounted, PropType, ref, unref, watch } from 'vue'
 import { mapMutations, mapState } from 'vuex'
 import { useGettext } from 'vue3-gettext'
 import {
diff --git a/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts b/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts
index 25ea68c1f55..39873b9e2ff 100644
--- a/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts
+++ b/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts
@@ -117,7 +117,7 @@ describe('ViewOptions component', () => {
       })
       const rootStyle = (document.querySelector(':root') as HTMLElement).style
       expect(rootStyle.getPropertyValue('--oc-size-tiles-resize-step')).toEqual(
-        `${tileSize * 10}rem`
+        `${tileSize * 9}rem`
       )
     })
   })

From feeb5a299c4aac5108d4e80065b266c4d5892c65 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 15 Dec 2023 11:25:38 +0100
Subject: [PATCH 13/28] Implement watch for tile-size slider changes

---
 .../components/FilesList/ResourceTiles.vue    | 34 ++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 355b03327b2..3e11f41ae48 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -111,7 +111,9 @@ import {
   computed,
   ref,
   unref,
-  onMounted
+  onMounted,
+  onBeforeUnmount,
+  watch
 } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
@@ -195,6 +197,9 @@ export default defineComponent({
 
     const dragItem = ref()
     const ghostElementRef = ref()
+    const maxRowCount = ref(0)
+    const tileSize = ref('')
+
     const tileRefs = ref({
       tiles: [],
       dropBtns: []
@@ -378,8 +383,6 @@ export default defineComponent({
       context.emit('fileDropped', resource.id)
     }
 
-    const maxRowCount = ref(0)
-
     const getCssVariableValue = (variableName) => {
       var style = getComputedStyle(document.documentElement)
       return style.getPropertyValue(variableName).trim()
@@ -397,20 +400,35 @@ export default defineComponent({
       var paddingRight = parseInt(style.getPropertyValue('padding-right'), 10)
       var maxWidthWithoutPadding = element.clientWidth - paddingLeft - paddingRight
 
-      var cssVariableValue = getCssVariableValue('--oc-size-tiles-resize-step') // CSS variable name
-      var remValue = parseFloat(cssVariableValue) // Convert the value to a number
+      var cssVariableValue = getCssVariableValue('--oc-size-tiles-resize-step')
+      var remValue = parseFloat(cssVariableValue)
       var pixels = remToPixels(remValue)
       var tileCount = Math.floor(maxWidthWithoutPadding / pixels)
       maxRowCount.value = tileCount
     }
 
+    const updateTileSize = () => {
+      tileSize.value = getComputedStyle(document.documentElement)
+        .getPropertyValue('--oc-size-tiles-resize-step')
+        .trim()
+    }
+
     onMounted(() => {
-      window.addEventListener('resize', () => {
-        calculateGhostTileCount()
-      })
+      window.addEventListener('resize', calculateGhostTileCount)
       calculateGhostTileCount()
+
+      updateTileSize()
+      const observer = new MutationObserver(updateTileSize)
+      observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] })
+
+      onBeforeUnmount(() => {
+        observer.disconnect()
+        window.removeEventListener('resize', calculateGhostTileCount)
+      })
     })
 
+    watch(tileSize, calculateGhostTileCount)
+
     const ghostTileCount = computed(() => {
       return unref(maxRowCount) - props.data.length
     })

From bbca187c0a7ac86c178caaa3e7188a011ab3d2f0 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 15 Dec 2023 11:32:48 +0100
Subject: [PATCH 14/28] Rename rowCount

---
 .../src/components/FilesList/ResourceTiles.vue              | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 3e11f41ae48..090e0659a77 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -197,7 +197,7 @@ export default defineComponent({
 
     const dragItem = ref()
     const ghostElementRef = ref()
-    const maxRowCount = ref(0)
+    const maxTileCount = ref(0)
     const tileSize = ref('')
 
     const tileRefs = ref({
@@ -404,7 +404,7 @@ export default defineComponent({
       var remValue = parseFloat(cssVariableValue)
       var pixels = remToPixels(remValue)
       var tileCount = Math.floor(maxWidthWithoutPadding / pixels)
-      maxRowCount.value = tileCount
+      maxTileCount.value = tileCount
     }
 
     const updateTileSize = () => {
@@ -430,7 +430,7 @@ export default defineComponent({
     watch(tileSize, calculateGhostTileCount)
 
     const ghostTileCount = computed(() => {
-      return unref(maxRowCount) - props.data.length
+      return unref(maxTileCount) - props.data.length
     })
     const renderGhostTiles = computed(() => {
       const count = unref(ghostTileCount)

From e5962eae5bd027798224b602e0672cdd57d46ace Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Sat, 16 Dec 2023 13:12:05 +0100
Subject: [PATCH 15/28] Lint, change var to const, remove unnecessary computed

---
 .../components/FilesList/ResourceTiles.vue    | 76 +++++++++----------
 .../web-pkg/src/components/ViewOptions.vue    |  2 +-
 2 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 090e0659a77..b3dbc3af90f 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -85,8 +85,8 @@
           </template>
         </oc-tile>
       </li>
-      <template v-if="renderGhostTiles">
-        <li class="ghost-tile" v-for="index in ghostTileCount" :key="index">
+      <template v-if="ghostTilesCount">
+        <li v-for="index in ghostTilesCount" :key="index" class="ghost-tile">
           <div>
             {{ viewSize }}
           </div>
@@ -104,31 +104,35 @@
 
 <script lang="ts">
 import {
-  onBeforeUpdate,
+  computed,
   defineComponent,
   nextTick,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onMounted,
   PropType,
-  computed,
   ref,
   unref,
-  onMounted,
-  onBeforeUnmount,
   watch
 } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
-import { useStore, SortDir, SortField, ViewModeConstants } from '@ownclouders/web-pkg'
-import { ImageDimension } from '@ownclouders/web-pkg'
-import { createFileRouteOptions } from '@ownclouders/web-pkg'
-import { displayPositionedDropdown } from '@ownclouders/web-pkg'
-import { createLocationSpaces } from '@ownclouders/web-pkg'
-import { ContextMenuQuickAction } from '@ownclouders/web-pkg'
-
 // Constants should match what is being used in OcTable/ResourceTable
 // Alignment regarding naming would be an API-breaking change and can
 // Be done at a later point in time?
-import { useResourceRouteResolver } from '@ownclouders/web-pkg'
-import { eventBus } from '@ownclouders/web-pkg'
+import {
+  ContextMenuQuickAction,
+  createFileRouteOptions,
+  createLocationSpaces,
+  displayPositionedDropdown,
+  eventBus,
+  ImageDimension,
+  SortDir,
+  SortField,
+  useResourceRouteResolver,
+  useStore,
+  ViewModeConstants
+} from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'ResourceTiles',
@@ -383,28 +387,31 @@ export default defineComponent({
       context.emit('fileDropped', resource.id)
     }
 
+    const ghostTilesCount = computed(() => {
+      return Math.max(0, unref(maxTileCount) - props.data.length)
+    })
+
     const getCssVariableValue = (variableName) => {
-      var style = getComputedStyle(document.documentElement)
+      const style = getComputedStyle(document.documentElement)
       return style.getPropertyValue(variableName).trim()
     }
 
     const remToPixels = (rem) => {
-      var fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
+      const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
       return rem * fontSize
     }
 
     const calculateGhostTileCount = () => {
-      var element = document.getElementById('tiles-view')
-      var style = window.getComputedStyle(element)
-      var paddingLeft = parseInt(style.getPropertyValue('padding-left'), 10)
-      var paddingRight = parseInt(style.getPropertyValue('padding-right'), 10)
-      var maxWidthWithoutPadding = element.clientWidth - paddingLeft - paddingRight
-
-      var cssVariableValue = getCssVariableValue('--oc-size-tiles-resize-step')
-      var remValue = parseFloat(cssVariableValue)
-      var pixels = remToPixels(remValue)
-      var tileCount = Math.floor(maxWidthWithoutPadding / pixels)
-      maxTileCount.value = tileCount
+      const element = document.getElementById('tiles-view')
+      const style = window.getComputedStyle(element)
+      const paddingLeft = parseInt(style.getPropertyValue('padding-left'), 10)
+      const paddingRight = parseInt(style.getPropertyValue('padding-right'), 10)
+      const maxWidthWithoutPadding = element.clientWidth - paddingLeft - paddingRight
+
+      const cssVariableValue = getCssVariableValue('--oc-size-tiles-resize-step')
+      const remValue = parseFloat(cssVariableValue)
+      const pixels = remToPixels(remValue)
+      maxTileCount.value = Math.floor(maxWidthWithoutPadding / pixels)
     }
 
     const updateTileSize = () => {
@@ -429,14 +436,6 @@ export default defineComponent({
 
     watch(tileSize, calculateGhostTileCount)
 
-    const ghostTileCount = computed(() => {
-      return unref(maxTileCount) - props.data.length
-    })
-    const renderGhostTiles = computed(() => {
-      const count = unref(ghostTileCount)
-      return count > 0
-    })
-
     return {
       areFileExtensionsShown,
       emitTileClick,
@@ -458,8 +457,7 @@ export default defineComponent({
       dragSelection,
       fileDropped,
       setDropStyling,
-      ghostTileCount,
-      renderGhostTiles
+      ghostTilesCount
     }
   },
   data() {
@@ -517,8 +515,10 @@ export default defineComponent({
     }
   }
 }
+
 .ghost-tile {
   display: list-item;
+
   div {
     opacity: 0;
     box-shadow: none;
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 025c1ca3bd9..6f6b2d5bf63 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -89,7 +89,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, PropType, ref, unref, watch } from 'vue'
+import { computed, defineComponent, PropType, ref, unref, watch } from 'vue'
 import { mapMutations, mapState } from 'vuex'
 import { useGettext } from 'vue3-gettext'
 import {

From 5bd18063cdee683ab122a4ad8ac46d462ea766be Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Sat, 16 Dec 2023 13:21:35 +0100
Subject: [PATCH 16/28] Hide from screen readers

---
 .../web-app-files/src/components/FilesList/ResourceTiles.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index b3dbc3af90f..56a680ce400 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -86,7 +86,7 @@
         </oc-tile>
       </li>
       <template v-if="ghostTilesCount">
-        <li v-for="index in ghostTilesCount" :key="index" class="ghost-tile">
+        <li v-for="index in ghostTilesCount" :key="index" class="ghost-tile" aria-hidden="true">
           <div>
             {{ viewSize }}
           </div>

From 1edf3d43c10b4119d1498022e98abf1979261b2e Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Mon, 18 Dec 2023 13:58:56 +0100
Subject: [PATCH 17/28] feat: introduce useTileSize composable and watch that
 for tile sizes

---
 .../design-system/src/tokens/ods/size.yaml    |  4 +-
 .../components/FilesList/ResourceTiles.vue    | 91 +++++++------------
 .../src/views/spaces/GenericSpace.vue         |  1 -
 .../src/views/spaces/Projects.vue             |  1 -
 .../web-pkg/src/components/ViewOptions.vue    | 21 -----
 .../web-pkg/src/composables/viewMode/index.ts |  1 +
 .../src/composables/viewMode/useTileSize.ts   | 51 +++++++++++
 .../web-runtime/themes/owncloud/theme.json    |  4 +-
 8 files changed, 92 insertions(+), 82 deletions(-)
 create mode 100644 packages/web-pkg/src/composables/viewMode/useTileSize.ts

diff --git a/packages/design-system/src/tokens/ods/size.yaml b/packages/design-system/src/tokens/ods/size.yaml
index 1ac18295e8a..1b2af02c9f4 100644
--- a/packages/design-system/src/tokens/ods/size.yaml
+++ b/packages/design-system/src/tokens/ods/size.yaml
@@ -24,6 +24,6 @@ size:
     value: 14px
   tiles:
     resize-step:
-      value: 12rem
+      value: 9rem
     default:
-      value: 14rem
+      value: 12rem
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 56a680ce400..2a6856e44c9 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -34,7 +34,7 @@
         </oc-list>
       </oc-drop>
     </div>
-    <oc-list class="oc-tiles oc-flex" :class="resizable ? 'resizableTiles' : ''">
+    <oc-list class="oc-tiles oc-flex">
       <li v-for="resource in data" :key="resource.id" class="oc-tiles-item has-item-context-menu">
         <oc-tile
           :ref="(el) => (tileRefs.tiles[resource.id] = el)"
@@ -85,7 +85,7 @@
           </template>
         </oc-tile>
       </li>
-      <template v-if="ghostTilesCount">
+      <template>
         <li v-for="index in ghostTilesCount" :key="index" class="ghost-tile" aria-hidden="true">
           <div>
             {{ viewSize }}
@@ -131,6 +131,7 @@ import {
   SortField,
   useResourceRouteResolver,
   useStore,
+  useTileSize,
   ViewModeConstants
 } from '@ownclouders/web-pkg'
 
@@ -145,10 +146,6 @@ export default defineComponent({
       type: Array as PropType<Resource[]>,
       default: () => []
     },
-    resizable: {
-      type: Boolean,
-      default: false
-    },
     selectedIds: {
       type: Array,
       default: () => []
@@ -201,8 +198,6 @@ export default defineComponent({
 
     const dragItem = ref()
     const ghostElementRef = ref()
-    const maxTileCount = ref(0)
-    const tileSize = ref('')
 
     const tileRefs = ref({
       tiles: [],
@@ -387,54 +382,46 @@ export default defineComponent({
       context.emit('fileDropped', resource.id)
     }
 
-    const ghostTilesCount = computed(() => {
-      return Math.max(0, unref(maxTileCount) - props.data.length)
-    })
-
-    const getCssVariableValue = (variableName) => {
-      const style = getComputedStyle(document.documentElement)
-      return style.getPropertyValue(variableName).trim()
-    }
-
-    const remToPixels = (rem) => {
-      const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
-      return rem * fontSize
-    }
-
-    const calculateGhostTileCount = () => {
+    const viewWidth = ref<number>(0)
+    const updateViewWidth = () => {
       const element = document.getElementById('tiles-view')
       const style = window.getComputedStyle(element)
       const paddingLeft = parseInt(style.getPropertyValue('padding-left'), 10)
       const paddingRight = parseInt(style.getPropertyValue('padding-right'), 10)
-      const maxWidthWithoutPadding = element.clientWidth - paddingLeft - paddingRight
-
-      const cssVariableValue = getCssVariableValue('--oc-size-tiles-resize-step')
-      const remValue = parseFloat(cssVariableValue)
-      const pixels = remToPixels(remValue)
-      maxTileCount.value = Math.floor(maxWidthWithoutPadding / pixels)
+      viewWidth.value = element.clientWidth - paddingLeft - paddingRight
     }
+    const { tileSizePixels: tileSizePixelsBase } = useTileSize()
+    const maxTiles = computed(() => {
+      return unref(tileSizePixelsBase)
+        ? Math.floor(unref(viewWidth) / unref(tileSizePixelsBase))
+        : 0
+    })
+    const ghostTilesCount = computed(() => {
+      return unref(maxTiles) - (unref(maxTiles) ? props.data.length % unref(maxTiles) : 0)
+    })
 
-    const updateTileSize = () => {
-      tileSize.value = getComputedStyle(document.documentElement)
-        .getPropertyValue('--oc-size-tiles-resize-step')
-        .trim()
-    }
+    const tileSizePixels = computed(() => {
+      console.log('viewWidth', unref(viewWidth))
+      console.log('maxTiles', unref(maxTiles))
+      return unref(viewWidth) / unref(maxTiles)
+    })
+    watch(
+      tileSizePixels,
+      (px: number) => {
+        console.log('updating --oc-size-tiles-actual to', `${px}px`)
+        const rootStyle = (document.querySelector(':root') as HTMLElement).style
+        rootStyle.setProperty(`--oc-size-tiles-actual`, `${px}px`)
+      },
+      { immediate: true }
+    )
 
     onMounted(() => {
-      window.addEventListener('resize', calculateGhostTileCount)
-      calculateGhostTileCount()
-
-      updateTileSize()
-      const observer = new MutationObserver(updateTileSize)
-      observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] })
-
-      onBeforeUnmount(() => {
-        observer.disconnect()
-        window.removeEventListener('resize', calculateGhostTileCount)
-      })
+      window.addEventListener('resize', updateViewWidth)
+      updateViewWidth()
+    })
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', updateViewWidth)
     })
-
-    watch(tileSize, calculateGhostTileCount)
 
     return {
       areFileExtensionsShown,
@@ -472,22 +459,14 @@ export default defineComponent({
 .oc-tiles {
   column-gap: 1rem;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(var(--oc-size-tiles-actual), 1fr));
   justify-content: flex-start;
   row-gap: 1rem;
 
-  &.resizableTiles {
-    grid-template-columns: repeat(auto-fit, minmax(var(--oc-size-tiles-resize-step), 1fr));
-  }
-
   @media only screen and (max-width: 640px) {
     grid-template-columns: 80%;
     justify-content: center;
     padding: var(--oc-space-medium) 0;
-
-    &.resizableTiles {
-      grid-template-columns: 80%;
-    }
   }
 
   &-item-drop-highlight {
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 73bef05c018..8600b7edea4 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -69,7 +69,6 @@
             v-model:selectedIds="selectedResourcesIds"
             :data="paginatedResources"
             class="oc-px-m oc-pt-l"
-            :resizable="true"
             :target-route-callback="resourceTargetRouteCallback"
             :space="space"
             :drag-drop="true"
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 09f312e3475..fe7a9e9a977 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -49,7 +49,6 @@
             v-model:selectedIds="selectedResourcesIds"
             class="oc-px-m"
             :data="paginatedItems"
-            :resizable="true"
             :sort-fields="sortFields"
             :sort-by="sortBy"
             :sort-dir="sortDir"
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 6f6b2d5bf63..7ebf545fb8e 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -80,7 +80,6 @@
             max="6"
             class="oc-range"
             data-testid="files-tiles-size-slider"
-            @input="setTilesViewSize"
           />
         </li>
       </oc-list>
@@ -166,15 +165,6 @@ export default defineComponent({
       defaultValue: ViewModeConstants.tilesSizeDefault.toString()
     })
 
-    const setTilesViewSize = () => {
-      const rootStyle = (document.querySelector(':root') as HTMLElement).style
-      const currentSize = rootStyle.getPropertyValue('--oc-size-tiles-resize-step')
-      const newSize = `${(unref(viewSizeQuery) as any) * 9}rem`
-      if (!currentSize || currentSize !== newSize) {
-        rootStyle.setProperty(`--oc-size-tiles-resize-step`, newSize)
-      }
-    }
-
     const setItemsPerPage = (itemsPerPage: string) => {
       return router.replace({
         query: {
@@ -197,16 +187,6 @@ export default defineComponent({
       { immediate: true, deep: true }
     )
 
-    watch(
-      viewSizeQuery,
-      (size) => {
-        if (size) {
-          setTilesViewSize()
-        }
-      },
-      { immediate: true }
-    )
-
     return {
       ViewModeConstants,
       viewModeCurrent: viewModeQuery,
@@ -214,7 +194,6 @@ export default defineComponent({
       itemsPerPageCurrent: itemsPerPageQuery,
       queryParamsLoading,
       queryItemAsString,
-      setTilesViewSize,
       setItemsPerPage,
       setViewMode,
       viewOptionsButtonLabel: $gettext('Display customization options of the files list')
diff --git a/packages/web-pkg/src/composables/viewMode/index.ts b/packages/web-pkg/src/composables/viewMode/index.ts
index b8c1a614979..f9e19722d6a 100644
--- a/packages/web-pkg/src/composables/viewMode/index.ts
+++ b/packages/web-pkg/src/composables/viewMode/index.ts
@@ -1,2 +1,3 @@
 export * from './constants'
+export * from './useTileSize'
 export * from './useViewMode'
diff --git a/packages/web-pkg/src/composables/viewMode/useTileSize.ts b/packages/web-pkg/src/composables/viewMode/useTileSize.ts
new file mode 100644
index 00000000000..9be031c852b
--- /dev/null
+++ b/packages/web-pkg/src/composables/viewMode/useTileSize.ts
@@ -0,0 +1,51 @@
+import { useViewSize } from './useViewMode'
+import { computed, onBeforeUnmount, onMounted, ref, unref } from 'vue'
+
+export const useTileSize = () => {
+  const viewSize = useViewSize(null)
+
+  const themeVarToPixels = (value: string) => {
+    if (!value.endsWith('rem') && !value.endsWith('px')) {
+      return 0
+    }
+    if (value.endsWith('rem')) {
+      const rem = parseInt(value.replace('rem', '').trim())
+      const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
+      return rem * fontSize
+    }
+    return parseInt(value.replace('px', '').trim())
+  }
+
+  const baseSizePixels = ref<number>(0)
+  const stepSizePixels = ref<number>(0)
+  const updateThemeVars = () => {
+    // FIXME: css root vars are undefined o_O
+    const rootStyle = (document.querySelector(':root') as HTMLElement).style
+    baseSizePixels.value = themeVarToPixels(
+      rootStyle.getPropertyValue('--oc-size-tiles-resize-default')
+    )
+    stepSizePixels.value = themeVarToPixels(
+      rootStyle.getPropertyValue('--oc-size-tiles-resize-step')
+    )
+  }
+  const observer = new MutationObserver(updateThemeVars)
+  onMounted(() => {
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] })
+  })
+  onBeforeUnmount(() => {
+    observer?.disconnect()
+  })
+
+  const tileSizePixels = computed(() => {
+    return unref(baseSizePixels) + (unref(viewSize) - 1) * unref(stepSizePixels)
+  })
+  const tileSizeRem = computed(() => {
+    const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
+    return unref(tileSizePixels) / fontSize
+  })
+
+  return {
+    tileSizePixels,
+    tileSizeRem
+  }
+}
diff --git a/packages/web-runtime/themes/owncloud/theme.json b/packages/web-runtime/themes/owncloud/theme.json
index cdb137feb20..2482a8162be 100644
--- a/packages/web-runtime/themes/owncloud/theme.json
+++ b/packages/web-runtime/themes/owncloud/theme.json
@@ -48,7 +48,9 @@
             "icon-default": "",
             "max-height-logo": "",
             "max-width-logo": "",
-            "width-medium": ""
+            "width-medium": "",
+            "tiles-default": "",
+            "tiles-resize-step": ""
           },
           "spacing": {
             "xsmall": "",

From 7c652f8fe10e99ab925f0c5e59fc0e8be8f918f1 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 18 Dec 2023 14:59:31 +0100
Subject: [PATCH 18/28] Fix undefined issues

---
 .../src/composables/viewMode/useTileSize.ts   | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/packages/web-pkg/src/composables/viewMode/useTileSize.ts b/packages/web-pkg/src/composables/viewMode/useTileSize.ts
index 9be031c852b..5584a09e74c 100644
--- a/packages/web-pkg/src/composables/viewMode/useTileSize.ts
+++ b/packages/web-pkg/src/composables/viewMode/useTileSize.ts
@@ -19,23 +19,14 @@ export const useTileSize = () => {
   const baseSizePixels = ref<number>(0)
   const stepSizePixels = ref<number>(0)
   const updateThemeVars = () => {
-    // FIXME: css root vars are undefined o_O
-    const rootStyle = (document.querySelector(':root') as HTMLElement).style
-    baseSizePixels.value = themeVarToPixels(
-      rootStyle.getPropertyValue('--oc-size-tiles-resize-default')
-    )
-    stepSizePixels.value = themeVarToPixels(
-      rootStyle.getPropertyValue('--oc-size-tiles-resize-step')
-    )
+    const element = document.documentElement
+    const styles = getComputedStyle(element)
+    baseSizePixels.value = themeVarToPixels(styles.getPropertyValue('--oc-size-tiles-default'))
+    stepSizePixels.value = themeVarToPixels(styles.getPropertyValue('--oc-size-tiles-resize-step'))
   }
-  const observer = new MutationObserver(updateThemeVars)
   onMounted(() => {
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] })
+    updateThemeVars()
   })
-  onBeforeUnmount(() => {
-    observer?.disconnect()
-  })
-
   const tileSizePixels = computed(() => {
     return unref(baseSizePixels) + (unref(viewSize) - 1) * unref(stepSizePixels)
   })

From 18b8a9d59a200b717ce438f1d2ea9cca4fa7efb6 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 18 Dec 2023 15:09:10 +0100
Subject: [PATCH 19/28] slim mount function

---
 packages/web-pkg/src/composables/viewMode/useTileSize.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/web-pkg/src/composables/viewMode/useTileSize.ts b/packages/web-pkg/src/composables/viewMode/useTileSize.ts
index 5584a09e74c..e8bacc3b51f 100644
--- a/packages/web-pkg/src/composables/viewMode/useTileSize.ts
+++ b/packages/web-pkg/src/composables/viewMode/useTileSize.ts
@@ -18,14 +18,10 @@ export const useTileSize = () => {
 
   const baseSizePixels = ref<number>(0)
   const stepSizePixels = ref<number>(0)
-  const updateThemeVars = () => {
-    const element = document.documentElement
-    const styles = getComputedStyle(element)
+  onMounted(() => {
+    const styles = getComputedStyle(document.documentElement)
     baseSizePixels.value = themeVarToPixels(styles.getPropertyValue('--oc-size-tiles-default'))
     stepSizePixels.value = themeVarToPixels(styles.getPropertyValue('--oc-size-tiles-resize-step'))
-  }
-  onMounted(() => {
-    updateThemeVars()
   })
   const tileSizePixels = computed(() => {
     return unref(baseSizePixels) + (unref(viewSize) - 1) * unref(stepSizePixels)

From 5bdb2472dd2dec4baa003bac9fd4a10d2abd4988 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Mon, 18 Dec 2023 16:27:12 +0100
Subject: [PATCH 20/28] fix: tile pixels and ghost tile count

---
 .../design-system/src/tokens/ods/size.yaml    |  2 +-
 .../components/FilesList/ResourceTiles.vue    | 42 +++++++++----------
 .../src/composables/viewMode/useTileSize.ts   |  2 +-
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/design-system/src/tokens/ods/size.yaml b/packages/design-system/src/tokens/ods/size.yaml
index 1b2af02c9f4..b49008e5b00 100644
--- a/packages/design-system/src/tokens/ods/size.yaml
+++ b/packages/design-system/src/tokens/ods/size.yaml
@@ -26,4 +26,4 @@ size:
     resize-step:
       value: 9rem
     default:
-      value: 12rem
+      value: 9rem
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 2a6856e44c9..5bafcd66e87 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -85,13 +85,16 @@
           </template>
         </oc-tile>
       </li>
-      <template>
-        <li v-for="index in ghostTilesCount" :key="index" class="ghost-tile" aria-hidden="true">
-          <div>
-            {{ viewSize }}
-          </div>
-        </li>
-      </template>
+      <li
+        v-for="index in ghostTilesCount"
+        :key="`ghost-tile-${index}`"
+        class="ghost-tile"
+        :aria-hidden="true"
+      >
+        <div>
+          {{ viewSize }}
+        </div>
+      </li>
     </oc-list>
     <Teleport v-if="dragItem" to="body">
       <oc-ghost-element ref="ghostElementRef" :preview-items="[dragItem, ...dragSelection]" />
@@ -391,26 +394,29 @@ export default defineComponent({
       viewWidth.value = element.clientWidth - paddingLeft - paddingRight
     }
     const { tileSizePixels: tileSizePixelsBase } = useTileSize()
+    const gapSizePixels = computed(() => {
+      return parseFloat(getComputedStyle(document.documentElement).fontSize)
+    })
     const maxTiles = computed(() => {
       return unref(tileSizePixelsBase)
-        ? Math.floor(unref(viewWidth) / unref(tileSizePixelsBase))
+        ? Math.floor(unref(viewWidth) / (unref(tileSizePixelsBase) + unref(gapSizePixels)))
         : 0
     })
     const ghostTilesCount = computed(() => {
-      return unref(maxTiles) - (unref(maxTiles) ? props.data.length % unref(maxTiles) : 0)
+      const remainder = unref(maxTiles) ? props.data.length % unref(maxTiles) : 0
+      if (remainder) {
+        return unref(maxTiles) - remainder
+      }
+      return 0
     })
 
     const tileSizePixels = computed(() => {
-      console.log('viewWidth', unref(viewWidth))
-      console.log('maxTiles', unref(maxTiles))
-      return unref(viewWidth) / unref(maxTiles)
+      return unref(viewWidth) / unref(maxTiles) - unref(gapSizePixels)
     })
     watch(
       tileSizePixels,
       (px: number) => {
-        console.log('updating --oc-size-tiles-actual to', `${px}px`)
-        const rootStyle = (document.querySelector(':root') as HTMLElement).style
-        rootStyle.setProperty(`--oc-size-tiles-actual`, `${px}px`)
+        document.documentElement.style.setProperty(`--oc-size-tiles-actual`, `${px}px`)
       },
       { immediate: true }
     )
@@ -463,12 +469,6 @@ export default defineComponent({
   justify-content: flex-start;
   row-gap: 1rem;
 
-  @media only screen and (max-width: 640px) {
-    grid-template-columns: 80%;
-    justify-content: center;
-    padding: var(--oc-space-medium) 0;
-  }
-
   &-item-drop-highlight {
     background-color: var(--oc-color-input-border) !important;
   }
diff --git a/packages/web-pkg/src/composables/viewMode/useTileSize.ts b/packages/web-pkg/src/composables/viewMode/useTileSize.ts
index e8bacc3b51f..59d52cdbf6b 100644
--- a/packages/web-pkg/src/composables/viewMode/useTileSize.ts
+++ b/packages/web-pkg/src/composables/viewMode/useTileSize.ts
@@ -1,5 +1,5 @@
 import { useViewSize } from './useViewMode'
-import { computed, onBeforeUnmount, onMounted, ref, unref } from 'vue'
+import { computed, onMounted, ref, unref } from 'vue'
 
 export const useTileSize = () => {
   const viewSize = useViewSize(null)

From a9bbe6c93cb00ee7331ebfaca7bd19dd8985f28e Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Mon, 18 Dec 2023 16:56:04 +0100
Subject: [PATCH 21/28] test: fix viewOptions unit tests

---
 .../tests/unit/components/ViewOptions.spec.ts   | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts b/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts
index 39873b9e2ff..4faf27658e6 100644
--- a/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts
+++ b/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, unref } from 'vue'
 import {
   createStore,
   defaultPlugins,
@@ -110,15 +110,12 @@ describe('ViewOptions component', () => {
       })
       expect(wrapper.find(selectors.tileSizeSlider).exists()).toBeTruthy()
     })
-    it.each([1, 2, 3, 4, 5, 6])('applies the correct rem size via css', (tileSize) => {
-      getWrapper({
+    it.each([1, 2, 3, 4, 5, 6])('applies the correct size step', (tileSize) => {
+      const { mocks } = getWrapper({
         tileSize: tileSize.toString(),
         props: { viewModes: [ViewModeConstants.tilesView] }
       })
-      const rootStyle = (document.querySelector(':root') as HTMLElement).style
-      expect(rootStyle.getPropertyValue('--oc-size-tiles-resize-step')).toEqual(
-        `${tileSize * 9}rem`
-      )
+      expect(unref(mocks.tileSizeQueryMock)).toBe(tileSize.toString())
     })
   })
 })
@@ -132,13 +129,15 @@ function getWrapper({
 } = {}) {
   jest.mocked(useRouteQueryPersisted).mockImplementationOnce(() => ref(perPage))
   jest.mocked(useRouteQueryPersisted).mockImplementationOnce(() => ref(viewMode))
-  jest.mocked(useRouteQueryPersisted).mockImplementationOnce(() => ref(tileSize))
+  const tileSizeQueryMock = ref(tileSize)
+  jest.mocked(useRouteQueryPersisted).mockImplementationOnce(() => tileSizeQueryMock)
   jest.mocked(useRouteQuery).mockImplementationOnce(() => ref(currentPage))
 
   const storeOptions = { ...defaultStoreMockOptions }
   const store = createStore(storeOptions)
   const mocks = {
-    ...defaultComponentMocks({ currentRoute: mock<RouteLocation>({ path: '/files' }) })
+    ...defaultComponentMocks({ currentRoute: mock<RouteLocation>({ path: '/files' }) }),
+    tileSizeQueryMock
   }
   return {
     storeOptions,

From 06f1ad43afed0d9cbe96688b238388907ec39ed6 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 18 Dec 2023 17:29:14 +0100
Subject: [PATCH 22/28] Fixing ResourceTiles.spec.ts tests (WIP)

---
 .../FilesList/ResourceTiles.spec.ts           | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
index d90f30ad85f..1b6562a03e2 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
@@ -24,6 +24,33 @@ const spacesResources = [
 ]
 
 describe('ResourceTiles component', () => {
+  const originalGetElementById = document.getElementById
+  beforeEach(() => {
+    const mockElement = {
+      clientWidth: 800
+    }
+    ;(document as any).getElementById = jest.fn((id) => {
+      if (id === 'tiles-view') {
+        return mockElement
+      }
+      return originalGetElementById.call(document, id)
+    })
+    window.getComputedStyle = jest.fn().mockImplementation(() => {
+      return {
+        getPropertyValue: (propName) => {
+          switch (propName) {
+            case '--oc-size-tiles-default':
+              return '16px'
+            case '--oc-size-tiles-resize-step':
+              return '4px'
+            default:
+              return ''
+          }
+        },
+        fontSize: '14px'
+      }
+    })
+  })
   it('renders an array of spaces correctly', () => {
     const { wrapper } = getWrapper({ data: spacesResources })
     expect(wrapper.html()).toMatchSnapshot()

From ed1870f5dd1a5f932b9638fedef9fa46be2bffc4 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 19 Dec 2023 11:04:19 +0100
Subject: [PATCH 23/28] Fix ResourceTiles.spec.ts

---
 .../components/FilesList/ResourceTiles.vue    |   9 +-
 .../FilesList/ResourceTiles.spec.ts           |  16 ++-
 .../__snapshots__/ResourceTiles.spec.ts.snap  | 108 +++++++++++++-----
 3 files changed, 100 insertions(+), 33 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 5bafcd66e87..5b01418ff23 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -388,9 +388,9 @@ export default defineComponent({
     const viewWidth = ref<number>(0)
     const updateViewWidth = () => {
       const element = document.getElementById('tiles-view')
-      const style = window.getComputedStyle(element)
-      const paddingLeft = parseInt(style.getPropertyValue('padding-left'), 10)
-      const paddingRight = parseInt(style.getPropertyValue('padding-right'), 10)
+      const style = getComputedStyle(element)
+      const paddingLeft = parseInt(style.getPropertyValue('padding-left'), 10) | 0
+      const paddingRight = parseInt(style.getPropertyValue('padding-right'), 10) | 0
       viewWidth.value = element.clientWidth - paddingLeft - paddingRight
     }
     const { tileSizePixels: tileSizePixelsBase } = useTileSize()
@@ -403,8 +403,11 @@ export default defineComponent({
         : 0
     })
     const ghostTilesCount = computed(() => {
+      console.log('maxTiles', maxTiles.value)
+      console.log('proplength', props.data.length)
       const remainder = unref(maxTiles) ? props.data.length % unref(maxTiles) : 0
       if (remainder) {
+        console.log('ghostTileCount', unref(maxTiles) - remainder)
         return unref(maxTiles) - remainder
       }
       return 0
diff --git a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
index 1b6562a03e2..bef825b4548 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
@@ -3,6 +3,12 @@ import ResourceTiles from 'web-app-files/src/components/FilesList/ResourceTiles.
 import { sortFields } from 'web-app-files/src/helpers/ui/resourceTiles'
 import { Resource } from '@ownclouders/web-client'
 import { mock } from 'jest-mock-extended'
+jest.mock('@ownclouders/web-pkg', () => ({
+  ...jest.requireActual('@ownclouders/web-pkg'),
+  useTileSize: jest.fn().mockReturnValue({
+    tileSizePixels: 10
+  })
+}))
 
 const spacesResources = [
   {
@@ -25,6 +31,7 @@ const spacesResources = [
 
 describe('ResourceTiles component', () => {
   const originalGetElementById = document.getElementById
+  const originalGetComputedStyle = window.getComputedStyle
   beforeEach(() => {
     const mockElement = {
       clientWidth: 800
@@ -40,19 +47,20 @@ describe('ResourceTiles component', () => {
         getPropertyValue: (propName) => {
           switch (propName) {
             case '--oc-size-tiles-default':
-              return '16px'
+              return '9rem'
             case '--oc-size-tiles-resize-step':
-              return '4px'
+              return '9rem'
             default:
-              return ''
+              return originalGetComputedStyle(document.documentElement).getPropertyValue(propName)
           }
         },
         fontSize: '14px'
       }
     })
   })
-  it('renders an array of spaces correctly', () => {
+  it('renders an array of spaces correctly', async () => {
     const { wrapper } = getWrapper({ data: spacesResources })
+    await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index 04b8bdf984c..61795998511 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -1,59 +1,115 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ResourceTiles component renders a footer slot 1`] = `
+<div>
+  <!--v-if-->
+  <oc-list class="oc-tiles oc-flex"> </oc-list>
+  <!--v-if-->
+  <div class="oc-tiles-footer">Hello, ResourceTiles footer!</div>
+</div>
+`;
+
+exports[`ResourceTiles component renders an array of spaces correctly 1`] = `
 <div>
   <!--v-if-->
   <oc-list class="oc-tiles oc-flex">
-    <li class="ghost-tile">
+    <li class="oc-tiles-item has-item-context-menu">
+      <oc-tile draggable="false" is-resource-selected="false" resource="[object Object]" resource-icon-size="xlarge" resource-route="[object Object]"></oc-tile>
+    </li>
+    <li class="oc-tiles-item has-item-context-menu">
+      <oc-tile draggable="false" is-resource-selected="false" resource="[object Object]" resource-icon-size="xlarge" resource-route="[object Object]"></oc-tile>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
       <div>1</div>
     </li>
-    <li class="ghost-tile">
+    <li aria-hidden="true" class="ghost-tile">
       <div>1</div>
     </li>
-    <li class="ghost-tile">
+    <li aria-hidden="true" class="ghost-tile">
       <div>1</div>
     </li>
-    <li class="ghost-tile">
+    <li aria-hidden="true" class="ghost-tile">
       <div>1</div>
     </li>
-    <li class="ghost-tile">
+    <li aria-hidden="true" class="ghost-tile">
       <div>1</div>
     </li>
-    <li class="ghost-tile">
+    <li aria-hidden="true" class="ghost-tile">
       <div>1</div>
     </li>
-    <li class="ghost-tile">
+    <li aria-hidden="true" class="ghost-tile">
       <div>1</div>
     </li>
-  </oc-list>
-  <!--v-if-->
-  <div class="oc-tiles-footer">Hello, ResourceTiles footer!</div>
-</div>
-`;
-
-exports[`ResourceTiles component renders an array of spaces correctly 1`] = `
-<div>
-  <!--v-if-->
-  <oc-list class="oc-tiles oc-flex">
-    <li class="oc-tiles-item has-item-context-menu">
-      <oc-tile draggable="false" is-resource-selected="false" resource="[object Object]" resource-icon-size="xlarge" resource-route="[object Object]"></oc-tile>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
     </li>
-    <li class="oc-tiles-item has-item-context-menu">
-      <oc-tile draggable="false" is-resource-selected="false" resource="[object Object]" resource-icon-size="xlarge" resource-route="[object Object]"></oc-tile>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
+    </li>
+    <li aria-hidden="true" class="ghost-tile">
+      <div>1</div>
     </li>
-    <li class="ghost-tile">
+    <li aria-hidden="true" class="ghost-tile">
       <div>1</div>
     </li>
-    <li class="ghost-tile">
+    <li aria-hidden="true" class="ghost-tile">
       <div>1</div>
     </li>
-    <li class="ghost-tile">
+    <li aria-hidden="true" class="ghost-tile">
       <div>1</div>
     </li>
-    <li class="ghost-tile">
+    <li aria-hidden="true" class="ghost-tile">
       <div>1</div>
     </li>
-    <li class="ghost-tile">
+    <li aria-hidden="true" class="ghost-tile">
       <div>1</div>
     </li>
   </oc-list>

From 63eafdd35b07dd406f8d234f569b67433ca77bd2 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 19 Dec 2023 11:28:04 +0100
Subject: [PATCH 24/28] Remove dev leftover

---
 .../web-app-files/src/components/FilesList/ResourceTiles.vue   | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 5b01418ff23..32439af0c52 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -403,11 +403,8 @@ export default defineComponent({
         : 0
     })
     const ghostTilesCount = computed(() => {
-      console.log('maxTiles', maxTiles.value)
-      console.log('proplength', props.data.length)
       const remainder = unref(maxTiles) ? props.data.length % unref(maxTiles) : 0
       if (remainder) {
-        console.log('ghostTileCount', unref(maxTiles) - remainder)
         return unref(maxTiles) - remainder
       }
       return 0

From ae3d2b2cd324c0c0e36befe88a77662ff776aa2f Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 19 Dec 2023 17:19:25 +0100
Subject: [PATCH 25/28] Update tileSizePixels in tests

---
 .../FilesList/ResourceTiles.spec.ts           |  2 +-
 .../__snapshots__/ResourceTiles.spec.ts.snap  | 78 -------------------
 2 files changed, 1 insertion(+), 79 deletions(-)

diff --git a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
index bef825b4548..f06bd3fb660 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/ResourceTiles.spec.ts
@@ -6,7 +6,7 @@ import { mock } from 'jest-mock-extended'
 jest.mock('@ownclouders/web-pkg', () => ({
   ...jest.requireActual('@ownclouders/web-pkg'),
   useTileSize: jest.fn().mockReturnValue({
-    tileSizePixels: 10
+    tileSizePixels: 100
   })
 }))
 
diff --git a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index 61795998511..f8e51986365 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -34,84 +34,6 @@ exports[`ResourceTiles component renders an array of spaces correctly 1`] = `
     <li aria-hidden="true" class="ghost-tile">
       <div>1</div>
     </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
-    <li aria-hidden="true" class="ghost-tile">
-      <div>1</div>
-    </li>
   </oc-list>
   <!--v-if-->
   <div class="oc-tiles-footer"></div>

From 3b59e970f5ae1a397eb4e5b3d08aec9f4dcbabad Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 19 Dec 2023 20:05:48 +0100
Subject: [PATCH 26/28] docs: add tile size vars to theme docs

---
 docs/theming/_index.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/theming/_index.md b/docs/theming/_index.md
index 0fdf291fcb5..bf9e1ed6c47 100644
--- a/docs/theming/_index.md
+++ b/docs/theming/_index.md
@@ -307,7 +307,9 @@ Size variables get prepended with `--oc-size-`, so e.g. _"icon-default"_ creates
     "icon-default": "",
     "max-height-logo": "",
     "max-width-logo": "",
-    "width-medium": ""
+    "width-medium": "",
+    "tiles-default": "",
+    "tiles-resize-step": ""
   }
 }
 ```
@@ -426,7 +428,9 @@ A full template for your custom theme is provided below, and you can use the ins
             "icon-default": "",
             "max-height-logo": "",
             "max-width-logo": "",
-            "width-medium": ""
+            "width-medium": "",
+            "tiles-default": "",
+            "tiles-resize-step": ""
           },
           "spacing": {
             "xsmall": "",

From a00230ce94bc5ba4cb288bb340c30d85bd224f6d Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 20 Dec 2023 10:31:51 +0100
Subject: [PATCH 27/28] Address PR issues

---
 .../src/components/FilesList/ResourceTiles.vue            | 8 ++++----
 packages/web-pkg/src/components/AppBar/AppBar.vue         | 5 +++--
 packages/web-pkg/src/composables/viewMode/useTileSize.ts  | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index 32439af0c52..f5c281c7ee6 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -385,7 +385,7 @@ export default defineComponent({
       context.emit('fileDropped', resource.id)
     }
 
-    const viewWidth = ref<number>(0)
+    const viewWidth = ref(0)
     const updateViewWidth = () => {
       const element = document.getElementById('tiles-view')
       const style = getComputedStyle(element)
@@ -404,10 +404,10 @@ export default defineComponent({
     })
     const ghostTilesCount = computed(() => {
       const remainder = unref(maxTiles) ? props.data.length % unref(maxTiles) : 0
-      if (remainder) {
-        return unref(maxTiles) - remainder
+      if (!remainder) {
+        return 0
       }
-      return 0
+      return unref(maxTiles) - remainder
     })
 
     const tileSizePixels = computed(() => {
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index 2a1eb316e54..a3df0df61f3 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -330,8 +330,9 @@ export default defineComponent({
       const rightSidebarWidth =
         document.getElementById('app-sidebar')?.getBoundingClientRect().width || 0
 
-      const rightControlsWidth = document.getElementById('files-app-bar-controls-right')
-        ?.clientWidth
+      const rightControlsWidth = document.getElementById(
+        'files-app-bar-controls-right'
+      )?.clientWidth
 
       this.breadcrumbMaxWidth =
         totalContentWidth - leftSidebarWidth - rightSidebarWidth - rightControlsWidth
diff --git a/packages/web-pkg/src/composables/viewMode/useTileSize.ts b/packages/web-pkg/src/composables/viewMode/useTileSize.ts
index 59d52cdbf6b..fb67a1ab403 100644
--- a/packages/web-pkg/src/composables/viewMode/useTileSize.ts
+++ b/packages/web-pkg/src/composables/viewMode/useTileSize.ts
@@ -16,8 +16,8 @@ export const useTileSize = () => {
     return parseInt(value.replace('px', '').trim())
   }
 
-  const baseSizePixels = ref<number>(0)
-  const stepSizePixels = ref<number>(0)
+  const baseSizePixels = ref(0)
+  const stepSizePixels = ref(0)
   onMounted(() => {
     const styles = getComputedStyle(document.documentElement)
     baseSizePixels.value = themeVarToPixels(styles.getPropertyValue('--oc-size-tiles-default'))

From ed4c79432be2511fc60b75e6bfe366dbf88811c8 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 20 Dec 2023 10:41:35 +0100
Subject: [PATCH 28/28] Make linter happy

---
 packages/web-pkg/src/components/AppBar/AppBar.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index a3df0df61f3..2a1eb316e54 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -330,9 +330,8 @@ export default defineComponent({
       const rightSidebarWidth =
         document.getElementById('app-sidebar')?.getBoundingClientRect().width || 0
 
-      const rightControlsWidth = document.getElementById(
-        'files-app-bar-controls-right'
-      )?.clientWidth
+      const rightControlsWidth = document.getElementById('files-app-bar-controls-right')
+        ?.clientWidth
 
       this.breadcrumbMaxWidth =
         totalContentWidth - leftSidebarWidth - rightSidebarWidth - rightControlsWidth