From f4e8f02924c14d7f44f4200cf757e597f14c5cab Mon Sep 17 00:00:00 2001
From: Oliver Bryan <ob248@proton.me>
Date: Sun, 8 Feb 2026 08:55:08 +0000
Subject: [PATCH] scrollable photo list and fixed photo box

---
 src/App.tsx | 43 ++++++++++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index abf8e6c5..5a25a6a1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -505,11 +505,18 @@ function Home() {
                       </div>
                     ) : (
                       <div className="flex">
-                        <div className="flex flex-col flex-1 ml-8">
+                        <div
+                          id={getTravelPhotoListId(location.id)}
+                          className="flex flex-col flex-1 ml-8 max-h-128 overflow-y-auto gap-1"
+                        >
                           {locationPhotos[location.id].map(
                             (photo, photoIndex) => (
                               <Button
                                 key={photo}
+                                id={getTravelPhotoItemId(
+                                  location.id,
+                                  photoIndex,
+                                )}
                                 onClick={() => {
                                   const path = getTravelPhotoPath(
                                     location,
@@ -541,22 +548,24 @@ function Home() {
                             ),
                           )}
                         </div>
-                        {previewPhotoPath ? (
-                          <img
-                            className={"flex-1 max-w-sm"}
-                            src={previewPhotoPath}
-                            alt={"active-photo"}
-                          />
-                        ) : (
-                          <div
-                            className={
-                              "flex-1 max-w-sm border flex items-center justify-center text-sm gap-4"
-                            }
-                          >
-                            <ImageDelete />
-                            No photo selected
-                          </div>
-                        )}
+                        <div
+                          className={
+                            "flex-1 max-w-sm border flex items-center h-128 justify-center text-sm gap-4"
+                          }
+                        >
+                          {previewPhotoPath ? (
+                            <img
+                              className={"flex-1 max-w-sm"}
+                              src={previewPhotoPath}
+                              alt={"active-photo"}
+                            />
+                          ) : (
+                            <span>
+                              <ImageDelete />
+                              No photo selected
+                            </span>
+                          )}
+                        </div>
                       </div>
                     ))}
                 </div>