fix(design): the table header takes the B9 fade utility, and every size is dvh, not vh (E28 S3d4)
The table header carried an arbitrary-value copy of fade-below; a contract refuses a hand gradient of a surface colour. 100vh is the viewport with a tablet browser's toolbar retracted, so h-screen / min-h-screen / static vh hid the last rows under it; a contract holds dvh (the Plex player stage changes with S3f, where it is played on the tablet).
This commit is contained in:
@@ -173,7 +173,7 @@ function CommandPaletteBody({ onClose, groups }: { onClose: () => void; groups:
|
||||
const from = Math.max(activeIndex, 0);
|
||||
setPicked(flat[(from + step + flat.length) % flat.length]!.id);
|
||||
} else if (e.key === "PageDown" || e.key === "PageUp") {
|
||||
// A page at a time, stopping at the ends (lib/listPaging). The list is 50vh and group headings
|
||||
// A page at a time, stopping at the ends (lib/listPaging). The list is 50dvh and group headings
|
||||
// eat into it, so the page is measured. Home/End stay the field's own (caret to the query's ends).
|
||||
e.preventDefault();
|
||||
const list = listRef.current;
|
||||
@@ -230,7 +230,7 @@ function CommandPaletteBody({ onClose, groups }: { onClose: () => void; groups:
|
||||
role="listbox"
|
||||
aria-label={t("palette.title")}
|
||||
hidden={flat.length === 0}
|
||||
className="mt-3 max-h-[50vh] overflow-y-auto"
|
||||
className="mt-3 max-h-[50dvh] overflow-y-auto"
|
||||
>
|
||||
{visible.map((g) => (
|
||||
<div
|
||||
|
||||
@@ -97,7 +97,7 @@ export default function Modal({
|
||||
drawer
|
||||
? "justify-end"
|
||||
: top
|
||||
? "items-start justify-center p-4 pt-[8vh] sm:p-6 sm:pt-[10vh]"
|
||||
? "items-start justify-center p-4 pt-[8dvh] sm:p-6 sm:pt-[10dvh]"
|
||||
: "items-center justify-center p-4 sm:p-6"
|
||||
}`}
|
||||
onMouseDown={(e) => {
|
||||
|
||||
@@ -211,7 +211,7 @@ export function ColumnHead<T>({
|
||||
const [openFilter, setOpenFilter] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<thead className="sticky top-0 z-base after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-4 after:bg-[linear-gradient(to_bottom,var(--bg),transparent)] after:content-['']">
|
||||
<thead className="sticky top-0 z-base fade-below">
|
||||
<tr className="text-muted [&>th]:shadow-[inset_0_-1px_0_var(--border)]">
|
||||
{columns.map((col) => {
|
||||
const isSorted = sort?.key === col.key;
|
||||
|
||||
Reference in New Issue
Block a user