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
co-authored by Cursor
parent 7a175a97e8
commit c7fa2e0f98
3 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+12
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; }