more layout tweaking

This commit is contained in:
legop3
2026-06-07 17:30:43 -04:00
parent dde4ac45c7
commit 87473fc424
7 changed files with 133 additions and 133 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -11,8 +11,8 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Roomba Rover" />
<title>Roomba Rover</title> <title>Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-BbhgEbHf.js"></script> <script type="module" crossorigin src="/assets/index-BWCCFBa_.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-C47xw0G6.css"> <link rel="stylesheet" crossorigin href="/assets/index-BcnYeuah.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
@@ -60,7 +60,7 @@ export default function ReplayReadyPopup({ replay, onClose, variant = 'modal' })
// The floating panel is intentionally compact because it appears for users who // The floating panel is intentionally compact because it appears for users who
// did not ask for the replay. It still loads the video immediately, but its // did not ask for the replay. It still loads the video immediately, but its
// bounded height prevents the floating card from covering too much of the UI. // bounded height prevents the floating card from covering too much of the UI.
className="aspect-video max-h-[12rem] w-full bg-black" className="aspect-video max-h-[24rem] w-full bg-black"
/> />
</div> </div>
</CardFrame> </CardFrame>
@@ -206,7 +206,7 @@ export default function ReplaySourcesPanel({ panelId = 'replay-sources', fillHei
return ( return (
<div className={`relative ${fillHeight ? 'flex h-full min-h-0 flex-col' : ''}`}> <div className={`relative ${fillHeight ? 'flex h-full min-h-0 flex-col' : ''}`}>
{showPanelReplay ? ( {showPanelReplay ? (
<div className="absolute bottom-[calc(100%+0.125rem)] left-0 z-[70] w-full max-w-full"> <div className="absolute bottom-[calc(100%+0.125rem)] left-1/2 z-[70] w-[min(42rem,calc(100vw-1rem))] -translate-x-1/2">
<ReplayReadyPopup <ReplayReadyPopup
replay={latestReplay} replay={latestReplay}
variant="floating-panel" variant="floating-panel"
@@ -221,8 +221,8 @@ export default function ReplaySourcesPanel({ panelId = 'replay-sources', fillHei
</div> </div>
<div className="space-y-0.5"> <div className="space-y-0.5">
<div className="flex items-center gap-0.5"> <div className="flex items-center gap-0.5">
<label className="panel-muted shrink-0 text-xs" htmlFor={`${panelId}-title`}> <label className="surface shrink-0 text-xs" htmlFor={`${panelId}-title`}>
Replay title Replay title:
</label> </label>
{/* The label has fixed-width content, while the input owns the remaining row space. {/* The label has fixed-width content, while the input owns the remaining row space.
This keeps the title control compact without making the input compete with This keeps the title control compact without making the input compete with