From cd094f01731a9ed024615167f1d54e2fcac8b05f Mon Sep 17 00:00:00 2001
From: Martin Dvorak <dvorak@dvorakmortonxd.dev>
Date: Wed, 30 Sep 2026 12:26:46 +0000
Subject: [PATCH] web theme: make the Revival/RustyWolf feature panels
 symmetric (equal-height split + shared 16:10 shot frame)

---
 agents.md                        |  5 ++++-
 src/app/components/WebLayout.tsx |  8 +-------
 src/app/web.css                  | 13 ++++++++++++-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/agents.md b/agents.md
index 1cd247b..57b9673 100644
--- a/agents.md
+++ b/agents.md
@@ -130,7 +130,10 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
   a `.web-quick` 2-up ("Right now" + "Gym PRs"), then services, activity,
   projects, hardware, features (Revival/RustyWolf) and friends. Projects/hardware
   use a CSS multi-column **masonry** gallery (`.project-grid`) so short cards
-  don't leave half-empty grid slots. The old stacked TUI panel layout and the
+  don't leave half-empty grid slots. The two feature panels (`.web-split`) stretch
+  to equal height and share a fixed `16 / 10` `.web-shot` frame with
+  `object-fit: cover` (+ `object-position: center top`), so source images with
+  different aspect ratios still line up. The old stacked TUI panel layout and the
   `SlBackground` ASCII train were removed with it.
 - **Not a terminal.** The web theme deliberately has no TUI chrome: the hero is
   a name + blurb (no `$ whoami` prompt, no blinking cursor), section eyebrows are
diff --git a/src/app/components/WebLayout.tsx b/src/app/components/WebLayout.tsx
index 3ce087b..8e0997b 100644
--- a/src/app/components/WebLayout.tsx
+++ b/src/app/components/WebLayout.tsx
@@ -152,13 +152,7 @@ function FeatureShot({
 }) {
   return (
     <div className="web-shot">
-      <Image
-        src={src}
-        alt={alt}
-        width={width}
-        height={height}
-        style={{ width: "100%", height: "auto", display: "block" }}
-      />
+      <Image src={src} alt={alt} width={width} height={height} />
     </div>
   );
 }
diff --git a/src/app/web.css b/src/app/web.css
index 820ce21..b044be4 100644
--- a/src/app/web.css
+++ b/src/app/web.css
@@ -448,20 +448,31 @@ html[data-theme="web"] body {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
   gap: 26px;
-  align-items: start;
+  align-items: stretch;
 }
 .web-feature {
   display: flex;
   flex-direction: column;
 }
 .web-shot {
+  /* One fixed frame for every feature shot, regardless of the source image's
+     aspect ratio, so the two feature panels line up. */
+  aspect-ratio: 16 / 10;
   border-radius: 16px;
   overflow: hidden;
   border: 1px solid var(--glass-border);
   margin-bottom: 14px;
   box-shadow: 0 18px 36px -22px rgba(23, 32, 60, 0.5);
 }
+.web-shot img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center top;
+}
 .web-feature-text {
+  flex: 1;
   font-size: 0.9rem;
   color: var(--web-muted);
 }