Match custody view layout to inventory view pattern
Build and push image / build (push) Successful in 1m0s

Use responsive clamped padding, full-width maxWidth, and even column
proportions so the page fills available space consistently with other
tabs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-07 21:31:35 -04:00
parent fdfaa4503d
commit 5c67f1e2e0
+16 -8
View File
@@ -5,6 +5,8 @@ import { remainingShort } from "../stats.js";
import { fmt, TYPE_GLYPHS } from "../format.js"; import { fmt, TYPE_GLYPHS } from "../format.js";
import { Btn, Card, Icon } from "../components/primitives/index.js"; import { Btn, Card, Icon } from "../components/primitives/index.js";
const GRID_COLS = "32px 2fr 1fr 1fr 1fr 280px";
export function CustodyView({ export function CustodyView({
data, data,
onSelectItem, onSelectItem,
@@ -32,17 +34,23 @@ export function CustodyView({
); );
return ( return (
<div style={{ padding: "40px 48px", maxWidth: 1200 }}> <div
<div style={{ marginBottom: 32 }}> style={{
padding: "clamp(32px, 3vw, 64px) clamp(40px, 3vw, 80px) 80px",
maxWidth: 2400,
margin: "0 auto",
}}
>
<div style={{ marginBottom: 24 }}>
<div className="smallcaps" style={{ color: "var(--ink-3)" }}>
{checkedOut.length} item{checkedOut.length === 1 ? "" : "s"} checked out
</div>
<h1 <h1
className="serif" className="serif"
style={{ fontSize: 44, margin: 0, fontWeight: 500, letterSpacing: "-0.02em" }} style={{ fontSize: 44, margin: "6px 0 0", fontWeight: 500, letterSpacing: "-0.02em" }}
> >
My Custody My Custody
</h1> </h1>
<div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 6 }}>
{checkedOut.length} item{checkedOut.length === 1 ? "" : "s"} checked out
</div>
</div> </div>
{checkedOut.length === 0 ? ( {checkedOut.length === 0 ? (
@@ -69,7 +77,7 @@ export function CustodyView({
<div <div
style={{ style={{
display: "grid", display: "grid",
gridTemplateColumns: "32px 2fr 1fr 0.8fr 0.8fr 260px", gridTemplateColumns: GRID_COLS,
padding: "10px 16px", padding: "10px 16px",
fontSize: 11, fontSize: 11,
color: "var(--ink-3)", color: "var(--ink-3)",
@@ -125,7 +133,7 @@ function CustodyRow({
<div <div
style={{ style={{
display: "grid", display: "grid",
gridTemplateColumns: "32px 2fr 1fr 0.8fr 0.8fr 260px", gridTemplateColumns: GRID_COLS,
padding: "12px 16px", padding: "12px 16px",
alignItems: "center", alignItems: "center",
borderBottom: "1px solid var(--line)", borderBottom: "1px solid var(--line)",