diff --git a/README.md b/README.md index dcdea19..6b9b99e 100644 --- a/README.md +++ b/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 diff --git a/src/styles.css b/src/styles.css index 258df30..55260f6 100644 --- a/src/styles.css +++ b/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) { diff --git a/tests/visual/__screenshots__/commands-audit.png b/tests/visual/__screenshots__/commands-audit.png index d04a558..ac6560e 100644 Binary files a/tests/visual/__screenshots__/commands-audit.png and b/tests/visual/__screenshots__/commands-audit.png differ diff --git a/tests/visual/__screenshots__/commands-coverage.png b/tests/visual/__screenshots__/commands-coverage.png index 8efa941..79c708b 100644 Binary files a/tests/visual/__screenshots__/commands-coverage.png and b/tests/visual/__screenshots__/commands-coverage.png differ diff --git a/tests/visual/__screenshots__/commands-landscape-phone.png b/tests/visual/__screenshots__/commands-landscape-phone.png new file mode 100644 index 0000000..ff5243e Binary files /dev/null and b/tests/visual/__screenshots__/commands-landscape-phone.png differ diff --git a/tests/visual/__screenshots__/commands-limits.png b/tests/visual/__screenshots__/commands-limits.png index 7e5162e..6631b76 100644 Binary files a/tests/visual/__screenshots__/commands-limits.png and b/tests/visual/__screenshots__/commands-limits.png differ diff --git a/tests/visual/__screenshots__/full-page.png b/tests/visual/__screenshots__/full-page.png index 6ec1d5d..7fe394a 100644 Binary files a/tests/visual/__screenshots__/full-page.png and b/tests/visual/__screenshots__/full-page.png differ diff --git a/tests/visual/__screenshots__/hero-large-text.png b/tests/visual/__screenshots__/hero-large-text.png new file mode 100644 index 0000000..b3f8b1e Binary files /dev/null and b/tests/visual/__screenshots__/hero-large-text.png differ diff --git a/tests/visual/__screenshots__/hero.png b/tests/visual/__screenshots__/hero.png index c86ed82..aeeffef 100644 Binary files a/tests/visual/__screenshots__/hero.png and b/tests/visual/__screenshots__/hero.png differ diff --git a/tests/visual/__screenshots__/modules-tablet.png b/tests/visual/__screenshots__/modules-tablet.png new file mode 100644 index 0000000..82382f4 Binary files /dev/null and b/tests/visual/__screenshots__/modules-tablet.png differ diff --git a/tests/visual/__screenshots__/modules.png b/tests/visual/__screenshots__/modules.png index cf26324..ae808dd 100644 Binary files a/tests/visual/__screenshots__/modules.png and b/tests/visual/__screenshots__/modules.png differ diff --git a/tests/visual/__screenshots__/nav-small-screen.png b/tests/visual/__screenshots__/nav-small-screen.png new file mode 100644 index 0000000..2d31b3c Binary files /dev/null and b/tests/visual/__screenshots__/nav-small-screen.png differ diff --git a/tests/visual/landing.spec.ts b/tests/visual/landing.spec.ts index e186581..9b33456 100644 --- a/tests/visual/landing.spec.ts +++ b/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"); + }); +});