You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
pepelsbey opened this issue
Nov 7, 2023
· 2 comments
· May be fixed by #9974
Labels
blog🐛 bugSomething isn't working, or isn't working as expectedeffort: smallThis task is a small effort.has PRIssues that already have a PRidlelayoutIssues related to alignment, positioning and spacing/margin/paddingp2We want to address this but may have other higher priority items.
Tables in the MDN blog cause scrolling or get clipped in viewports between 426px and 895px (single-column layout) and between 992px and 1136px (two-column layout). As the mobile layout shows, it’s not caused by the table content, but mostly by the way it adapts to a viewport.
caugner
added
🐛 bug
Something isn't working, or isn't working as expected
p2
We want to address this but may have other higher priority items.
effort: small
This task is a small effort.
and removed
needs triage
Triage needed by staff and/or partners. Automatically applied when an issue is opened.
labels
Nov 8, 2023
It looks like the bug is caused by BCD tables being wrapped in figure.table-container > figure.table-container-inner and other tables are not wrapped in the figure.table-container-inner:
I don't know why we set a negative horizontal margin on the outer container and a padding on the inner container, but the fact that the inner container is missing on that blog table causes it to overflow by 1.5rem on each side.
I have a (related) issue with tables I came across while working on Vultr's post on MDN Blog.
As a quick fix for now, I've replaced the tables with screenshots (not an ideal solution) so that the article remains responsive on mobile devices. Replacing pre-formatted tables (as the one below) with HTML or markdown equivalents was not helping.
Here's one of the tables that was causing the article to be unresponsive:
blog🐛 bugSomething isn't working, or isn't working as expectedeffort: smallThis task is a small effort.has PRIssues that already have a PRidlelayoutIssues related to alignment, positioning and spacing/margin/paddingp2We want to address this but may have other higher priority items.
Summary
Tables in the MDN blog cause scrolling or get clipped in viewports between 426px and 895px (single-column layout) and between 992px and 1136px (two-column layout). As the mobile layout shows, it’s not caused by the table content, but mostly by the way it adapts to a viewport.
URL
https://developer.mozilla.org/en-US/blog/vs-code-tips-tricks/
Reproduction steps
Expected behavior
No content clipping or horizontal scrollbar.
Actual behavior
Content clipping and horizontal scrollbar.
Device
Desktop
Browser
Firefox
Browser version
Stable
Operating system
Mac OS
Screenshot
table.mp4
Anything else?
It might be partially caused by the following code in the index-desktop.scss:
width: 100vw
doesn’t take into account vertical scrollbars (when they’re permanent, not floating), it’s the viewport width.Validations
The text was updated successfully, but these errors were encountered: