update album list columns width

immich-app · Apr 21, 2024 · 7137537 · 7137537
1 parent 726b08d
commit 7137537
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/web/src/lib/components/album-page/albums-table-row.svelte b/web/src/lib/components/album-page/albums-table-row.svelte
@@ -26,7 +26,7 @@
   on:click={() => goto(`${AppRoute.ALBUMS}/${album.id}`)}
   on:contextmenu|preventDefault={(e) => showContextMenu({ x: e.x, y: e.y })}
 >
-  <td class="text-md text-ellipsis text-left w-8/12 sm:w-4/12 md:w-4/12 xl:w-[30%] 2xl:w-[40%] items-center">
+  <td class="text-md text-ellipsis text-left w-full sm:w-6/12 md:w-[42%] xl:w-[30%] 2xl:w-[40%] items-center">
     {album.albumName}
     {#if album.shared}
       <Icon
@@ -37,14 +37,14 @@
       />
     {/if}
   </td>
-  <td class="text-md text-ellipsis text-center sm:w-2/12 md:w-2/12 xl:w-[15%] 2xl:w-[12%]">
+  <td class="text-md hidden text-ellipsis text-center md:block md:w-[18%] xl:w-[15%] 2xl:w-[12%]">
     {album.assetCount}
     {album.assetCount > 1 ? `items` : `item`}
   </td>
-  <td class="text-md hidden text-ellipsis text-center sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]">
+  <td class="text-md hidden text-ellipsis text-center sm:block sm:w-3/12 md:w-[20%] xl:w-[15%] 2xl:w-[12%]">
     {dateLocaleString(album.updatedAt)}
   </td>
-  <td class="text-md hidden text-ellipsis text-center sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]">
+  <td class="text-md hidden text-ellipsis text-center sm:block sm:w-3/12 md:w-[20%] xl:w-[15%] 2xl:w-[12%]">
     {dateLocaleString(album.createdAt)}
   </td>
   <td class="text-md text-ellipsis text-center hidden xl:block xl:w-[15%] 2xl:w-[12%]">

diff --git a/web/src/lib/utils/album-utils.ts b/web/src/lib/utils/album-utils.ts
@@ -55,25 +55,25 @@ export const sortOptionsMetadata: AlbumSortOptionMetadata[] = [
     id: AlbumSortBy.Title,
     text: 'Title',
     defaultOrder: SortOrder.Asc,
-    columnStyle: 'text-left w-8/12 sm:w-4/12 md:w-4/12 md:w-4/12 xl:w-[30%] 2xl:w-[40%]',
+    columnStyle: 'text-left w-full sm:w-6/12 md:w-[42%] xl:w-[30%] 2xl:w-[40%]',
   },
   {
     id: AlbumSortBy.ItemCount,
     text: 'Number of items',
     defaultOrder: SortOrder.Desc,
-    columnStyle: 'text-center w-4/12 m:w-2/12 md:w-2/12 xl:w-[15%] 2xl:w-[12%]',
+    columnStyle: 'text-center hidden md:block md:w-[18%] xl:w-[15%] 2xl:w-[12%]',
   },
   {
     id: AlbumSortBy.DateModified,
     text: 'Date modified',
     defaultOrder: SortOrder.Desc,
-    columnStyle: 'text-center hidden sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]',
+    columnStyle: 'text-center hidden sm:block sm:w-[20%] xl:w-[15%] 2xl:w-[12%]',
   },
   {
     id: AlbumSortBy.DateCreated,
     text: 'Date created',
     defaultOrder: SortOrder.Desc,
-    columnStyle: 'text-center hidden sm:block w-3/12 xl:w-[15%] 2xl:w-[12%]',
+    columnStyle: 'text-center hidden sm:block sm:w-[20%] xl:w-[15%] 2xl:w-[12%]',
   },
   {
     id: AlbumSortBy.MostRecentPhoto,