grid enhancement

resources/js/components/FilesView/FileBrowser.vue

@@ -1,6 +1,10 @@
 <template>
     <div
-		:class="{'user-dropping-file': isDragging, 'grid content-start xl:grid-cols-6 xl:gap-4 lg:grid-cols-4 lg:gap-2 grid-cols-3': itemViewType === 'grid'}"
+		:class="{
+			'user-dropping-file': isDragging,
+			'grid-view': itemViewType === 'grid' && ! isVisibleSidebar,
+			'grid-view-sidebar': itemViewType === 'grid' && isVisibleSidebar
+		}"
 		class="md:w-full md:overflow-y-auto md:h-full md:px-0 px-4"
 		@drop.stop.prevent="uploadDroppedItems($event)"
 		@keydown.delete="deleteItems"
@@ -34,6 +38,7 @@
 		},
 		computed: {
 			...mapGetters([
+				'isVisibleSidebar',
 				'currentFolder',
 				'itemViewType',
 				'clipboard',
@@ -133,3 +138,13 @@
 		}
 	}
 </script>
+
+<style>
+	.grid-view {
+		@apply grid content-start xl:grid-cols-6 xl:gap-4 lg:grid-cols-4 lg:gap-2 grid-cols-3
+	}
+
+	.grid-view-sidebar {
+		@apply grid content-start 2xl:grid-cols-5 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-3 xl:gap-4 lg:gap-2
+	}
+</style>

resources/js/components/FilesView/FileIconThumbnail.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="flex items-center justify-center pr-2">
+	<div class="flex items-center justify-center">
 		<span class="text-theme dark-text-theme lg:text-xs text-tiny font-semibold absolute z-10 inline-block mx-auto mt-1 w-7 overflow-ellipsis overflow-hidden text-center">
 			{{ entry.data.attributes.mimetype }}
 		</span>

resources/js/components/FilesView/ItemGrid.vue

@@ -17,7 +17,7 @@
 				<FolderIcon v-if="isFolder" :item="entry" location="file-item-list" class="inline-block transform scale-150 lg:mt-2 lg:mb-8 mt-3 mb-5" />
 
 				<!--File Icon-->
-				<div v-if="isFile || isVideo || (isImage && !entry.data.attributes.thumbnail)" class="relative">
+				<div v-if="isFile || isVideo || (isImage && !entry.data.attributes.thumbnail)" class="relative w-24 mx-auto">
 
 					<!--Member thumbnail for team folders-->
 					<MemberAvatar
@@ -25,7 +25,7 @@
 						:size="38"
 						:is-border="true"
 						:member="entry.data.relationships.user"
-						class="absolute lg:right-14 lg:-bottom-7 right-6 -bottom-5 z-10 transform lg:scale-100 scale-75"
+						class="absolute lg:-bottom-7 right-2 -bottom-5 z-10 transform lg:scale-100 scale-75 z-10"
 					/>
 
 					<FileIconThumbnail :entry="entry" class="transform lg:scale-150 scale-125 lg:mb-12 lg:mt-6 mt-5 mb-10 z-0" />
@@ -40,7 +40,7 @@
 						:size="38"
 						:is-border="true"
 						:member="entry.data.relationships.user"
-						class="absolute -right-3 -bottom-2.5 transform lg:scale-100 scale-75"
+						class="absolute -right-3 -bottom-2.5 transform lg:scale-100 scale-75 z-10"
 					/>
 
 					<img class="object-cover w-full h-full rounded-lg shadow-lg" :src="entry.data.attributes.thumbnail" :alt="entry.data.attributes.name" loading="lazy" />

resources/js/components/FilesView/ItemList.vue

@@ -20,7 +20,7 @@
 			<FolderIcon v-if="isFolder" :item="entry" location="file-item-list" />
 
 			<!--File Icon-->
-			<FileIconThumbnail v-if="isFile || isVideo || (isImage && !entry.data.attributes.thumbnail)" :entry="entry" />
+			<FileIconThumbnail v-if="isFile || isVideo || (isImage && !entry.data.attributes.thumbnail)" :entry="entry" class="pr-2" />
 
 			<!--Image thumbnail-->
 			<img v-if="isImage && entry.data.attributes.thumbnail" class="w-12 h-12 rounded ml-0.5" :src="entry.data.attributes.thumbnail" :alt="entry.data.attributes.name" loading="lazy" />

resources/js/components/FilesView/MobileToolbar.vue

@@ -6,7 +6,7 @@
             <chevron-left-icon size="17" class="icon-back" :class="{'is-visible': isLoadedFolder }" />
 
 			<!--Folder Title-->
-			<div class="directory-name">
+			<div class="directory-name lg:text-base text-sm">
 				{{ $getCurrentLocationName() }}
 			</div>
         </div>
@@ -88,7 +88,6 @@
 		line-height: 1;
 		width: 100%;
 		vertical-align: middle;
-		@include font-size(16);
 		color: $text;
 		font-weight: 700;
 		max-width: 220px;