Match custody view layout to inventory view pattern
Build and push image / build (push) Successful in 1m0s
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:
@@ -5,6 +5,8 @@ import { remainingShort } from "../stats.js";
|
||||
import { fmt, TYPE_GLYPHS } from "../format.js";
|
||||
import { Btn, Card, Icon } from "../components/primitives/index.js";
|
||||
|
||||
const GRID_COLS = "32px 2fr 1fr 1fr 1fr 280px";
|
||||
|
||||
export function CustodyView({
|
||||
data,
|
||||
onSelectItem,
|
||||
@@ -32,17 +34,23 @@ export function CustodyView({
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ padding: "40px 48px", maxWidth: 1200 }}>
|
||||
<div style={{ marginBottom: 32 }}>
|
||||
<div
|
||||
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
|
||||
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
|
||||
</h1>
|
||||
<div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 6 }}>
|
||||
{checkedOut.length} item{checkedOut.length === 1 ? "" : "s"} checked out
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{checkedOut.length === 0 ? (
|
||||
@@ -69,7 +77,7 @@ export function CustodyView({
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "32px 2fr 1fr 0.8fr 0.8fr 260px",
|
||||
gridTemplateColumns: GRID_COLS,
|
||||
padding: "10px 16px",
|
||||
fontSize: 11,
|
||||
color: "var(--ink-3)",
|
||||
@@ -125,7 +133,7 @@ function CustodyRow({
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "32px 2fr 1fr 0.8fr 0.8fr 260px",
|
||||
gridTemplateColumns: GRID_COLS,
|
||||
padding: "12px 16px",
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid var(--line)",
|
||||
|
||||
Reference in New Issue
Block a user