ilia/sdetProfile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dangling separator in hero subtitle on narrow Safari viewports

Browse Source 
The " · " before test.describe() was orphaned when .mono became
display:block on mobile.  Wrap it in .hero__sub-sep and hide it at
≤900px.  Also tighten topbar padding at ≤480px for iPhone-mini widths.
Add a responsive test asserting the separator is hidden on mobile.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Builder 2026-05-12 16:45:28 -04:00
parent 7a175a97e8
commit c7fa2e0f98
3 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/app.css
View File

@ -846,6 +846,9 @@ body {
.hero__title { font-size: 32px; }
.hero__sub { font-size: 12px; word-break: break-word; white-space: normal; }
.hero__sub .mono { display: block; margin-top: 4px; }
/* When .mono drops to its own line, the inline " · " in front of it would
dangle as an orphan after "Canadian citizen". Hide it on mobile. */
.hero__sub .hero__sub-sep { display: none; }
.hero__hint { font-size: 12.5px; white-space: normal; word-break: break-word; }
.hero--slim { padding: 14px 18px 10px; }
.hero--slim .hero__title { font-size: 20px; }
@ -910,6 +913,15 @@ body {
.hero__hint { font-size: 11px; }
.hero--slim .hero__title { font-size: 18px; }
/* Tighten the topbar so 5 ghost buttons + brand fit on iPhone-mini widths
without horizontal overflow. We keep all controls reachable; just trim
their padding and shrink the brand wordmark. */
.topbar { gap: 4px; padding: 0 6px; }
.topbar__right { gap: 2px; }
.btn { padding: 0 6px; }
.btn--run { padding: 0 9px; }
.brand__name { font-size: 11.5px; }
.trace-row, .trace-axis { grid-template-columns: 80px 1fr 44px; font-size: 10px; }
.trace-head__meta { display: none; }

6
index.html
View File

@ -9,8 +9,8 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/base.css?v=7" />
<link rel="stylesheet" href="css/app.css?v=7" />
<link rel="stylesheet" href="css/base.css?v=8" />
<link rel="stylesheet" href="css/app.css?v=8" />
</head>
<body>
<!-- ============== TOP BAR ============== -->
@ -134,7 +134,7 @@
<div class="hero">
<div class="hero__tag">describe</div>
<h1 class="hero__title">Ilia Dobkin</h1>
<p class="hero__sub">Senior SDET · Remote (ET) · Canadian citizen · <span class="mono">test.describe("portfolio")</span></p>
<p class="hero__sub">Senior SDET · Remote (ET) · Canadian citizen<span class="hero__sub-sep"> · </span><span class="mono">test.describe("portfolio")</span></p>
<p class="hero__hint">Click the green <span class="kbd">▶</span> next to any test to run it — or press <span class="kbd">Run all</span> above.</p>
</div>
<!-- Tiny run-history banner above the results list. Pulls the eye to

9
tests/portfolio.spec.ts
View File

@ -419,6 +419,15 @@ test.describe("responsive", () => {
await page.click("#menu-btn");
await expect(page.locator("#sidebar")).toHaveClass(/is-open/);
});
test("hero subtitle separator is hidden on mobile", async ({ page }) => {
await page.goto("/");
const sep = page.locator(".hero__sub-sep");
await expect(sep).toBeHidden();
const sub = page.locator(".hero__sub");
await expect(sub).toContainText("Canadian citizen");
await expect(sub).toContainText("test.describe");
});
});
// ---------------------------------------------------------------------------