Control layout tweaks for small grid boxes

This commit is contained in:
Max Goodhart
2026-02-01 18:53:46 -08:00
parent 8c7415c008
commit 5ba0aba252

View File

@@ -725,6 +725,7 @@ export function ControlUI({
return null return null
} }
const isSmall = pos.height < 200
return ( return (
<StyledGridPreviewBox <StyledGridPreviewBox
color={idColor(streamId)} color={idColor(streamId)}
@@ -740,7 +741,7 @@ export function ControlUI({
isListening={isListening} isListening={isListening}
isError={matchesState('displaying.error', state.state)} isError={matchesState('displaying.error', state.state)}
> >
<StyledGridInfo> <StyledGridInfo className={isSmall ? 'small' : undefined}>
<StyledGridLabel> <StyledGridLabel>
{streamId} {streamId}
<OrientationIndicator <OrientationIndicator
@@ -748,7 +749,7 @@ export function ControlUI({
className={`orientation-${(data?.orientation ?? 'unknown').toLowerCase()}`} className={`orientation-${(data?.orientation ?? 'unknown').toLowerCase()}`}
/> />
</StyledGridLabel> </StyledGridLabel>
<div>{data?.source}</div> {!isSmall && <div>{data?.source}</div>}
{data?.city && ( {data?.city && (
<StyledGridLocation> <StyledGridLocation>
{data?.city} {data?.state} {data?.city} {data?.state}
@@ -1514,6 +1515,10 @@ const StyledGridLabel = styled.div`
.orientation-v { .orientation-v {
margin-left: -4px; margin-left: -4px;
} }
${StyledGridInfo}.small & {
font-size: 20px;
}
` `
const StyledGridLocation = styled.div` const StyledGridLocation = styled.div`
@@ -1574,7 +1579,7 @@ const StyledGridControlsContainer = styled.div`
user-select: none; user-select: none;
& > * { & > * {
z-index: 200; z-index: 1001; // Above StyledGridInfo
} }
` `