graham/prop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reset daisyUI .select styling on sutra_ui wrapper divs

Browse source 
daisyUI 5 defines `.select` with its own border, chevron background-image,
padding, width clamp and box-shadow. Those rules were bleeding through
onto sutra_ui's wrapper `<div class="select">` in the live_table per-page
selector, rendering two chevrons and the wrong width. Explicitly zero out
every visible property except `width`, so Tailwind width utilities (w-24)
still win and the inner `.select-trigger` button owns the visible styling.
This commit is contained in:
Graham McIntire 2026-04-13 08:47:26 -05:00
parent 49e40f4253
commit 1ef8bd6641
No known key found for this signature in database
GPG key ID: F4ABF488E6029E59
1 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
assets/css/live_table_compat.css
View file

@ -32,12 +32,25 @@
} }
/* SutraUI Select — used by live_table for the per-page selector. /* SutraUI Select — used by live_table for the per-page selector.
No width: 100% here — Tailwind width utilities (e.g. `w-24`) on the daisyUI 5 also defines a `.select` class with its own border, chevron
component must win, otherwise the per-page select overflows the header background-image, padding, width clamp, and box-shadow — all of which
row and overlaps the search box. */ would bleed through onto sutra_ui's wrapper `<div class="select">`
(two chevrons, wrong width). Reset every visible property except
`width`, so Tailwind width utilities (e.g. `w-24`) on the component
still win and the inner `.select-trigger` button owns the visible
styling. */
*:not(select).select { *:not(select).select {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
height: auto;
padding: 0;
border: 0 solid transparent;
background: transparent;
background-image: none;
box-shadow: none;
font-size: inherit;
vertical-align: baseline;
flex-shrink: 0;
} }
.select-trigger { .select-trigger {