From 66f481a0b9cb63f37dfeaa4ab13c5af2486a7cf0 Mon Sep 17 00:00:00 2001
From: matty <matty@nicecrew.digital>
Date: Sat, 24 Jan 2026 16:35:37 +0000
Subject: [PATCH] fix chat navigation on mobile devices

---
 .../chats/components/chat-page/chat-page.tsx      | 15 +++++++++------
 .../chat-page/components/chat-page-main.tsx       |  8 ++++----
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx b/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx
index 0840c5615..9139254c8 100644
--- a/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx
@@ -1,17 +1,20 @@
-import { Outlet, useMatches } from '@tanstack/react-router';
+import { Outlet, useMatch } from '@tanstack/react-router';
 import clsx from 'clsx';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import Stack from 'pl-fe/components/ui/stack';
+import { chatRoute, chatsNewRoute, chatsSettingsRoute, shoutboxRoute } from 'pl-fe/features/ui/router';
 
 import ChatPageSidebar from './components/chat-page-sidebar';
 
-const SIDEBAR_HIDDEN_PATHS = ['/chats/settings', '/chats/new', '/chats/:chatId', '/chats/shoutbox'];
-
 const ChatPage: React.FC = () => {
-  const isSidebarHidden = useMatches({
-    select: (matches) => SIDEBAR_HIDDEN_PATHS.some((path) => matches.some(match => match.pathname === path)),
-  });
+  const chatMatch = useMatch({ from: chatRoute.id, shouldThrow: false });
+  const onChatRoute = !!chatMatch?.params?.chatId;
+  const onNewRoute = !!useMatch({ from: chatsNewRoute.id, shouldThrow: false });
+  const onSettingsRoute = !!useMatch({ from: chatsSettingsRoute.id, shouldThrow: false });
+  const onShoutboxRoute = !!useMatch({ from: shoutboxRoute.id, shouldThrow: false });
+
+  const isSidebarHidden = onChatRoute || onNewRoute || onSettingsRoute || onShoutboxRoute;
 
   const containerRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<string | number>('100%');
diff --git a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
index babe9abbf..28524f2eb 100644
--- a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -120,12 +120,12 @@ const ChatPageMain = () => {
   return (
     <Stack className='h-full overflow-hidden'>
       <HStack alignItems='center' justifyContent='between' space={2} className='w-full p-4'>
-        <HStack alignItems='center' space={2}>
-          <HStack alignItems='center'>
+        <HStack alignItems='center' space={2} className='overflow-hidden'>
+          <HStack alignItems='center' className='flex-none'>
             <IconButton
               src={require('@phosphor-icons/core/regular/arrow-left.svg')}
               className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
-              onClick={() => navigate({ to: '/chats/{-$chatId}' })}
+              onClick={() => navigate({ to: '/chats' })}
             />
 
             <Link to='/@{$username}' params={{ username: chat.account.acct }}>
@@ -133,7 +133,7 @@ const ChatPageMain = () => {
             </Link>
           </HStack>
 
-          <Stack alignItems='start' className='h-11 overflow-hidden'>
+          <Stack alignItems='start' className='h-11 min-w-0 overflow-hidden'>
             <div className='flex w-full grow items-center space-x-1'>
               <Link to='/@{$username}' params={{ username: chat.account.acct }}>
                 <Text weight='bold' size='sm' align='left' truncate>