diff --git a/assets/css/app.css b/assets/css/app.css index 37091909..0e733539 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -864,16 +864,15 @@ } /* - * Horizontal-scroll fade for the pinned checkbox column: instead of hiding the - * scrolled-away content behind a hard opaque block, a gradient on the right edge - * of the sticky cell fades the incoming content, signalling there is more behind - * it. overflow: visible lets the ::after gradient extend past the cell; the cell - * keeps its own (zebra) background so the checkbox stays legible. + * Horizontal-scroll fade for the pinned checkbox column HEADER only: as the + * title cells scroll left behind the pinned checkbox they fade softly into the + * opaque base-100 header (gradient on the right edge of the sticky header cell) + * instead of a hard cut. Body rows deliberately have NO such fade — they are + * 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"] - .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, +/* Compact density: narrower fade in the tighter table-xs header cell. */ [data-sticky-first-col-rows="true"] .table.table-zebra.table-xs thead th.sticky-first-col-th::after { width: 0.5rem; } diff --git a/lib/mv_web/components/layouts.ex b/lib/mv_web/components/layouts.ex index 7ad21cb8..388d9676 100644 --- a/lib/mv_web/components/layouts.ex +++ b/lib/mv_web/components/layouts.ex @@ -161,7 +161,7 @@ defmodule MvWeb.Layouts do