assets/css/app.css

@@ -864,16 +864,15 @@
 }
 
 /*
- * Horizontal-scroll fade for the pinned checkbox column: instead of hiding the
+ * Horizontal-scroll fade for the pinned checkbox column HEADER only: as the
- * scrolled-away content behind a hard opaque block, a gradient on the right edge
+ * title cells scroll left behind the pinned checkbox they fade softly into the
- * of the sticky cell fades the incoming content, signalling there is more behind
+ * opaque base-100 header (gradient on the right edge of the sticky header cell)
- * it. overflow: visible lets the ::after gradient extend past the cell; the cell
+ * instead of a hard cut. Body rows deliberately have NO such fade — they are
- * keeps its own (zebra) background so the checkbox stays legible.
+ * simply covered by the opaque (zebra) checkbox cell, so nothing tints the strip
+ * right of the body checkboxes. A gradient there would fade to the row's zebra
+ * colour and read as a grey shimmer beside the checkboxes (most visible while
+ * scrolling), which is not wanted.
  */
-[data-sticky-first-col-rows="true"] .table.table-zebra td.sticky-first-col-cell {
-  overflow: visible;
-}
-[data-sticky-first-col-rows="true"] .table.table-zebra td.sticky-first-col-cell::after,
 [data-sticky-first-col-rows="true"] .table.table-zebra thead th.sticky-first-col-th::after {
   content: "";
   position: absolute;
@@ -882,34 +881,9 @@
   left: 100%;
   width: 1.25rem;
   pointer-events: none;
-}
-[data-sticky-first-col-rows="true"]
-  .table.table-zebra
-  tbody
-  tr:nth-child(odd)
-  > td.sticky-first-col-cell::after {
   background: linear-gradient(to right, var(--color-base-100), transparent);
 }
-[data-sticky-first-col-rows="true"]
+/* Compact density: narrower fade in the tighter table-xs header cell. */
-  .table.table-zebra
-  tbody
-  tr:nth-child(even)
-  > td.sticky-first-col-cell::after {
-  background: linear-gradient(to right, var(--color-base-200), transparent);
-}
-[data-sticky-first-col-rows="true"]
-  .table.table-zebra
-  tbody
-  tr[data-row-interactive="true"]:is(:hover, :has(:focus-visible))
-  > td.sticky-first-col-cell::after {
-  background: linear-gradient(to right, var(--color-base-300), transparent);
-}
-[data-sticky-first-col-rows="true"] .table.table-zebra thead th.sticky-first-col-th::after {
-  background: linear-gradient(to right, var(--color-base-100), transparent);
-}
-/* Compact density: narrower fade so the gradient does not visually reach into the
-   checkbox column's own content area in the tighter table-xs cell. */
-[data-sticky-first-col-rows="true"] .table.table-zebra.table-xs td.sticky-first-col-cell::after,
 [data-sticky-first-col-rows="true"] .table.table-zebra.table-xs thead th.sticky-first-col-th::after {
   width: 0.5rem;
 }

lib/mv_web/components/layouts.ex

@@ -161,7 +161,7 @@ defmodule MvWeb.Layouts do
 
         <div class="drawer-content flex flex-col relative z-0">
           <!-- Mobile Header (only visible on mobile) -->
-          <header class="lg:hidden sticky top-0 z-10 navbar bg-base-100 shadow-sm">
+          <header class="lg:hidden sticky top-0 z-40 navbar bg-base-100 shadow-sm">
             <label
               for="mobile-drawer"
               class="btn btn-square btn-ghost"