[codex] Polish first-run UI surfaces

AGENTS.md

@@ -61,3 +61,10 @@
   declares TypeScript `^4.9.0 || ^5.0.0`, so keep the TypeScript 6
   `peerDependencyRules.allowedVersions` entry unless the upstream peer range is
   updated.
+- DevTools segmented override buttons should keep their active border as a
+  complete `border` shorthand. Mixing `border` with `borderColor` in the inline
+  style object triggers React development warnings during override rerenders.
+- Demo grids that contain horizontally scrollable flag tables need `min-width:
+  0` on the grid item that owns the table; otherwise mobile layouts can report
+  document-level horizontal overflow even when the table itself is intended to
+  scroll internally.

apps/mf-host/src/App.tsx

@@ -82,11 +82,7 @@ function HostShell() {
   };
 
   return (
-    <>
-      <a className="skip-link" href="#content">
-        Skip to content
-      </a>
-      <main className="mf-shell" id="content">
+    <main className="mf-shell" id="content">
       <header className="mf-header">
         <div className="header-copy">
           <p className="eyebrow">Module federation demo</p>
@@ -189,8 +185,7 @@ function HostShell() {
           <LatchDevTools client={flagClient} title="Host DevTools" />
         </div>
       </section>
-      </main>
-    </>
+    </main>
   );
 }
 

apps/mf-host/src/latchClient.test.ts

@@ -1,3 +1,5 @@
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
 import { beforeEach, describe, expect, it } from "vitest";
 import {
   defaultFlags,
@@ -57,3 +59,19 @@ describe("module federation host flag client", () => {
     });
   });
 });
+
+describe("module federation host shell", () => {
+  it("keeps the skip link owned by the static HTML shell", () => {
+    const indexHtml = readFileSync(
+      fileURLToPath(new URL("../index.html", import.meta.url)),
+      "utf8"
+    );
+    const appSource = readFileSync(
+      fileURLToPath(new URL("./App.tsx", import.meta.url)),
+      "utf8"
+    );
+
+    expect(indexHtml.match(/Skip to content/g) ?? []).toHaveLength(1);
+    expect(appSource).not.toContain("Skip to content");
+  });
+});

apps/mf-host/src/styles.css

@@ -67,7 +67,8 @@ button {
 .mf-shell {
   width: min(1480px, 100%);
   margin: 0 auto;
-  padding: max(24px, env(safe-area-inset-top)) clamp(16px, 4vw, 52px) 52px;
+  padding: max(24px, env(safe-area-inset-top)) clamp(16px, 4vw, 52px)
+    max(52px, env(safe-area-inset-bottom));
 }
 
 .mf-header {
@@ -135,16 +136,22 @@ h2 {
   color: #18231e;
   background: rgba(255, 255, 255, 0.62);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
 }
 
 .button:hover {
   border-color: rgba(31, 53, 42, 0.42);
   background: rgba(255, 255, 255, 0.82);
+  transform: translateY(-1px);
 }
 
 .button:disabled {
   cursor: wait;
   color: #5f6b64;
+  transform: none;
 }
 
 .button.primary {
@@ -203,6 +210,7 @@ h2 {
   border: 1px solid rgba(31, 53, 42, 0.16);
   border-radius: 8px;
   background: rgba(31, 53, 42, 0.16);
+  box-shadow: 0 16px 42px rgba(31, 53, 42, 0.06);
 }
 
 .status-pill {
@@ -266,6 +274,10 @@ h2 {
   overflow: hidden;
 }
 
+.flag-layer-panel {
+  min-width: 0;
+}
+
 .remote-slot-heading {
   display: flex;
   justify-content: space-between;
@@ -279,6 +291,8 @@ h2 {
   color: #64756b;
   font-size: 0.9rem;
   font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+  text-align: right;
 }
 
 .remote-fallback {
@@ -294,7 +308,7 @@ h2 {
 
 .host-workspace {
   display: grid;
-  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
+  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
   gap: 18px;
   align-items: start;
   margin-top: 18px;
@@ -382,6 +396,7 @@ h2 {
 }
 
 .devtools-panel {
+  min-width: 0;
   padding: 14px;
 }
 
@@ -390,7 +405,7 @@ h2 {
   min-height: 340px;
   display: grid;
   gap: 18px;
-  padding: 22px;
+  padding: clamp(18px, 3vw, 24px);
   color: #18231e;
 }
 
@@ -613,6 +628,14 @@ h2 {
     display: grid;
   }
 
+  .remote-slot-heading span {
+    text-align: left;
+  }
+
+  .section-heading p {
+    max-width: none;
+  }
+
   .button {
     width: 100%;
   }

apps/mf-remote-dashboard/src/styles.css

@@ -51,14 +51,15 @@ a {
 .standalone-remote {
   width: min(820px, 100%);
   margin: 0 auto;
-  padding: max(24px, env(safe-area-inset-top)) 16px 40px;
+  padding: max(24px, env(safe-area-inset-top)) 16px
+    max(40px, env(safe-area-inset-bottom));
 }
 
 .dashboard-remote {
   min-height: 340px;
   display: grid;
   gap: 18px;
-  padding: 22px;
+  padding: clamp(18px, 3vw, 24px);
   color: #18231e;
   background:
     linear-gradient(135deg, rgba(218, 235, 222, 0.78), transparent 46%),

apps/mf-remote-settings/src/styles.css

@@ -51,15 +51,16 @@ a {
 .standalone-remote {
   width: min(820px, 100%);
   margin: 0 auto;
-  padding: max(24px, env(safe-area-inset-top)) 16px 40px;
+  padding: max(24px, env(safe-area-inset-top)) 16px
+    max(40px, env(safe-area-inset-bottom));
 }
 
 .settings-remote {
   min-height: 340px;
   display: grid;
   align-content: start;
   gap: 18px;
-  padding: 22px;
+  padding: clamp(18px, 3vw, 24px);
   color: #18231e;
   background:
     linear-gradient(135deg, rgba(226, 234, 210, 0.82), transparent 48%),

apps/playground/src/App.tsx

@@ -72,7 +72,7 @@ function LatchPlayground() {
         </div>
         <div className="actions" aria-label="Remote flag controls">
           <button
-            className="button secondary"
+            className="button secondary danger"
             type="button"
             onClick={failAndSync}
             disabled={flagQuery.isFetching}
@@ -160,6 +160,10 @@ function LatchPlayground() {
           </Feature>
         </div>
 
+        <section className="devtools-section" aria-label="Local flag overrides">
+          <LatchDevTools client={client} title="Playground DevTools" />
+        </section>
+
         <div className="panel payload-panel">
           <div className="panel-heading">
             <h2>Backend envelope</h2>
@@ -176,10 +180,6 @@ function LatchPlayground() {
           <pre>{JSON.stringify(normalizedPreview, null, 2)}</pre>
         </div>
       </section>
-
-      <section className="devtools-section" aria-label="Local flag overrides">
-        <LatchDevTools client={client} title="Playground DevTools" />
-      </section>
     </main>
   );
 }

apps/playground/src/styles.css

@@ -1,6 +1,6 @@
 :root {
   color: #1c2822;
-  background: #f6f7f2;
+  background: #f4f7f1;
   font-family:
     "Avenir Next",
     "Segoe UI",
@@ -17,7 +17,7 @@
 
 html {
   min-width: 320px;
-  background: #f6f7f2;
+  background: #f4f7f1;
 }
 
 body {
@@ -63,7 +63,7 @@ button {
 .app-shell {
   width: min(1480px, 100%);
   margin: 0 auto;
-  padding: max(24px, env(safe-area-inset-top)) clamp(16px, 4vw, 48px)
+  padding: max(24px, env(safe-area-inset-top)) clamp(16px, 4vw, 50px)
     max(32px, env(safe-area-inset-bottom));
 }
 
@@ -157,6 +157,17 @@ h3 {
   border-color: rgba(28, 40, 34, 0.18);
 }
 
+.button.danger {
+  color: #6f2028;
+  border-color: rgba(125, 36, 45, 0.24);
+  background: #fff8f7;
+}
+
+.button.danger:hover {
+  border-color: rgba(125, 36, 45, 0.44);
+  background: #fff2f0;
+}
+
 .spinner {
   width: 16px;
   height: 16px;
@@ -219,7 +230,7 @@ h3 {
 
 .workspace-grid {
   display: grid;
-  grid-template-columns: minmax(280px, 0.88fr) minmax(300px, 1fr) minmax(320px, 1.2fr);
+  grid-template-columns: minmax(280px, 0.88fr) minmax(300px, 1fr) minmax(360px, 1.08fr);
   gap: 14px;
   align-items: start;
 }
@@ -235,13 +246,20 @@ h3 {
 
 .panel-heading {
   display: flex;
-  align-items: baseline;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
   padding: 16px 18px;
   border-bottom: 1px solid rgba(28, 40, 34, 0.12);
 }
 
+.panel-heading .subtle {
+  min-width: 0;
+  max-width: 48%;
+  overflow-wrap: anywhere;
+  text-align: right;
+}
+
 .flag-list {
   display: grid;
 }
@@ -333,15 +351,15 @@ h3 {
 }
 
 .payload-panel {
-  grid-row: span 2;
+  min-width: 0;
 }
 
 .devtools-section {
-  margin-top: 16px;
+  min-width: 0;
 }
 
 pre {
-  max-height: 560px;
+  max-height: 360px;
   margin: 0;
   overflow: auto;
   padding: 18px;
@@ -367,6 +385,10 @@ pre {
   .payload-panel {
     grid-row: auto;
   }
+
+  .devtools-section {
+    grid-column: span 2;
+  }
 }
 
 @media (max-width: 760px) {
@@ -386,6 +408,20 @@ pre {
     grid-template-columns: 1fr;
   }
 
+  .devtools-section {
+    grid-column: auto;
+  }
+
+  .panel-heading {
+    display: grid;
+    gap: 6px;
+  }
+
+  .panel-heading .subtle {
+    max-width: none;
+    text-align: left;
+  }
+
   h1 {
     font-size: 2.5rem;
   }