Skip to content

Tables fit the screen width (#89) - #90

Merged
Oceandek merged 1 commit into
mainfrom
feat/wide-tables
Oct 22, 2026
Merged

Oceandek merged 1 commit into
mainfrom
feat/wide-tables

Conversation

@Oceandek

Copy link
Copy Markdown
Collaborator

Closes #89.

Before

Page content was at most 896 px (max-w-4xl) and Quasar table cells never wrap, so the Users table (Name, Email, GitHub, Role, Programme, Year, Status) scrolled sideways: Year and Status were off-screen on a laptop.

Now

  • theme.CONTENT_WIDTH = "max-w-7xl" (1280 px) for the content column and the footer. Forms keep their own narrow cards (max-w-lg), so only tables and lists get wider.
  • CSS in the page head: .q-table td { white-space: normal; } on every table, and .q-table td.break-anywhere { overflow-wrap: anywhere; } for the Users table's Email and GitHub columns (theme.BREAK_ANYWHERE), so words like "Student" never break mid-word.
  • docs/CHANGELOG.md: R13 (before / asked / changed) and a history row.

Checked

Screenshots in headless Chrome of the real theme.frame with the Users columns and 8 long dummy emails:

  • 1366 px (before): Year and Status cut off.
  • 1366 px (after): all 7 columns fit, one line per row.
  • 800 px (after): fits; only the emails and GitHub names break.

New test test_tables_fit_the_screen.

🤖 Generated with Claude Code

The content column (and footer) grows from 896 to 1280 px, table cells wrap
between words, and the email and GitHub columns may break anywhere, so the
Users table no longer scrolls sideways to show Year and Status.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@Oceandek
Oceandek merged commit 9a52eef into main Oct 22, 2026
2 checks passed
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.

Tables fit the screen width (Users table scrolls sideways)

1 participant