Skip to content

fix(console): keep Go limits chart headers from overflowing in long locales - #55054

Merged
vaprdev merged 1 commit into
devfrom
go-chart-overflow
Oct 13, 2026
Merged

fix(console): keep Go limits chart headers from overflowing in long locales#55054
vaprdev merged 1 commit into
devfrom
go-chart-overflow

Conversation

@vaprdev

@vaprdev vaprdev commented Oct 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Issue for this PR

Closes #

Type of change

  • Bug fix
  • New feature
  • Refactor / code improvement
  • Documentation

What does this PR do?

The Go limits chart used table-layout: fixed with a 14% usage column and nowrap headers. Longer translations ("Miesięczne użycie", "Использование за месяц", Thai, …) spilled past the table edge, clipping the header and adding a horizontal scrollbar.

 desktop table
-  table-layout: fixed            # columns ignore content
-  <col 44%> bars
+  auto layout                    # columns grow to fit their headers
+  <col> bars                     # takes what's left; only the bars shrink
 phone grid (≤ 40rem)
-  minmax(0, 1fr) auto auto       # nowrap headers pushed usage off-screen
+  minmax(min-content, 1fr) auto auto
+  thead th { white-space: normal }   # headers wrap instead

Model column and number columns keep their widths; in long locales the bars get a little shorter. On phones, long-locale headers wrap to 2–3 lines.

How did you verify your code works?

Playwright against vite dev, every locale, checking whether any header is clipped or the chart scrolls sideways:

  • 1440px and 919px: before, 8–9 of 18 locales clipped (de, fr, it, da, pl, ru, uk, th, plus ar at 919); after, 0.
  • 800px: no clipped headers (the table still scrolls by design below its 48rem min-width).
  • 390px: before, ru/de/th scrolled sideways with headers overlapping; after, none.

Screenshots / recordings

Desktop, Polish (919px)

Polish desktop before and after

Phone, Russian and German (390px)

Russian and German phone before and after

Checklist

  • I have tested my changes locally
  • I have not included unrelated changes in this PR

@github-actions github-actions Bot added contributor needs:compliance This means the issue will auto-close after 2 hours. needs:issue labels Oct 13, 2026
@github-actions

github-actions Bot commented Oct 13, 2026

Copy link
Copy Markdown
Contributor

This PR doesn't fully meet our contributing guidelines and PR template.

What needs to be fixed:

  • No issue referenced. Please add Closes #<number> linking to the relevant issue.

Please edit this PR description to address the above within 72 hours, or it will be automatically closed.

If you believe this was flagged incorrectly, please let a maintainer know.

@github-actions

github-actions Bot commented Oct 13, 2026

Copy link
Copy Markdown
Contributor

Thanks for your contribution!

This PR doesn't have a linked issue. All PRs must reference an existing issue.

Please:

  1. Open an issue describing the bug/feature (if one doesn't exist)
  2. Add Fixes #<number> or Closes #<number> to this PR description

See CONTRIBUTING.md for details.

@github-actions

github-actions Bot commented Oct 13, 2026

Copy link
Copy Markdown
Contributor

The following comment was made by an LLM, it may be inaccurate:

opencode-agent[bot]
opencode-agent Bot reviewed Oct 13, 2026
View reviewed changes

@opencode-agent opencode-agent Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. I loaded the chart's table markup with the stylesheet from each branch in Chromium, using the real header translations at 1440, 919 and 390px. On the base branch, the de, fr, pl, ru and th headers are cut off at 919px and 390px, and the chart scrolls sideways at 919px in all of those locales and at 390px in all but pl. With this change, no header is cut off and nothing scrolls sideways at any of those widths. The only cost is shorter bars in long locales (ru at 919px: 383 → 310px). The console app's type check passes.

Public API is unchanged: this only touches CSS and markup in the console.

No concerns.

Before

After

@vaprdev
vaprdev merged commit de65b9f into dev Oct 13, 2026
13 checks passed
@vaprdev
vaprdev deleted the go-chart-overflow branch October 13, 2026 06:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@opencode-agent opencode-agent[bot] opencode-agent[bot] left review comments

Assignees

No one assigned

Labels

contributor needs:compliance This means the issue will auto-close after 2 hours. needs:issue

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@vaprdev