Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug - Table header columns not rendering responsively #2466

Closed
matthewjmcgowan opened this issue Jan 20, 2025 · 2 comments · Fixed by #2467
Closed

Bug - Table header columns not rendering responsively #2466

matthewjmcgowan opened this issue Jan 20, 2025 · 2 comments · Fixed by #2467

Comments

@matthewjmcgowan
Copy link

matthewjmcgowan commented Jan 20, 2025 •
edited
Loading

Required information

Describe the bug
A recent update to GCweb theme is causing table columns to appear janky. Specifically, it is causing column headers to be narrower than they should, which then pushes the text in the header up vertically. It's possible to use colgroup or to hard-code the column widths, but we suspect the CSS file in GCweb v16.1.0 to be over-writing that in some cases.

This is occurring in all tables across the entire Fisheries and Oceans Canada and Canadian Coast Guard websites. And, since we are linking dynamically to the latest GCweb dist, I'm sure is also the case for any other website running this latest build.

To Reproduce
View these pages to see tables coded on DFO webpages in a variety to ways. The layout issues apply to all of these tables:

View these pages to see tables on DFO webpages that have hard-coded column sizing. This generally forces the browser to render the tables as-instructed and without issue, but undermines the whole responsive-layout part of the framework:

Expected behaviour

  1. Table columns should be responsively spaced to legibly, logically, and readably display a table column's header text, without in-word line breaks, and without having to rely on custom sizing classes.

Who shall do the work?
I am asking for Principal publisher to please do the work

Additional information (optional)

Version of WET-BOEW/GCWeb you are using
We are linking to the Canada.ca (GCWeb) v16.1.0 distribution. However, we have noticed that table column layout issues began to appear in v16.0.0. We are testing v15.8.0 locally on our DEV servers, and that appears to solve the table column layout issue.

Desktop/Smartphone (please complete the following information)
All browsers; mobile and desktop.

Screenshots
If applicable, add screenshots to help explain the bug.

Image

Additional context
Please feel free to reach out to our team via email for any questions, comments, or concerns you might have with this bug fix request: [email protected]
@EricDunsworth
Copy link
Member

I'm unable to access DFO's site atm, but this issue is likely being caused by a CSS selector that was recently introduced via #2450 (main * {word-break: break-word;}).

@matthewjmcgowan
Copy link
Author

Hi @EricDunsworth

Unfortunately we suffered a server outage yesterday at one of our regional facilities, so the website was unavailable for a few hours. Service has been restored, and the links above are now active for you to review.

Hopefully it all comes down to the CSS selector you mentioned, which should be a fairly easy/quick fix. Let us know if there is anything we can do to assist.

EricDunsworth added a commit to EricDunsworth/GCWeb that referenced this issue Jan 23, 2025
@EricDunsworth
Theme: Set word-break to initial for table children
8d217d1 
wet-boew#2450 added a CSS selector that set the word-break property to break-word anywhere within the main element.

But it had unexpected side effects in certain kinds of two-dimensional content, such as tables. Specifically, it could cause wide tables (even ones situated within table-responsive containers) to divide their columns improperly - resulting in individual numbers in number groupings "splitting" across lines, columns that are too narrow to fit short words on the same line, non-breaking spaces getting ignored, etc...

This resolves it by adding overrides to reset the word-break properties of any table child elements to initial.

Fixes wet-boew#2466.
@EricDunsworth EricDunsworth mentioned this issue Jan 23, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Theme: Break words in paragraphs and headings only EricDunsworth/GCWeb
2 participants
@EricDunsworth @matthewjmcgowan