these size hooks always flap - use container query

PostHog · Jan 23, 2025 · 134a86b · 134a86b
1 parent 029e017
commit 134a86b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx b/frontend/src/scenes/session-recordings/player/PlayerMeta.tsx
@@ -65,7 +65,7 @@ function URLOrScreen({ lastUrl }: { lastUrl: string | undefined }): JSX.Element
     )
 }
 
-function ResolutionView({ isCompact }: { isCompact: boolean }): JSX.Element {
+function ResolutionView(): JSX.Element {
     const { logicProps } = useValues(sessionRecordingPlayerLogic)
 
     const { resolutionDisplay, scaleDisplay, loading } = useValues(playerMetaLogic(logicProps))
@@ -84,9 +84,8 @@ function ResolutionView({ isCompact }: { isCompact: boolean }): JSX.Element {
             }
         >
             <span className="text-muted-alt text-xs">
-                <>
-                    {resolutionDisplay} {!isCompact && `(${scaleDisplay})`}
-                </>
+                <span className="hidden @[30rem]:inline-block">{resolutionDisplay} </span>
+                <span>({scaleDisplay})</span>
             </span>
         </Tooltip>
     )
@@ -125,7 +124,7 @@ export function PlayerMeta({ iconsOnly }: { iconsOnly: boolean }): JSX.Element {
                             </Link>
                         </Tooltip>
                     ) : null}
-                    <ResolutionView isCompact={isSmallPlayer} />
+                    <ResolutionView />
                 </div>
             </div>
         )
@@ -158,7 +157,7 @@ export function PlayerMeta({ iconsOnly }: { iconsOnly: boolean }): JSX.Element {
                     'PlayerMeta--fullscreen': isFullScreen,
                 })}
             >
-                <div className="flex items-center justify-between gap-1 whitespace-nowrap overflow-hidden px-1 py-0.5 text-xs">
+                <div className="flex items-center justify-between gap-1 whitespace-nowrap overflow-hidden px-1 py-0.5 text-xs @container">
                     {loading ? (
                         <LemonSkeleton className="w-1/3 h-4 my-1" />
                     ) : (
@@ -184,7 +183,7 @@ export function PlayerMeta({ iconsOnly }: { iconsOnly: boolean }): JSX.Element {
                     )}
                     <div className={clsx('flex-1', isSmallPlayer ? 'min-w-[1rem]' : 'min-w-[5rem]')} />
                     <PlayerMetaLinks iconsOnly={iconsOnly} />
-                    <ResolutionView isCompact={isSmallPlayer} />
+                    <ResolutionView />
                 </div>
             </div>
         </DraggableToNotebook>

diff --git a/frontend/src/scenes/session-recordings/player/playerMetaLogic.tsx b/frontend/src/scenes/session-recordings/player/playerMetaLogic.tsx
@@ -150,7 +150,7 @@ export const playerMetaLogic = kea<playerMetaLogicType>([
         resolutionDisplay: [
             (s) => [s.resolution],
             (resolution) => {
-                return `${resolution?.width || '??'} x ${resolution?.height || '??'}`
+                return `${resolution?.width || '--'} x ${resolution?.height || '--'}`
             },
         ],
         scaleDisplay: [