8000 [BUG] Colour swatches in colours docs overlap each other on small screen · Issue #2327 · tabler/tabler · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
8000

[BUG] Colour swatches in colours docs overlap each other on small screen #2327

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
Closed
ethancrawford opened this issue May 5, 2025 · 0 comments · Fixed by #2350
Closed

[BUG] Colour swatches in colours docs overlap each other on small screen #2327

ethancrawford opened this issue May 5, 2025 · 0 comments · Fixed by #2350
Labels
documentation Documentation needs to be updated

Comments

@ethancrawford
Copy link
Collaborator

Browser

N/A

OS

N/A

Screen size

360 x 800 (for example)

Describe the bug

On small screen devices, the colour swatches on the colours documentation page overlap each other.
This is due to a fixed padding applied to each swatch both on larger and smaller screens, set here:

tabler/shared/includes/docs/colors.html

Line 4 in e675389

<div class="p-6 rounded border" style="background-color: {{ color[1].hex }}"></div>

Perhaps the level of padding should be responsive.

How to reproduce

  1. Using a mobile device, or desktop browser with screen set to emulate a mobile device of say, 360 x 800 pixels, visit https://docs.tabler.io/ui/base/colors
  2. Scroll down to the colour examples
  3. Observe that the colour swatches overlap each other.

Screenshots

Image

JSFiddle

No response
@ethancrawford ethancrawford added bug Something isn't working and removed bug Something isn't working labels May 5, 2025
@ethancrawford ethancrawford changed the title [BUG] Colour swatches in colours documentation overlap each other [BUG] Colour swatches in colours docs overlap each other on small screen May 5, 2025
@ethancrawford ethancrawford added the documentation Documentation needs to be updated label May 5, 2025
ethancrawford added a commit to ethancrawford/tabler that referenced this issue May 9, 2025
@ethancrawford
Fix colour swatches on small screens
2385e5c 
Previously, a fixed padding amount was causing the colour swatches to overlap
each other on small screens. They are now responsive: on small screens, they
shrink slightly and spread out more across each line of their layout.

The markup was also changed slightly to make use of the `row-cols-*` shortcuts.

Fixes tabler#2327.
@ethancrawford ethancrawford mentioned this issue May 9, 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
documentation Documentation needs to be updated
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix colour swatches on small screens ethancrawford/tabler
1 participant
@ethancrawford
0