lumbridge-public/tera
Archived
1
0
Fork 0
Code Activity

fix(ui): give the rail its own short labels instead of the sheet's sentences

Browse Source 
The corner rail rendered `Shortcut.meaning`, which is written for the `?` sheet
where a full sentence is exactly right because somebody is reading a reference.
The rail is a glance over a moving 3D board with room for one line, and it is a
`flex-wrap` container: the sentence wrapped, and the wrapped line drew straight
through the chip beneath it. On the deployed build "Fly to a chapter of the tour,
or to a viewpoint inside a studio" and "Walk into the studio, or step back out to
the city" overlapped and neither could be read, over a bright sky with no
background to hide it. Nothing errored — it just looked broken, on every screen.

Two labels for two jobs. `Shortcut.rail` carries the two-or-three-word form for
the nine ids `railHints` can select; `meaning` keeps the sentence for the sheet.

`.hint` also had no `line-height`, so it inherited the body's and a wrapped chip
had nowhere to go, and no `max-width`, so the rail grew leftward until it met the
mode pill. Chips are now `white-space: nowrap`: wrapping belongs between chips,
which the flex container already does, not inside one.

Tested, because this is a defect a test can hold: every id the rail can return
must have a `rail` label, it must fit on a line, and it must not contain a
clause.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kartios
2026-08-21 19:56:55 -07:00
parent 75908774f7
commit 655848746d
4 changed files with 101 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+16 -1
View File
@@ -696,11 +696,26 @@
align-items: center;
gap: var(--s1) var(--s3);
font-size: 10px;
/* Was unset, so it inherited the body's and a wrapped chip drew its
second line straight through the chip beneath it. The rail sits over a
moving scene and cannot rely on a background to hide the collision. */
line-height: 1.5;
letter-spacing: 0.04em;
/* The rail is a corner, not a column. Without a ceiling it grew to meet
the mode pill in the middle of the screen. */
max-width: min(30rem, 42vw);
color: var(--ink-2);
text-shadow: 0 1px 3px rgba(3, 6, 10, 0.8);
}
.hint__chip { display: inline-flex; align-items: center; gap: 5px; }
/* One chip is one line. Wrapping happens *between* chips, which the flex
container already does; a chip that wraps inside itself is the thing
that made this unreadable. */
.hint__chip {
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.hint__label { color: var(--ink-3); }
kbd {
font: inherit;