feat(web): make asset grid row height responsive (#16970)

* feat(web): max grid row height responsive

* also gallery-viewer

* lint

Author: midzelis

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -59,11 +59,14 @@
     const _assets = assets;
     updateSlidingWindow();
 
+    const rowWidth = Math.floor(viewport.width);
+    const rowHeight = rowWidth < 850 ? 100 : 235;
+
     geometry = getJustifiedLayoutFromAssets(_assets, {
       spacing: 2,
       heightTolerance: 0.15,
-      rowHeight: 235,
-      rowWidth: Math.floor(viewport.width),
+      rowHeight,
+      rowWidth,
     });
   });
 

web/src/lib/stores/assets-store.svelte.ts

@@ -32,7 +32,9 @@ export type AssetStoreOptions = Omit<AssetApiGetTimeBucketsRequest, 'size'> & {
   timelineAlbumId?: string;
   deferInit?: boolean;
 };
-
+export type AssetStoreLayoutOptions = {
+  rowHeight: number;
+};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function updateObject(target: any, source: any): boolean {
   if (!target) {
@@ -559,6 +561,7 @@ export class AssetStore {
 
   // --- private
   static #INIT_OPTIONS = {};
+  #rowHeight = 235;
   #viewportHeight = $state(0);
   #viewportWidth = $state(0);
   #scrollTop = $state(0);
@@ -601,6 +604,7 @@ export class AssetStore {
     const changed = value !== this.#viewportWidth;
     this.#viewportWidth = value;
     this.suspendTransitions = true;
+    this.#rowHeight = value < 850 ? 100 : 235;
     // side-effect - its ok!
     void this.#updateViewportGeometry(changed);
   }
@@ -776,6 +780,11 @@ export class AssetStore {
     this.#updateViewportGeometry(false);
   }
 
+  updateLayoutOptions(options: AssetStoreLayoutOptions) {
+    this.#rowHeight = options.rowHeight;
+    this.refreshLayout();
+  }
+
   async #init(options: AssetStoreOptions) {
     // doing the following outside of the task reduces flickr
     this.isInitialized = false;
@@ -845,10 +854,11 @@ export class AssetStore {
 
   createLayoutOptions() {
     const viewportWidth = this.viewportWidth;
+
     return {
       spacing: 2,
       heightTolerance: 0.15,
-      rowHeight: 235,
+      rowHeight: this.#rowHeight,
       rowWidth: Math.floor(viewportWidth),
     };
   }