Add responsive layout enhancements for improved multi-device experience

README.md

@@ -8,7 +8,11 @@ The interface does not execute contracts in the browser. Generated commands run
 
 - **Design System & Theme Tokens**: Comprehensive CSS custom property scale (`:root`) standardizing color schemes (canvas, surfaces, accent, text hierarchy, borders) and spacing increments.
 - **Module Filter & Empty State**: Search and filter testing modules by name or description with real-time feedback and an accessible empty-state layout with quick filter reset.
-- **Responsive & Reduced-Width Navigation**: Accessible navigation layout supporting truncated and responsive labels without overflowing viewport on mobile or narrow screens.
+- **Responsive Layout Enhancements**:
+  - **Large-text Hero Layout**: Enhanced typography scaling at 1200px+ viewports for improved readability on large displays.
+  - **Improved Navigation**: Prevents link wrapping on small screens with optimized spacing and flexible layouts.
+  - **Tablet Two-Column Grid**: Compact two-column module layout for tablet widths (601px-900px) for better space utilization.
+  - **Landscape Phone Optimization**: Condensed command form layout for landscape phone orientations (541px-900px width, max 600px height).
 - **Required vs. Optional Setting Distinction**: Visual badges (`Required` / `Optional`) and `aria-required` attributes in the CLI workbench distinguishing mandatory parameters from optional configuration flags.
 
 ## Development

src/styles.css

@@ -262,13 +262,33 @@ input:focus, select:focus { border-color: var(--color-accent); }
 footer { display: flex; justify-content: space-between; padding: 34px var(--page-padding); border-top: 1px solid var(--color-border-subtle); color: var(--color-text-muted); font-size: .78rem; }
 
 /* Responsive adjustments */
+
+/* Issue #184: Large-text layout check for hero section */
+@media (min-width: 1200px) {
+  .hero h1 { font-size: 6rem; line-height: .98; }
+  .hero .lede { font-size: 1.2rem; line-height: 1.8; }
+}
+
+/* Issue #182: Compact two-column module layout for tablet widths */
+@media (min-width: 601px) and (max-width: 900px) {
+  .module-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
 @media (max-width: 900px) {
   .hero, .commands { grid-template-columns: 1fr; }
   .hero { padding-top: 70px; }
-  .module-grid { grid-template-columns: repeat(2, 1fr); }
-  .nav-links a { max-width: 140px; }
 }
 
+/* Issue #183: Landscape phone layout for command form */
+@media (min-width: 541px) and (max-width: 900px) and (max-height: 600px) {
+  .commands { padding: 60px var(--page-padding); }
+  .builder { padding: var(--space-3xl); }
+  label { margin-bottom: var(--space-lg); gap: var(--space-xs); }
+  .command-tabs { margin-top: var(--space-3xl); }
+  .description { min-height: 36px; font-size: .9rem; }
+}
+
+/* Issue #180: Prevent navigation links from wrapping awkwardly on small screens */
 @media (max-width: 600px) {
   nav {
     height: auto;
@@ -278,11 +298,15 @@ footer { display: flex; justify-content: space-between; padding: 34px var(--page
     gap: var(--space-md);
   }
   .nav-links {
-    gap: var(--space-md);
+    width: 100%;
+    justify-content: flex-start;
+    gap: clamp(var(--space-lg), 4vw, var(--space-3xl));
     font-size: .85rem;
-    flex-wrap: wrap;
   }
-  .nav-links a { max-width: 120px; }
+  .nav-links a {
+    flex: 0 1 auto;
+    white-space: nowrap;
+  }
 }
 
 @media (max-width: 540px) {

tests/visual/landing.spec.ts

@@ -33,3 +33,41 @@ test.describe("landing page visual regression", () => {
     });
   });
 });
+
+test.describe("responsive layout enhancements", () => {
+  test("large-text hero layout renders correctly at 1200px+ (#184)", async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1400, height: 900 });
+    await page.goto("/");
+    const hero = page.locator("#top");
+    await expect(hero).toHaveScreenshot("hero-large-text.png");
+  });
+
+  test("navigation links do not wrap awkwardly on small screens (#180)", async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 480, height: 800 });
+    await page.goto("/");
+    const nav = page.locator("nav");
+    await expect(nav).toHaveScreenshot("nav-small-screen.png");
+  });
+
+  test("two-column module layout displays correctly on tablet (#182)", async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 768, height: 1024 });
+    await page.goto("/");
+    const modules = page.locator("#modules");
+    await expect(modules).toHaveScreenshot("modules-tablet.png");
+  });
+
+  test("landscape phone command form layout is optimized (#183)", async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 800, height: 480 });
+    await page.goto("/");
+    const commands = page.locator("#commands");
+    await expect(commands).toHaveScreenshot("commands-landscape-phone.png");
+  });
+});