Improve spacing and height of Chats page

app/soapbox/features/chats/components/chat-list-item.tsx

@@ -18,7 +18,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, chatSilence, onC
       key={chat.id}
       type='button'
       onClick={() => onClick(chat)}
-      className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800 focus:shadow-inset-ring'
+      className='p-2 w-full flex flex-col rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 focus:shadow-inset-ring'
       data-testid='chat'
     >
       <HStack alignItems='center' justifyContent='between' space={2} className='w-full'>

app/soapbox/features/chats/components/chat-list.tsx

@@ -61,7 +61,11 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
             endReached={handleLoadMore}
             itemContent={(_index, chat) => {
               const chatSilence = chatSilences?.find((chatSilence) => String(chatSilence.target_account_id) === chat.account.id);
-              return <ChatListItem chat={chat} onClick={onClickChat} chatSilence={chatSilence} />;
+              return (
+                <div className='px-2'>
+                  <ChatListItem chat={chat} onClick={onClickChat} chatSilence={chatSilence} />
+                </div>
+              );
             }}
             components={{
               ScrollSeekPlaceholder: () => <PlaceholderChat />,

app/soapbox/features/chats/components/chat-page/chat-page.tsx

@@ -1,7 +1,7 @@
 import classNames from 'clsx';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
-import { Card, Stack } from 'soapbox/components/ui';
+import { Stack } from 'soapbox/components/ui';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 
 import ChatPageMain from './components/chat-page-main';
@@ -10,11 +10,41 @@ import ChatPageSidebar from './components/chat-page-sidebar';
 const ChatPage = () => {
   const { chat } = useChatContext();
 
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<string | number>('100%');
+
+  const calculateHeight = () => {
+    if (!containerRef.current) {
+      return null;
+    }
+
+    const { top } = containerRef.current.getBoundingClientRect();
+    const fullHeight = document.body.offsetHeight;
+
+    setHeight(fullHeight - top);
+  };
+
+  useEffect(() => {
+    calculateHeight();
+  }, [containerRef.current]);
+
+  useEffect(() => {
+    window.addEventListener('resize', calculateHeight);
+
+    return () => {
+      window.removeEventListener('resize', calculateHeight);
+    };
+  }, []);
+
   return (
-    <Card className='p-0 h-[calc(100vh-109px)] sm:h-[calc(100vh-176px)] overflow-hidden' variant='rounded'>
+    <div
+      ref={containerRef}
+      style={{ height }}
+      className='h-screen bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden sm:rounded-t-xl'
+    >
       <div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
         <Stack
-          className={classNames('col-span-9 sm:col-span-3 p-6 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
+          className={classNames('col-span-9 sm:col-span-3 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
             'hidden sm:block': chat,
           })}
         >
@@ -28,7 +58,7 @@ const ChatPage = () => {
           <ChatPageMain />
         </Stack>
       </div>
-    </Card>
+    </div>
   );
 };
 

app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx

@@ -72,13 +72,15 @@ const ChatPageMain = () => {
     <Stack className='h-full overflow-hidden'>
       <HStack alignItems='center' justifyContent='between' space={2} className='px-4 py-2 w-full'>
         <HStack alignItems='center' space={2} className='overflow-hidden'>
-          <IconButton
+          <HStack alignItems='center'>
-            src={require('@tabler/icons/arrow-left.svg')}
+            <IconButton
-            className='sm:hidden h-7 w-7'
+              src={require('@tabler/icons/arrow-left.svg')}
-            onClick={() => setChat(null)}
+              className='sm:hidden h-7 w-7 mr-2 sm:mr-0'
-          />
+              onClick={() => setChat(null)}
+            />
 
-          <Avatar src={chat.account?.avatar} size={40} className='flex-none' />
+            <Avatar src={chat.account?.avatar} size={40} className='flex-none' />
+          </HStack>
 
           <Stack alignItems='start' className='overflow-hidden'>
             <div className='flex items-center space-x-1 flex-grow w-full'>

app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx

@@ -45,15 +45,17 @@ const ChatPageSidebar = () => {
   const handleClickChat = (chat: IChat) => setChat(chat);
 
   return (
-    <Stack space={6} className='h-full'>
+    <Stack space={4} className='h-full'>
-      <CardTitle title={intl.formatMessage(messages.title)} />
+      <Stack space={4} className='px-4 pt-4'>
+        <CardTitle title={intl.formatMessage(messages.title)} />
 
-      <AccountSearch
+        <AccountSearch
-        placeholder={intl.formatMessage(messages.searchPlaceholder)}
+          placeholder={intl.formatMessage(messages.searchPlaceholder)}
-        onSelected={handleSuggestion}
+          onSelected={handleSuggestion}
-      />
+        />
+      </Stack>
 
-      <Stack className='-mx-3 flex-grow h-full'>
+      <Stack className='flex-grow h-full'>
         <ChatList onClickChat={handleClickChat} />
       </Stack>
     </Stack>

app/soapbox/features/chats/components/chat-widget.tsx

@@ -10,6 +10,9 @@ const ChatWidget = () => {
   const account = useOwnAccount();
   const dispatch = useAppDispatch();
 
+  const path = location.pathname;
+  const shouldHideWidget = Boolean(path.match(/^\/chats/));
+
   useEffect(() => {
     const disconnect = dispatch(connectDirectStream());
 
@@ -18,7 +21,7 @@ const ChatWidget = () => {
     });
   }, []);
 
-  if (!account?.chats_onboarded) {
+  if (!account?.chats_onboarded || shouldHideWidget) {
     return null;
   }
 

app/soapbox/pages/chats-page.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 /** Custom layout for chats on desktop. */
 const ChatsPage: React.FC = ({ children }) => {
   return (
-    <div className='md:col-span-12 lg:col-span-9'>
+    <div className='md:col-span-12 lg:col-span-9 pb-16 sm:pb-0'>
       {children}
     </div>
   );