Public: anyone can read this; the crew can change it.
The header clips its last control on a phone: the nav row does not wrap #47
Check · Review · Land · Live done — Landed and live in production.
hearth/quorum:hearth/40-the-header-clips-its-last-control-on-a-p → main 1 commit fork
2 files
changed +19
−2
src/pages/layout.ts +2 −2
| @@ -28,11 +28,11 @@ export function layout(body: string, who: Who, path = "/"): string { | ||
| 28 | 28 | <body> |
| 29 | 29 | <div class="page"> |
| 30 | 30 | <header class="head"> |
| 31 | <div> | |
| 31 | <div class="brand"> | |
| 32 | 32 | <h1><a class="plain" href="/">${escape(title)}</a></h1> |
| 33 | 33 | <p class="muted">${escape(description)}</p> |
| 34 | 34 | </div> |
| 35 | <nav class="row"> | |
| 35 | <nav class="row wrap"> | |
| 36 | 36 | <span class="pill" data-env="${escape(env)}">${escape(where)}</span>${commit ? `<span class="muted mono">${escape(commit)}</span>` : ""} |
| 37 | 37 | ${door} |
| 38 | 38 | </nav> |
static/app.css +17
| @@ -69,6 +69,9 @@ body { | ||
| 69 | 69 | margin: 0 auto; |
| 70 | 70 | padding: var() var() var(); |
| 71 | 71 | } |
| 72 | /* The title and the nav sit side by side where there is room. The title asks | |
| 73 | for 12rem, so on a phone the pair wraps and the nav gets the whole line to | |
| 74 | wrap within (`.row.wrap`) rather than running past the edge. */ | |
| 72 | 75 | .head { |
| 73 | 76 | display: flex; |
| 74 | 77 | flex-wrap: wrap; |
| @@ -77,6 +80,10 @@ body { | ||
| 77 | 80 | gap: var() var(); |
| 78 | 81 | margin-bottom: var(); |
| 79 | 82 | } |
| 83 | .brand { | |
| 84 | flex: 1 1 12rem; | |
| 85 | overflow-wrap: anywhere; | |
| 86 | } | |
| 80 | 87 | h1 { |
| 81 | 88 | margin: 0; |
| 82 | 89 | font-size: var(); |
| @@ -108,6 +115,16 @@ code, | ||
| 108 | 115 | color: var(); |
| 109 | 116 | white-space: nowrap; |
| 110 | 117 | } |
| 118 | /* A name is one unbreakable run, so it gets a ceiling of its own: a long one | |
| 119 | ends in an ellipsis instead of pushing the sign-out button off the line. | |
| 120 | The role after it stays readable. */ | |
| 121 | .you b { | |
| 122 | display: inline-block; | |
| 123 | max-width: 8rem; | |
| 124 | overflow: hidden; | |
| 125 | text-overflow: ellipsis; | |
| 126 | vertical-align: bottom; | |
| 127 | } | |
| 111 | 128 | |
| 112 | 129 | /* Blocks. */ |
| 113 | 130 | .card { |