persons recording scene now growing full-height

Author: adamleithp

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

@@ -40,6 +40,7 @@ export interface LemonTabsProps<T extends string | number> {
     sceneInset?: boolean
     /** Pass in JSX to be sticky to the right of the tabs. */
     rightSlot?: React.ReactNode
+    contentClassName?: string
 }
 
 interface LemonTabsCSSProperties extends React.CSSProperties {
@@ -57,6 +58,7 @@ export function LemonTabs<T extends string | number>({
     'data-attr': dataAttr,
     sceneInset = false,
     rightSlot,
+    contentClassName,
 }: LemonTabsProps<T>): JSX.Element {
     const { containerRef, selectionRef, sliderWidth, sliderOffset, transitioning } = useSliderPositioning<
         HTMLUListElement,
@@ -144,7 +146,7 @@ export function LemonTabs<T extends string | number>({
                 )}
             </ul>
             {activeTab && 'content' in activeTab && (
-                <div className={cn('LemonTabs__content', sceneInset && 'p-4')} key={activeKey}>
+                <div className={cn('LemonTabs__content', sceneInset && 'p-4', contentClassName)} key={activeKey}>
                     {activeTab.content}
                 </div>
             )}

frontend/src/scenes/persons/PersonScene.tsx

@@ -16,6 +16,7 @@ import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { copyToClipboard } from 'lib/utils/copyToClipboard'
+import { cn } from 'lib/utils/css-classes'
 import { openInAdminPanel } from 'lib/utils/person-actions'
 import { ProductIntentContext } from 'lib/utils/product-intents'
 import { RelatedGroups } from 'scenes/groups/RelatedGroups'
@@ -137,7 +138,7 @@ export function PersonScene(): JSX.Element | null {
     const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
 
     return (
-        <SceneContent>
+        <SceneContent fullHeight>
             <SceneTitleSection
                 name="Person"
                 resourceType={{
@@ -197,6 +198,10 @@ export function PersonScene(): JSX.Element | null {
                     navigateToTab(tab as PersonsTabType)
                 }}
                 data-attr="persons-tabs"
+                className="grow"
+                contentClassName={cn({
+                    'flex flex-col grow': currentTab === PersonsTabType.SESSION_RECORDINGS,
+                })}
                 tabs={[
                     feedEnabled
                         ? {
@@ -252,14 +257,12 @@ export function PersonScene(): JSX.Element | null {
                                         </LemonBanner>
                                     </div>
                                 ) : null}
-                                <div className="SessionRecordingPlaylistHeightWrapper">
-                                    <SessionRecordingsPlaylist
-                                        logicKey={`person-scene-${person.uuid}`}
-                                        personUUID={person.uuid}
-                                        distinctIds={person.distinct_ids}
-                                        updateSearchParams
-                                    />
-                                </div>
+                                <SessionRecordingsPlaylist
+                                    logicKey={`person-scene-${person.uuid}`}
+                                    personUUID={person.uuid}
+                                    distinctIds={person.distinct_ids}
+                                    updateSearchParams
+                                />
                             </>
                         ),
                     },