From 9dc1a0caec913236dc74c94315a8fc44b7c6d78b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 19 Sep 2022 15:12:18 -0500
Subject: [PATCH] ChatPage: allow selecting a chat on mobile

---
 .../chats/components/chat-page/chat-page.tsx        | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-page/chat-page.tsx b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
index 7284309fc..9924b8a5a 100644
--- a/app/soapbox/features/chats/components/chat-page/chat-page.tsx
+++ b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
@@ -1,21 +1,30 @@
+import classNames from 'clsx';
 import React from 'react';
 
 import { Card, Stack } from 'soapbox/components/ui';
+import { useChatContext } from 'soapbox/contexts/chat-context';
 
 import ChatPageMain from './components/chat-page-main';
 import ChatPageSidebar from './components/chat-page-sidebar';
 
 const ChatPage = () => {
+  const { chat } = useChatContext();
+
   return (
     <Card className='p-0 h-[calc(100vh-109px)] sm:h-[calc(100vh-176px)] overflow-hidden' variant='rounded'>
       <div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
         <Stack
-          className='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 p-6 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
+            'hidden sm:block': chat,
+          })}
         >
           <ChatPageSidebar />
         </Stack>
 
-        <Stack className='hidden sm:block col-span-6 h-full overflow-hidden'>
+        <Stack className={classNames('col-span-9 sm:col-span-6 h-full overflow-hidden', {
+          'hidden sm:block': !chat,
+        })}
+        >
           <ChatPageMain />
         </Stack>
       </div>