feat(ui): prevent controls from obscuring transcript

jeremyckahn · Nov 22, 2023 · 8d3faa8 · 8d3faa8
1 parent e8313fe
commit 8d3faa8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/components/ChatTranscript/ChatTranscript.tsx b/src/components/ChatTranscript/ChatTranscript.tsx
@@ -1,10 +1,11 @@
-import { HTMLAttributes, useRef, useEffect, useState } from 'react'
+import { HTMLAttributes, useRef, useEffect, useState, useContext } from 'react'
 import cx from 'classnames'
 import Box from '@mui/material/Box'
+import useTheme from '@mui/material/styles/useTheme'
 
 import { Message as IMessage, InlineMedia } from 'models/chat'
 import { Message } from 'components/Message'
-import useTheme from '@mui/material/styles/useTheme'
+import { ShellContext } from 'contexts/ShellContext'
 
 export interface ChatTranscriptProps extends HTMLAttributes<HTMLDivElement> {
   messageLog: Array<IMessage | InlineMedia>
@@ -16,6 +17,7 @@ export const ChatTranscript = ({
   messageLog,
   userId,
 }: ChatTranscriptProps) => {
+  const { showRoomControls } = useContext(ShellContext)
   const theme = useTheme()
   const boxRef = useRef<HTMLDivElement>(null)
   const [previousMessageLogLength, setPreviousMessageLogLength] = useState(0)
@@ -69,7 +71,9 @@ export const ChatTranscript = ({
         display: 'flex',
         flexDirection: 'column',
         py: transcriptMinPadding,
+        pt: showRoomControls ? theme.spacing(10) : theme.spacing(2),
         px: `max(${transcriptPaddingX}, ${transcriptMinPadding})`,
+        transition: `padding-top ${theme.transitions.duration.short}ms ${theme.transitions.easing.easeInOut}`,
         width: '100%',
       }}
     >

diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
@@ -1,9 +1,9 @@
 import { useContext } from 'react'
 import { useWindowSize } from '@react-hook/window-size'
-import Collapse from '@mui/material/Collapse'
 import Zoom from '@mui/material/Zoom'
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
+import useTheme from '@mui/material/styles/useTheme'
 import { v4 as uuid } from 'uuid'
 
 import { rtcConfig } from 'config/rtcConfig'
@@ -40,6 +40,7 @@ export function Room({
   password,
   userId,
 }: RoomProps) {
+  const theme = useTheme()
   const settingsContext = useContext(SettingsContext)
   const { showActiveTypingStatus } = settingsContext.getUserSettings()
   const {
@@ -96,14 +97,16 @@ export function Room({
             overflow: 'auto',
           }}
         >
-          <Collapse in={showRoomControls}>
+          <Zoom in={showRoomControls}>
             <Box
               sx={{
                 alignItems: 'flex-start',
                 display: 'flex',
                 justifyContent: 'center',
-                padding: 1,
-                overflowX: 'auto',
+                overflow: 'visible',
+                height: 0,
+                position: 'relative',
+                top: theme.spacing(1),
               }}
             >
               <RoomAudioControls peerRoom={peerRoom} />
@@ -120,7 +123,7 @@ export function Room({
               </Zoom>
               <RoomHideRoomControls />
             </Box>
-          </Collapse>
+          </Zoom>
           <Box
             sx={{
               display: 'flex',
@@ -150,7 +153,7 @@ export function Room({
                 <ChatTranscript
                   messageLog={messageLog}
                   userId={userId}
-                  className="grow overflow-auto px-4"
+                  className="grow overflow-auto"
                 />
                 <Divider />
                 <Box>