[6.x] Table and lightswitch styling fixes - #19766
Merged
Merged
Conversation
- AdminTable's inline padding is now opt-in via `admin-table--padded`, which the full-width admin tables now use - `.cp-table` cells get block padding and row borders between rows only, and lightswitch cells keep their padding - Editable tables' header cells inherit the table's alignment instead of the browser's centered `th` default - DataTable header cells with `text-center` now center their content, and the sort-icon spacer only renders for sortable columns - The site settings table's Homepage column header is centered - `craft-switch` adds `form-field__group-two--switch` to its control group, so it's only as tall as the switch - `craft-switch-button`'s track no longer has a -1px inline margin, and the indeterminate thumb is now centered Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
📚 Storybook previews@craftcms/ui — open Storybook Changed components:
resources/js — open Storybook No changed components detected in this Storybook. |
Header cells and `.select-cell` cells now share the inputs' inline padding, via a private `--_input-padding-inline` property. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Styling fixes for control panel tables and lightswitches. Follows up on #19765.
Tables
AdminTable’s inline padding is now opt-in via anadmin-table--paddedclass, which the full-width admin tables (sections, sites, fields, entry types, workflows, user groups, volumes, image transforms and transformers, and GraphQL schemas and tokens) now use. Tables that sit within a container or pane are no longer padded a second time..cp-tablecells get block padding, row borders only appear between rows, and cells containing a lightswitch keep their padding.<th>..select-cellcells now share the inputs’ inline padding, so headings line up with the values and dropdowns below them.DataTableheader cells withtext-centernow actually center their content, and the space before the sort icon is only rendered for sortable columns, so it no longer pushes non-sortable headers off-center.Lightswitches
craft-switchadds aform-field__group-two--switchclass to its control group, which lays it out as a flex column, so it’s only as tall as the switch rather than the height of an empty text line (23px for a 16px switch).craft-switch-button’s track no longer has a-1pxinline margin, and the thumb offsets that compensated for it are gone. The indeterminate thumb, which sat 2px off-center, is now centered.🤖 Generated with Claude Code