fix: image height

components/observability.tsx

@@ -8,21 +8,25 @@ const slides = [
     label: 'Dashboard',
     src: '/dashboard.png',
     alt: 'GreyProxy dashboard overview showing connection stats and activity',
+    fit: false,
   },
   {
     label: 'Pending requests',
     src: '/pending_requests.png',
     alt: 'GreyProxy pending network requests with Allow and Deny controls',
+    fit: true,
   },
   {
     label: 'Rules',
     src: '/rules.png',
     alt: 'GreyProxy domain rules configuration for allow and deny policies',
+    fit: false,
   },
   {
     label: 'Logs',
     src: '/logs.png',
     alt: 'GreyProxy connection logs showing all outbound network activity',
+    fit: false,
   },
 ]
 
@@ -91,14 +95,21 @@ export function Observability() {
           onMouseLeave={() => setPaused(false)}
         >
           {/* Screenshot with crossfade */}
-          <div className="relative rounded-lg border border-border/40 overflow-hidden bg-card/30">
+          <div className="relative rounded-lg border border-border/40 overflow-hidden bg-white">
+            {/* Hidden reference image to lock container height */}
+            <img
+              src={slides[0].src}
+              alt=""
+              aria-hidden="true"
+              className="w-full h-auto invisible"
+            />
             {slides.map((slide, i) => (
               <img
                 key={slide.label}
                 src={slide.src}
                 alt={slide.alt}
-                className={`w-full h-auto transition-opacity duration-700 ${
-                  i === active ? 'opacity-100 relative' : 'opacity-0 absolute inset-0'
+                className={`absolute inset-0 w-full h-full object-contain object-top transition-opacity duration-700 ${
+                  i === active ? 'opacity-100' : 'opacity-0'
                 }`}
               />
             ))}