fix

Author: fabienSvstr

client/src/components/files/FileListDisplay.vue

@@ -11,10 +11,13 @@
   >
     <div
       class="scroll"
-        ref="containerScroll"
+      ref="containerScroll"
       @contextmenu="onContextMenu"
     >
-      <ion-list class="list">
+      <ion-list
+        class="list files-container-list"
+        :class="{ 'file-list-mobile': isSmallDisplay }"
+      >
         <ion-list-header
           class="folder-list-header"
           lines="full"
@@ -47,7 +50,7 @@
         <div>
           <file-list-item
             v-for="folder in folders.getEntries()"
-              ref="folderItemsRef"
+            ref="folderItemsRef"
             :key="folder.id"
             :entry="folder"
             :show-checkbox="someSelected"
@@ -60,7 +63,7 @@
           />
           <file-list-item
             v-for="file in files.getEntries()"
-              ref="fileItemsRef"
+            ref="fileItemsRef"
             :key="file.id"
             :entry="file"
             :show-checkbox="someSelected"
@@ -93,7 +96,7 @@ import { IonLabel, IonList, IonListHeader } from '@ionic/vue';
 import { computed, ref } from 'vue';
 import { MsCheckbox, useWindowSize } from 'megashark-lib';
 
-const { isLargeDisplay } = useWindowSize();
+const { isLargeDisplay, isSmallDisplay } = useWindowSize();
 const props = defineProps<{
   operationsInProgress: Array<FileOperationProgress>;
   files: EntryCollection<FileModel>;
@@ -181,6 +184,10 @@ async function scrollToSelected(): Promise<void> {
   margin-bottom: 0;
 }
 
+.file-list-mobile {
+  padding-top: 1rem;
+}
+
 .folder-list-header {
   &__label {
     padding: 0.75rem 1rem;