Fix Edit tab top bar growing taller with long translations (BL-16834) - #8334
Merged
Conversation
Contributor
Author
|
[Claude Fable 5.1] Consulted Devin on 2026-09-09 16:13 UTC up to commit adf9396. Devin found no bugs and raised no flags (0 Investigate, 0 Informational). CI (pr-automation) passed. |
…er translations https://issues.bloomlibrary.org/youtrack/issue/BL-16834 The Book and Page Settings button was fixed at 88px wide with a freely wrapping label. In French ("Paramètres du Livre et de la Page") the label wrapped to three lines, and since the 6.5 top bar is a single React flex row whose height is driven by its tallest child, the whole bar grew (84px vs 71px). 6.4 hid the same wrapping behind a fixed-height WinForms-hosted bar. Let the button widen (up to 124px) so long translations fit on two lines, and clamp the label to two lines as a backstop so no translation can change the bar's height. English now wraps as "Book and Page / Settings" in a slightly wider button; bar height is unchanged. Verified over CDP in a running Bloom: bar is 71px in both English and French. pnpm typecheck, eslint, and the full vitest suite pass. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
andrew-polk
force-pushed
the
BL-16834
branch
from
September 9, 2026 17:41
adf9396 to
5fc3c68
Compare
andrew-polk
marked this pull request as ready for review
September 9, 2026 17:41
StephenMcConnel
approved these changes
Sep 9, 2026
StephenMcConnel
left a comment
StephenMcConnel
left a comment
Contributor
There was a problem hiding this comment.
@StephenMcConnel reviewed 1 file and all commit messages.
Reviewable status:complete! all files reviewed, all discussions resolved (waiting on andrew-polk).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem. With the UI language set to French, the Edit tab's top bar is noticeably taller than in English (a 6.5 regression; 6.4 did not show it). The "Book and Page Settings" button's French label, "Paramètres du Livre et de la Page", wraps onto three lines and pushes the whole bar down.
Cause. The button was fixed at 88px wide with a freely wrapping label. In 6.5 the top bar is a single React flex row whose height follows its tallest child, so a three-line label grows the bar. In 6.4 the same wrapping happened, but the bar lived in a fixed-height WinForms-hosted browser that simply hid it.
What the PR does. A CSS-only change to the Book and Page Settings button:
Ref: https://issues.bloomlibrary.org/youtrack/issue/BL-16834
🤖 Generated with Claude Code
Devin review
This change is