Skip to content

fix(schedule): wrap long words in the schedule legend - #1728

Open
LoranRendel wants to merge 1 commit into
LibreBooking:developfrom
LoranRendel:fix/legend-long-word-overflow
Open

LoranRendel wants to merge 1 commit into
LibreBooking:developfrom
LoranRendel:fix/legend-long-word-overflow

Conversation

@LoranRendel

Copy link
Copy Markdown

The problem

The legend under the schedule on /Web/schedule.php (and /Web/view-schedule.php) is a row of fixed-width boxes:

div.legend {
  width: 110px;
  ...
}

There is no wrapping rule, so a single word wider than 110px cannot break. It overflows the box and runs straight across its neighbours:

Legend labels overflowing their boxes

That is a Russian ru_ru schedule at default settings. Reading left to right: «Резервирование», «Незарезервированные» and «Зарезервированные» all spill out of their boxes and collide, while «Моё бронирование» — the only label containing a space — wraps correctly onto two lines and looks fine.

Why it has gone unnoticed

The English labels are short enough to fit: Open, Blocked, Reserved. The bug only appears once a translation has a single token longer than the box, and Russian hits it immediately at 19 characters. Any label with a space in it wraps on its own, which is why only some boxes break and the row looks half-broken rather than obviously wrong.

The fix

Two declarations on the existing rule:

hyphens: auto;
word-break: break-word;

hyphens: auto lets the browser hyphenate properly — the lang attribute it needs is already set on <html>, so no markup change is required. word-break: break-word catches whatever the hyphenation dictionary cannot split.

Nothing else changes: English and every other language whose labels already fit render exactly as before, since neither property does anything to text that is not overflowing.

Running in production on a Russian-language 5.3.0 install.

div.legend is a fixed 110px box and sets no wrapping rule, so a
single word wider than the box cannot break. It overflows and runs
across the neighbouring legend items.

English never shows this, because its legend labels are short:
"Open", "Blocked", "Reserved". Russian hits it immediately with
"Незарезервированные" at 19 characters. Labels containing a space
wrap on their own, which is why only some of the boxes break.

hyphens: auto lets the browser hyphenate using the lang attribute
already present on <html>, and word-break: break-word catches the
words it cannot hyphenate.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant