From 1ef8bd66419c748f52ab0f80d5955ef590e92be7 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Mon, 13 Apr 2026 08:47:26 -0500
Subject: [PATCH] Reset daisyUI .select styling on sutra_ui wrapper divs

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.
---
 assets/css/live_table_compat.css | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/assets/css/live_table_compat.css b/assets/css/live_table_compat.css
index b80eccb1..36de537e 100644
--- a/assets/css/live_table_compat.css
+++ b/assets/css/live_table_compat.css
@@ -32,12 +32,25 @@
 }
 
 /* SutraUI Select — used by live_table for the per-page selector.
-   No width: 100% here — Tailwind width utilities (e.g. `w-24`) on the
-   component must win, otherwise the per-page select overflows the header
-   row and overlaps the search box. */
+   daisyUI 5 also defines a `.select` class with its own border, chevron
+   background-image, padding, width clamp, and box-shadow — all of which
+   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 {
   position: relative;
   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 {