added site as project. Improved mobile display

components/SimpleGallery.tsx

@@ -5,8 +5,7 @@ import { createPortal } from "react-dom";
 type Props = {
   images: string[];
   videos?: string[];
-  title: string;
-  expansionHandler: (height: number) => void;
+  title: string; 
 };
 
 // 0 = inline default, 1 = inline enlarged, 2 = fullscreen overlay
@@ -15,8 +14,7 @@ type EnlargeLevel = 0 | 1 | 2;
 export default function SimpleGallery({
   images,
   videos = [],
-  title,
-  expansionHandler
+  title
 }: Props) {
 
   const [active, setActive] = useState(0);
@@ -31,28 +29,10 @@ export default function SimpleGallery({
 
   if (totalMedia === 0) return null;
 
-  function scheduleHeightUpdate(enlarged: boolean) {
-    if (timerRef.current) clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(() => {
-      if (!enlarged) {
-        expansionHandler(0);
-        return;
-      }
-      const el =
-        document.getElementById("gallery-main-image") ??
-        document.getElementById("gallery-main-video");       
-      if (el){
-        let h = el.getBoundingClientRect().height;
-        let adjAmount = h + 150;
-        expansionHandler(adjAmount);
-    }
-    }, 200);
-  }
-
   function handleEnlarge() {
     if (enlargeLevel === 0) {
       setEnlargeLevel(1);
-      scheduleHeightUpdate(true);
+    
     } else if (enlargeLevel === 1) {
       setEnlargeLevel(2);
     }
@@ -62,8 +42,7 @@ export default function SimpleGallery({
     if (enlargeLevel === 2) {
       setEnlargeLevel(1);
     } else if (enlargeLevel === 1) {
-      setEnlargeLevel(0);
-      scheduleHeightUpdate(false);
+      setEnlargeLevel(0);  
     }
   }
 
@@ -72,12 +51,7 @@ export default function SimpleGallery({
   }
 
   function handleThumbnailClick(index: number) {
-    setActive(index);
-    if (enlargeLevel === 1) {
-      scheduleHeightUpdate(true);
-    } else if (enlargeLevel === 2) {
-      // stay fullscreen with new media
-    }
+    setActive(index);   
   }
 
   function expandButton() {
@@ -398,7 +372,7 @@ export default function SimpleGallery({
 
   return (
     <>
-      <div style={{ marginBottom: 16 }}>
+      <div style={{ marginBottom: 8 }}>
         <div style={{ position: "relative", display: "inline-block", width: "100%" }}>
           {inlineMedia()}
         </div>