fix: a bunch of UI nits (#29108)

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: Paul D'Ambra <[email protected]>

frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx

@@ -14,7 +14,7 @@ type KeyboardShortcut = Array<keyof KeyboardShortcutProps>
 export interface LemonMenuItemBase
     extends Pick<
         LemonButtonProps,
-        'icon' | 'sideIcon' | 'sideAction' | 'disabledReason' | 'tooltip' | 'active' | 'status' | 'data-attr'
+        'icon' | 'sideIcon' | 'sideAction' | 'disabledReason' | 'tooltip' | 'active' | 'status' | 'data-attr' | 'size'
     > {
     label: string | JSX.Element
     key?: React.Key

frontend/src/scenes/session-recordings/components/PanelSettings.scss

@@ -0,0 +1,11 @@
+.SettingsBar--button--square {
+    .LemonButtonWithSideAction__side-button {
+        top: 0;
+        bottom: 0;
+        border-radius: 0;
+    }
+
+    .LemonButton {
+        border-radius: 0;
+    }
+}

frontend/src/scenes/session-recordings/components/PanelSettings.tsx

@@ -1,12 +1,15 @@
+import './PanelSettings.scss'
+
 import clsx from 'clsx'
+import { FloatingContainerContext } from 'lib/hooks/useFloatingContainerContext'
 import {
     LemonButton,
     LemonButtonWithoutSideActionProps,
     LemonButtonWithSideActionProps,
 } from 'lib/lemon-ui/LemonButton'
 import { LemonMenu, LemonMenuItem, LemonMenuProps } from 'lib/lemon-ui/LemonMenu/LemonMenu'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, useRef } from 'react'
 
 /**
  * TODO the lemon button font only has 700 and 800 weights available.
@@ -37,19 +40,23 @@ export function SettingsBar({
     border: 'bottom' | 'top' | 'all' | 'none'
     className?: string
 }>): JSX.Element {
+    const containerRef = useRef<HTMLDivElement>(null)
     return (
-        <div
-            className={clsx(
-                'flex flex-row w-full overflow-hidden font-light text-xs bg-primary items-center',
-                className,
-                {
-                    'border-b': ['bottom', 'all'].includes(border),
-                    'border-t': ['top', 'all'].includes(border),
-                }
-            )}
-        >
-            {children}
-        </div>
+        <FloatingContainerContext.Provider value={containerRef}>
+            <div
+                ref={containerRef}
+                className={clsx(
+                    'flex flex-row w-full overflow-hidden font-light text-xs bg-primary items-center',
+                    className,
+                    {
+                        'border-b': ['bottom', 'all'].includes(border),
+                        'border-t': ['top', 'all'].includes(border),
+                    }
+                )}
+            >
+                {children}
+            </div>
+        </FloatingContainerContext.Provider>
     )
 }
 
@@ -116,5 +123,9 @@ export function SettingsToggle({ title, icon, label, active, rounded, ...props }
     )
 
     // otherwise the tooltip shows instead of the disabled reason
-    return props.disabledReason ? button : <Tooltip title={title}>{button}</Tooltip>
+    return (
+        <div className={clsx(rounded ? 'SettingsBar--button--rounded' : 'SettingsBar--button--square')}>
+            {props.disabledReason ? button : <Tooltip title={title}>{button}</Tooltip>}
+        </div>
+    )
 }

frontend/src/scenes/session-recordings/components/SimpleTimeLabel.tsx

@@ -1,28 +1,34 @@
 import clsx from 'clsx'
 import { Dayjs, dayjs } from 'lib/dayjs'
+import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { shortTimeZone } from 'lib/utils'
 import { memo } from 'react'
 import { TimestampFormat } from 'scenes/session-recordings/player/playerSettingsLogic'
 
 function formattedReplayTime(
     time: string | number | Dayjs | null | undefined,
-    timestampFormat: TimestampFormat
+    timestampFormat: TimestampFormat,
+    timeOnly?: boolean
 ): string {
     if (time == null) {
-        return '--/--/----, 00:00:00'
+        return timeOnly ? '00:00:00' : '--/--/----, 00:00:00'
     }
 
     let d = dayjs(time)
     const isUTC = timestampFormat === TimestampFormat.UTC
     if (isUTC) {
         d = d.tz('UTC')
     }
-    const formatted = d.format(formatStringFor(d))
+    const formatted = d.format(formatStringFor(d, timeOnly))
     const timezone = isUTC ? 'UTC' : shortTimeZone(undefined, d.toDate())
     return `${formatted} ${timezone}`
 }
 
-function formatStringFor(d: Dayjs): string {
+function formatStringFor(d: Dayjs, timeOnly?: boolean): string {
+    if (timeOnly) {
+        return 'HH:mm:ss'
+    }
+
     const today = dayjs()
     if (d.isSame(today, 'year')) {
         return 'DD/MMM, HH:mm:ss'
@@ -46,12 +52,15 @@ export function _SimpleTimeLabel({
     timestampFormat,
     muted = true,
     size = 'xsmall',
+    containerSize,
 }: {
     startTime: string | number | Dayjs | undefined
     timestampFormat: TimestampFormat
     muted?: boolean
     size?: 'small' | 'xsmall'
+    containerSize?: 'small' | 'normal'
 }): JSX.Element {
+    const formattedTime = formattedReplayTime(startTime, timestampFormat, containerSize === 'small')
     return (
         <div
             className={clsx(
@@ -61,7 +70,11 @@ export function _SimpleTimeLabel({
                 size === 'small' && 'text-sm'
             )}
         >
-            {formattedReplayTime(startTime, timestampFormat)}
+            {containerSize === 'small' ? (
+                <Tooltip title={formattedReplayTime(startTime, timestampFormat, false)}>{formattedTime}</Tooltip>
+            ) : (
+                formattedTime
+            )}
         </div>
     )
 }
@@ -80,7 +93,8 @@ export const SimpleTimeLabel = memo(
             prevStartTimeTruncated === nextStartTimeTruncated &&
             prevProps.timestampFormat === nextProps.timestampFormat &&
             prevProps.muted === nextProps.muted &&
-            prevProps.size === nextProps.size
+            prevProps.size === nextProps.size &&
+            prevProps.containerSize === nextProps.containerSize
         )
     }
 )

frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.tsx

@@ -16,9 +16,9 @@ import { urls } from 'scenes/urls'
 
 import { NetworkView } from '../apm/NetworkView'
 import { PlayerController } from './controller/PlayerController'
+import { PlayerMeta } from './player-meta/PlayerMeta'
 import { PlayerFrame } from './PlayerFrame'
 import { PlayerFrameOverlay } from './PlayerFrameOverlay'
-import { PlayerMeta } from './PlayerMeta'
 import { PlaybackMode, playerSettingsLogic } from './playerSettingsLogic'
 import { PlayerSidebar } from './PlayerSidebar'
 import { sessionRecordingDataLogic } from './sessionRecordingDataLogic'
@@ -146,15 +146,6 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX.
             ref: playerRef,
         }
     )
-    const { size: playerMainSize } = useResizeBreakpoints(
-        {
-            0: 'small',
-            750: 'medium',
-        },
-        {
-            ref: playerMainRef,
-        }
-    )
 
     const { draggable, elementProps } = useNotebookDrag({ href: urls.replaySingle(sessionRecordingId) })
 
@@ -210,9 +201,7 @@ export function SessionRecordingPlayer(props: SessionRecordingPlayerProps): JSX.
                                         <div className="flex flex-col flex-1 w-full">
                                             {playbackMode === PlaybackMode.Recording ? (
                                                 <>
-                                                    {!noMeta || isFullScreen ? (
-                                                        <PlayerMeta iconsOnly={playerMainSize === 'small'} />
-                                                    ) : null}
+                                                    {!noMeta || isFullScreen ? <PlayerMeta /> : null}
 
                                                     <div
                                                         className="SessionRecordingPlayer__body"