From 31e3162c485bc68ee61ca7e3949d02e3d14db97e Mon Sep 17 00:00:00 2001
From: Stefan Forstenlechner <stefan@forstenlechner.dev>
Date: Mon, 23 Sep 2024 23:15:57 +0200
Subject: [PATCH] Change FolderGallery to rows layout

In column layout the folders are ordered by column.
Row layout is the correct one to choose, but it has weird behaviour
 regarding row height. Changed `targetRowHeight` so that it hopefully
 behaves a little nicer.
---
 .../src/ImageGallery/FolderGallery.tsx        | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/picture-gallery-client/src/ImageGallery/FolderGallery.tsx b/picture-gallery-client/src/ImageGallery/FolderGallery.tsx
index e335a20..f0eca7b 100644
--- a/picture-gallery-client/src/ImageGallery/FolderGallery.tsx
+++ b/picture-gallery-client/src/ImageGallery/FolderGallery.tsx
@@ -3,8 +3,8 @@ import { FolderPreview, ImageWithThumbnail } from "./models";
 import { Link } from "react-router-dom";
 import Typography from "@mui/material/Typography";
 
-import { ColumnsPhotoAlbum } from "react-photo-album";
-import "react-photo-album/columns.css";
+import { RowsPhotoAlbum } from "react-photo-album";
+import "react-photo-album/rows.css";
 
 export interface PhotoWithFolder extends ImageWithThumbnail {
   folderPreview: FolderPreview;
@@ -40,8 +40,23 @@ export const FolderGallery = ({ folders }: { folders: FolderPreview[] }) => {
 
   return (
     <>
-      <ColumnsPhotoAlbum
+      <RowsPhotoAlbum
         photos={foldersAsImages}
+        targetRowHeight={(containerWidth: number) => {
+          if (containerWidth >= 1000) {
+            return Math.min(230, containerWidth / 6);
+          } else if (containerWidth >= 600 && containerWidth < 1000) {
+            return containerWidth / 5;
+          } else if (containerWidth >= 300 && containerWidth < 600) {
+            return containerWidth / 4;
+          } else {
+            // containerWidth < 300
+            return containerWidth / 3;
+          }
+        }}
+        rowConstraints={{
+          singleRowMaxHeight: 230,
+        }}
         render={{
           image: (props, context) => (
             <PreviewFolder folder={context.photo.folderPreview} />