fix: layout responsiveness

mui · May 27, 2024 · 5e51113 · 5e51113
1 parent c93ad68
commit 5e51113
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx b/docs/data/joy/getting-started/templates/messages/components/ChatsPane.tsx
@@ -24,7 +24,7 @@ export default function ChatsPane(props: ChatsPaneProps) {
       sx={{
         borderRight: '1px solid',
         borderColor: 'divider',
-        height: 'calc(100dvh - var(--Header-height))',
+        height: { sm: 'calc(100dvh - var(--Header-height))', md: '100dvh' },
         overflowY: 'auto',
       }}
     >

diff --git a/docs/data/joy/getting-started/templates/messages/components/Header.tsx b/docs/data/joy/getting-started/templates/messages/components/Header.tsx
@@ -9,7 +9,7 @@ export default function Header() {
   return (
     <Sheet
       sx={{
-        display: { xs: 'flex', sm: 'none' },
+        display: { sm: 'flex', md: 'none' },
         alignItems: 'center',
         justifyContent: 'space-between',
         position: 'fixed',

diff --git a/docs/data/joy/getting-started/templates/messages/components/MessagesPane.tsx b/docs/data/joy/getting-started/templates/messages/components/MessagesPane.tsx
@@ -24,7 +24,7 @@ export default function MessagesPane(props: MessagesPaneProps) {
   return (
     <Sheet
       sx={{
-        height: { xs: 'calc(100dvh - var(--Header-height))', lg: '100dvh' },
+        height: { xs: 'calc(100dvh - var(--Header-height))', md: '100dvh' },
         display: 'flex',
         flexDirection: 'column',
         backgroundColor: 'background.level1',

diff --git a/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx b/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx
@@ -14,7 +14,7 @@ export default function MyProfile() {
         flex: 1,
         width: '100%',
         mx: 'auto',
-        pt: { xs: 'var(--Header-height)', sm: 0 },
+        pt: { xs: 'var(--Header-height)', md: 0 },
         display: 'grid',
         gridTemplateColumns: {
           xs: '1fr',