updated projects display; simplified for mobile

components/ProjectCard.tsx

@@ -10,7 +10,7 @@ type Props = {
   visible: boolean;
   selected: boolean;
   setSelected: (selected: any) => void;
-  updateHeight: (activeId: number, contentRef: HTMLElement | null) => void;
+  updateHeight: (projectId: number, heightPx: number) => void;
 };
 
 export default function ProjectCard({ project, visible, selected = false, setSelected, updateHeight}: Props) {
@@ -45,9 +45,9 @@ export default function ProjectCard({ project, visible, selected = false, setSel
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
         onClick={() => setSelected(project.id)}
+        className="project-card"
         style={{             
-         // height: "100%",
-          minWidth: "10em",
+          width: "100%",
           textDecoration: "none",
           padding: 28,
           overflow: "hidden",
@@ -86,12 +86,14 @@ export default function ProjectCard({ project, visible, selected = false, setSel
     );
   }
 
-   useEffect(() => {
+ useEffect(() => {
   if (!contentRef.current) return;
 
-  const observer = new ResizeObserver(() => {
-    if (contentRef.current) {
-      updateHeight(project.id, contentRef.current);
+  const observer = new ResizeObserver((entries) => {
+    const height = entries[0]?.borderBoxSize?.[0]?.blockSize
+      ?? entries[0]?.contentRect.height;
+    if (height > 0) {
+      updateHeight(project.id, height);
     }
   });
 
@@ -106,6 +108,7 @@ export default function ProjectCard({ project, visible, selected = false, setSel
         ref={contentRef}
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
+        className="project-card"
         style={{
           minWidth: "10em",
           overflow: "hidden",