Skip to content

[BootstrapAdminUi] Backport generic admin CSS fixes from Sylius - #404

Merged
loic425 merged 2 commits into
Sylius:mainfrom
loic425:bootstrap-admin-ui-sync-admin-css-fixes
Nov 12, 2026
Merged

loic425 merged 2 commits into
Sylius:mainfrom
loic425:bootstrap-admin-ui-sync-admin-css-fixes

Conversation

@loic425

@loic425 loic425 commented Nov 10, 2026

Copy link
Copy Markdown
Member
Q A
Branch? main
Bug fix? yes
New feature? no
BC breaks? no
License MIT

Several generic fixes landed in the Sylius admin stylesheets (mostly the dark mode batch) and were never ported to BootstrapAdminUi. This PR backports the ones that are not e-commerce specific.

  • Dark mode: background colors become $dark-body-bg / $dark-bg-surface variables, ghost/secondary buttons stay readable, form controls keep their is-invalid / is-valid / focus borders, empty state images are inverted.
  • Tom-select: multi-select items and remove buttons are themed in dark mode.
  • Misc: breadcrumb link color in both themes + ellipsis on long items, 44px touch area for file input buttons, darker modal backdrop, InterVariable loaded as woff2 with a sans-serif fallback (was serif).

Example: an invalid field in dark mode used to lose its red border because the neutral border override had higher priority; it now uses :where(:not(.is-invalid):not(.is-valid):not(:focus)).

Not included (follow-ups): RTL stylesheet (needs a dir attribute in the layout), sticky page header (needs JS), logo color via currentColor (needs template changes).

public/ assets were rebuilt with yarn build.

- Dark mode: configurable background variables, readable ghost and secondary buttons,
  keep validation and focus borders on form controls, invert empty state images
- Tom-select: theme multi-select items and remove buttons in dark mode
- Breadcrumb: link color in both themes and ellipsis on long items
- Forms: 44px touch area for file input buttons
- Fonts: load InterVariable as woff2 with a sans-serif fallback
- Modal: darker backdrop
@loic425
loic425 marked this pull request as ready for review November 10, 2026 16:44

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Redundant !important, the tom-select rule it overrides has the same specificity and comes first, so this already wins

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed in 8502af8

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here. Tested without both, no visual change.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed in 8502af8

@loic425

loic425 commented Nov 12, 2026

Copy link
Copy Markdown
Member Author

@camilleislasse Thx so much for your review, much appreciated.

@loic425
loic425 merged commit 47e985a into Sylius:main Nov 12, 2026
6 checks passed
@loic425
loic425 deleted the bootstrap-admin-ui-sync-admin-css-fixes branch November 12, 2026 08:12
loic425 added a commit that referenced this pull request Nov 12, 2026
| Q               | A
|-----------------|-----
| Branch?         | main
| Bug fix?        | yes
| New feature?    | no
| BC breaks?      | no
| License         | MIT

Follow-up of #404. The sidebar submenu items look more spaced out than
in the Sylius admin.

Sylius removed `min-height: 44px` from `.navbar-collapse a.nav-link` /
`a.dropdown-item` in Sylius/Sylius@7b2d5a77e7 ("Remove additional
spacings in admin sidebar menu"), but the rule was kept in
BootstrapAdminUi.

- Submenu items (`.dropdown-item`) go from 44px to 30px, same as in the
Sylius admin.
- Top-level items are unchanged (Tabler already sets a 40px min-height
on them).

`public/` assets were rebuilt with `yarn build`.

| Before | After |
|--------|-------|
| <img width="400" alt="Sidebar menu before"
src="https://github.com/user-attachments/assets/1596a225-fd07-40ed-8a9d-9fb6f6e98338"
/> | <img width="400" alt="Sidebar menu after"
src="https://github.com/user-attachments/assets/419b55ad-e374-4669-b633-101f9422d24f"
/> |
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