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

MDN layout issue: tables too wide when viewport is 769px and 1200px #10346

Closed
estelle opened this issue Jan 18, 2024 · 6 comments · May be fixed by #10352
Closed

MDN layout issue: tables too wide when viewport is 769px and 1200px #10346

estelle opened this issue Jan 18, 2024 · 6 comments · May be fixed by #10352
Labels
infra needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened.

Comments

@estelle
Copy link
Member

estelle commented Jan 18, 2024 •
edited

In the CSS, there is the line:

@media screen and (min-width: 769px) {
  .table-container {
    width: calc(100% + 6rem);
  }
}

with the table being 100% of the container, the table is 6em wider than the paragraphs above and below. The alignment looks off on the left, but it looks actually cut off on the right.

partial screen grab of a page with this issue attached:

Screenshot: table juts to the left of the text by 3em on the left and looks like it is cut off on the right

Example taken from: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
@github-actions github-actions bot added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Jan 18, 2024
@estelle
Copy link
Member Author

estelle commented Jan 18, 2024

This is resolved at 1200 px:

@media screen and (min-width: 1200px) {
  .table-container {
    margin: 0;
    margin-bottom: 0px;
    width: 100%;
  }

note the margin bottom can be removed as it is part of the margin shorthand.

@estelle estelle changed the title Tables are too wide for the page layout at 769px to 800 or so. Tables are too wide for the page layout when page is between 769px and 1200px wide Jan 18, 2024
@estelle estelle added the infra label Jan 18, 2024
@estelle estelle changed the title Tables are too wide for the page layout when page is between 769px and 1200px wide MDN layout issue: tables too wide when viewport is 769px and 1200px Jan 18, 2024
@wbamberg
Copy link
Collaborator

Should we file this on/transfer it to Yari?

@ShubhamOulkar
Copy link

ShubhamOulkar commented Jan 19, 2024 •
edited

@wbamberg, Can I do this? I want to know Yari.

I found where to fix it. (client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss)

I just need Yari set-up.

@wbamberg wbamberg transferred this issue from mdn/content Jan 19, 2024
@wbamberg
Copy link
Collaborator

@ShubhamOulkar , I'm not a Yari maintainer, you'll have to ask them.

@ShubhamOulkar ShubhamOulkar mentioned this issue Jan 20, 2024
Draft
@caugner
Copy link
Contributor

caugner commented Jan 25, 2024

FWIW The tricky part is that regular tables are only wrapped in .table-container, but the BCD tables are additionally wrapped in .table-container-inner, see also this comment.

@caugner
Copy link
Contributor

caugner commented Jan 25, 2024

This is actually a duplicate of #9962.

@caugner caugner closed this as not planned Won't fix, can't repro, duplicate, stale Jan 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
infra needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(layout): resolve desktop table layout issue ShubhamOulkar/mdn-yari
4 participants
@estelle @wbamberg @caugner @ShubhamOulkar