fix: improve the styling and responsiveness (#27859)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/lib/components/Playlist/Playlist.tsx

@@ -97,11 +97,11 @@ export function Playlist({
             .find((i) => i.id === activeItemId) || null
 
     return (
-        <div className="flex flex-col lg:flex-row w-full gap-2 h-full">
+        <div className="flex flex-col xl:flex-row w-full gap-2 h-full">
             <div
                 ref={playlistRef}
                 data-attr={dataAttr}
-                className={clsx('Playlist w-full lg:max-w-80 min-h-96', {
+                className={clsx('Playlist w-full xl:max-w-80 min-w-60 min-h-96', {
                     'Playlist--wide': size !== 'small',
                     'Playlist--embedded': embedded,
                 })}
@@ -128,7 +128,7 @@ export function Playlist({
                 </div>
             </div>
             <div
-                className={clsx('Playlist h-full min-h-96 w-full min-w-96 order-first lg:order-none', {
+                className={clsx('Playlist h-full min-h-96 w-full min-w-96 lg:min-w-[560px] order-first xl:order-none', {
                     'Playlist--wide': size !== 'small',
                     'Playlist--embedded': embedded,
                 })}

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

@@ -20,8 +20,13 @@ export function PlayerInspector(): JSX.Element {
     }
 
     return (
-        <LemonButton size="xsmall" tooltip="Inspector" icon={<IconUnverifiedEvent />} onClick={handleClick}>
-            Inspector
+        <LemonButton
+            size="xsmall"
+            tooltip="View all activities from this session, including events, console logs, network requests, and an overview. Explore what happened in detail."
+            icon={<IconUnverifiedEvent />}
+            onClick={handleClick}
+        >
+            Activity
         </LemonButton>
     )
 }

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

@@ -17,7 +17,7 @@ import { urls } from 'scenes/urls'
 import { getCurrentExporterData } from '~/exporter/exporterViewLogic'
 import { Logo } from '~/toolbar/assets/Logo'
 
-import { PlayerInspector } from './PlayerInspector'
+import { PlayerBottomSettings } from './controller/PlayerController'
 import { PlayerPersonMeta } from './PlayerPersonMeta'
 import { sessionRecordingPlayerLogic, SessionRecordingPlayerMode } from './sessionRecordingPlayerLogic'
 
@@ -67,7 +67,7 @@ function URLOrScreen({ lastUrl }: { lastUrl: string | undefined }): JSX.Element
     )
 }
 
-function ResolutionView(): JSX.Element {
+export function ResolutionView(): JSX.Element {
     const { logicProps } = useValues(sessionRecordingPlayerLogic)
 
     const { resolutionDisplay, scaleDisplay, loading } = useValues(playerMetaLogic(logicProps))
@@ -186,11 +186,11 @@ export function PlayerMeta({ iconsOnly }: { iconsOnly: boolean }): JSX.Element {
                     <div className={clsx('flex-1', isSmallPlayer ? 'min-w-[1rem]' : 'min-w-[5rem]')} />
                     <PlayerMetaLinks iconsOnly={iconsOnly} />
                     <ResolutionView />
-                    <div className="flex items-center gap-x-1 ml-2">
+                    <div className="ml-2">
                         <PlayerPersonMeta />
-                        <PlayerInspector />
                     </div>
                 </div>
+                <PlayerBottomSettings />
             </div>
         </DraggableToNotebook>
     )

frontend/src/scenes/session-recordings/player/controller/PlayerController.tsx

@@ -33,6 +33,7 @@ import { TimestampFormatToLabel } from 'scenes/session-recordings/utils'
 import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
 import { SessionPlayerState } from '~/types'
 
+import { PlayerInspector } from '../PlayerInspector'
 import { SeekSkip, Timestamp } from './PlayerControllerTime'
 import { Seekbar } from './Seekbar'
 
@@ -162,7 +163,7 @@ function InspectDOM(): JSX.Element {
 
     return (
         <SettingsButton
-            title="View the DOM at this point in time in the recording"
+            title="Inspect the DOM as it was at this moment in the session. Analyze the structure and elements captured during the recording."
             label="Inspect DOM"
             data-attr="explore-dom"
             onClick={() => openExplorer()}
@@ -174,20 +175,25 @@ function InspectDOM(): JSX.Element {
     )
 }
 
-function PlayerBottomSettings(): JSX.Element {
+export function PlayerBottomSettings(): JSX.Element {
     const {
         logicProps: { noInspector },
     } = useValues(sessionRecordingPlayerLogic)
 
     return (
-        <SettingsBar border="top" className="justify-between">
-            <div className="flex flex-row gap-0.5">
-                <SkipInactivity />
-                <ShowMouseTail />
-                <SetPlaybackSpeed />
-                <SetTimeFormat />
+        <SettingsBar border="top">
+            <div className="no-flex sm:flex w-full justify-between items-center gap-0.5">
+                <div className="flex flex-row gap-0.5">
+                    <SkipInactivity />
+                    <ShowMouseTail />
+                    <SetPlaybackSpeed />
+                    <SetTimeFormat />
+                </div>
+                <div className="flex flex-row gap-0.5">
+                    {noInspector ? null : <InspectDOM />}
+                    <PlayerInspector />
+                </div>
             </div>
-            {noInspector ? null : <InspectDOM />}
         </SettingsBar>
     )
 }
@@ -265,8 +271,6 @@ export function PlayerController(): JSX.Element {
                     <FullScreen />
                 </div>
             </div>
-
-            <PlayerBottomSettings />
         </div>
     )
 }