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.

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

[website] Fix horizontal scrolling on pages with tables #189

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

DmitrySharabin
Copy link
Member

@DmitrySharabin DmitrySharabin commented Dec 18, 2024

Changes

  • Use different layouts for tables with examples on smaller screens
  • Make big tables scrollable and add scrolling hints for better UX

To see it in action, follow this link: https://deploy-preview-189--color-elements.netlify.app/src/color-swatch/

Remaining issues

On tiny screens, there still might be overflows, causing horizontal scrolling. Like so:
image

I can think of one fix for this (and already tried it): add overflow-x: auto to the slot named demo of the html-demo element. To do so, we should probably make it a part (and toolbar and code as well). This change is already a part of the element's roadmap, so it's a planned improvement.

Adding overflow-x: auto, though, might cause an issue with the details popup:
image

I wonder if we should move the logic we use in <color-chart> to overcome this limitation with overflow to the <color-swatch> element itself and handle it there? In that case, the issue will be fixed in <color-swatch> and <color-chart>.

Copy link

netlify bot commented Dec 18, 2024

Deploy Preview for color-elements ready!

Name Link
🔨 Latest commit 291b093
🔍 Latest deploy log https://app.netlify.com/sites/color-elements/deploys/6762e7df3ccd5e0008b241b5
😎 Deploy Preview https://deploy-preview-189--color-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@LeaVerou
Copy link
Member

This ...doesn't seem like the right solution. Ideally, these should not be rendered side by side if there's not enough space to render them side by side…

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.

2 participants