Add debug for screen size

src/components/portfolio/PortfolioGallery.tsx

@@ -31,6 +31,11 @@ export default function PortfolioGallery({
   const [items, setItems] = useState<PortfolioArtworkItem[]>([]);
   const [done, setDone] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [screen, setScreen] = useState<{
+    width: number;
+    height: number;
+    dpr: number;
+  } | null>(null);
 
   const inFlight = useRef(false);
   const doneRef = useRef(false);
@@ -80,6 +85,24 @@ export default function PortfolioGallery({
     void loadMore();
   }, [loadMore]);
 
+  useEffect(() => {
+    const update = () => {
+      setScreen({
+        width: window.innerWidth,
+        height: window.innerHeight,
+        dpr: window.devicePixelRatio || 1,
+      });
+    };
+
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("orientationchange", update);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("orientationchange", update);
+    };
+  }, []);
+
   const galleryItems: JustifiedGalleryItem[] = items.map((it) => ({
     id: it.id,
     name: it.name,
@@ -111,7 +134,12 @@ export default function PortfolioGallery({
   }
 
   return (
-    <div className="w-full">
+    <div className="relative w-full">
+      {screen ? (
+        <div className="pointer-events-none absolute right-2 top-2 z-10 rounded border border-border/60 bg-background/80 px-2 py-1 text-[11px] font-mono text-muted-foreground shadow-sm">
+          Screen {screen.width} × {screen.height} · {screen.dpr}x
+        </div>
+      ) : null}
       <JustifiedGallery
         items={galleryItems}
         hrefFrom="portfolio"