fix(web): keep the step icon its own size in the job rail
The wrap rule gave every non-duration span flex: 1, including the .ck icon span, which grew into a wide ellipse. Size the icon explicitly and exclude it.
- commit
- 30eee80f60a6abcbc66482f96951886664f1c9c1
- author
- brice · · 2026-10-17 18:27 UTC
- parent
- 0cea275
- signature
- GPG Verified
CD88F9E564E0102646FB6077A1A07C7C7C3E349D· arch-gpg Verified for the committer email
1 file · +2 -2
M internal/adapters/web/static/css/65-ci.css +2 -2
| @@ -53,9 +53,9 @@ | |||
| 53 | 53 | /* a long step name (a whole shell command) wraps inside the rail; the icon | |
| 54 | 54 | stays on its first line and the duration at the right */ | |
| 55 | 55 | .steps li { display: flex; align-items: flex-start; gap: var(--s1); min-width: 0; } | |
| 56 | - | .steps li > :is(a, span:not(.dim)) { flex: 1; min-width: 0; overflow-wrap: anywhere; } | |
| 56 | + | .steps li > .ck { flex: none; margin-top: 3px; } | |
| 57 | + | .steps li > :is(a, span:not(.ck, .dim)) { flex: 1; min-width: 0; overflow-wrap: anywhere; } | |
| 57 | 58 | .steps li > .dim { flex: none; margin-left: auto; } | |
| 58 | - | .steps li > :first-child { margin-top: 3px; flex: none; } | |
| 59 | 59 | .attempts { padding: 0; margin: var(--s2) 0 0; list-style: none; font-size: var(--fs-s); } | |
| 60 | 60 | .checks { display: grid; gap: var(--s1); padding: 0; margin: 0; list-style: none; font-size: var(--fs-s); } | |
| 61 | 61 | .checks li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); } | |
| @@ -53,9 +53,9 @@ | |||||
| 53 | /* a long step name (a whole shell command) wraps inside the rail; the icon | 53 | /* a long step name (a whole shell command) wraps inside the rail; the icon | ||
| 54 | stays on its first line and the duration at the right */ | 54 | stays on its first line and the duration at the right */ | ||
| 55 | .steps li { display: flex; align-items: flex-start; gap: var(--s1); min-width: 0; } | 55 | .steps li { display: flex; align-items: flex-start; gap: var(--s1); min-width: 0; } | ||
| 56 | - | .steps li > :is(a, span:not(.dim)) { flex: 1; min-width: 0; overflow-wrap: anywhere; } | 56 | + | .steps li > .ck { flex: none; margin-top: 3px; } |
| 57 | + | .steps li > :is(a, span:not(.ck, .dim)) { flex: 1; min-width: 0; overflow-wrap: anywhere; } | |||
| 57 | .steps li > .dim { flex: none; margin-left: auto; } | 58 | .steps li > .dim { flex: none; margin-left: auto; } | ||
| 58 | - | .steps li > :first-child { margin-top: 3px; flex: none; } | |||
| 59 | .attempts { padding: 0; margin: var(--s2) 0 0; list-style: none; font-size: var(--fs-s); } | 59 | .attempts { padding: 0; margin: var(--s2) 0 0; list-style: none; font-size: var(--fs-s); } | ||
| 60 | .checks { display: grid; gap: var(--s1); padding: 0; margin: 0; list-style: none; font-size: var(--fs-s); } | 60 | .checks { display: grid; gap: var(--s1); padding: 0; margin: 0; list-style: none; font-size: var(--fs-s); } | ||
| 61 | .checks li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); } | 61 | .checks li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); } | ||