From 9f0d0651bfa2ac1eb96689efae662f2903e41850 Mon Sep 17 00:00:00 2001
From: 7w1 <noreply@sl.sable.moe>
Date: Mon, 18 May 2026 16:44:12 -0500
Subject: [PATCH] fix: tablet layouts taking full screen

---
 .changeset/fix-tablet-layout-issue.md    | 5 +++++
 src/app/features/room/MembersDrawer.tsx  | 7 +++----
 src/app/pages/client/direct/Direct.tsx   | 5 ++---
 src/app/pages/client/explore/Explore.tsx | 5 ++---
 src/app/pages/client/home/Home.tsx       | 5 ++---
 src/app/pages/client/inbox/Inbox.tsx     | 5 ++---
 src/app/pages/client/space/Space.tsx     | 4 ++--
 7 files changed, 18 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/fix-tablet-layout-issue.md

diff --git a/.changeset/fix-tablet-layout-issue.md b/.changeset/fix-tablet-layout-issue.md
new file mode 100644
index 000000000..9efccf079
--- /dev/null
+++ b/.changeset/fix-tablet-layout-issue.md
@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix tablet layouts having the sidebar fill up the screen.
diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx
index 3aeb18c15..779003437 100644
--- a/src/app/features/room/MembersDrawer.tsx
+++ b/src/app/features/room/MembersDrawer.tsx
@@ -57,7 +57,6 @@ import { useSableCosmetics } from '$hooks/useSableCosmetics';
 import { formatCompactNumber } from '$utils/formatCompactNumber';
 import * as css from './MembersDrawer.css';
 import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer';
-import { mobileOrTablet } from '$utils/user-agent';
 import { useScreenSizeContext, ScreenSize } from '$hooks/useScreenSize';
 
 type MemberDrawerHeaderProps = {
@@ -317,7 +316,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
   }, [memberSidebarWidth]);
 
   const screenSize = useScreenSizeContext();
-  const isMobile = mobileOrTablet() || screenSize === ScreenSize.Mobile;
+  const isMobile = screenSize === ScreenSize.Mobile;
   const hideText = curWidth <= 80 && !isMobile;
   return (
     <Box
@@ -326,12 +325,12 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
       direction="Column"
       style={{
         position: 'relative',
-        width: !mobileOrTablet() ? toRem(curWidth) : '100%',
+        width: isMobile ? '100%' : toRem(curWidth),
       }}
     >
       <MemberDrawerHeader room={room} hideText={hideText} />
       <Box className={css.MemberDrawerContentBase} grow="Yes">
-        {!mobileOrTablet() && (
+        {!isMobile && (
           <SidebarResizer
             setCurWidth={setCurWidth}
             sidebarWidth={memberSidebarWidth}
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index 81dc6181d..2a81b849d 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -54,7 +54,6 @@ import {
 import { useDirectCreateSelected } from '$hooks/router/useDirectSelected';
 import { useDirectRooms } from './useDirectRooms';
 import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer';
-import { mobileOrTablet } from '$utils/user-agent';
 import { useScreenSizeContext, ScreenSize } from '$hooks/useScreenSize';
 
 type DirectMenuProps = {
@@ -256,7 +255,7 @@ export function Direct() {
   );
 
   const screenSize = useScreenSizeContext();
-  const isMobile = mobileOrTablet() || screenSize === ScreenSize.Mobile;
+  const isMobile = screenSize === ScreenSize.Mobile;
   const hideText = curWidth <= 80 && !isMobile;
 
   return (
@@ -367,7 +366,7 @@ export function Direct() {
           </PageNavContent>
         )}
       </PageNav>
-      {!mobileOrTablet() && (
+      {!isMobile && (
         <SidebarResizer
           setCurWidth={setCurWidth}
           sidebarWidth={roomSidebarWidth}
diff --git a/src/app/pages/client/explore/Explore.tsx b/src/app/pages/client/explore/Explore.tsx
index bfc72709e..bf7626924 100644
--- a/src/app/pages/client/explore/Explore.tsx
+++ b/src/app/pages/client/explore/Explore.tsx
@@ -32,7 +32,6 @@ import { stopPropagation } from '$utils/keyboard';
 import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer';
 import { settingsAtom } from '$state/settings';
 import { useSetting } from '$state/hooks/settings';
-import { mobileOrTablet } from '$utils/user-agent';
 import { getMxIdServer } from '$utils/mxIdHelper';
 import { useScreenSizeContext, ScreenSize } from '$hooks/useScreenSize';
 
@@ -178,7 +177,7 @@ export function Explore() {
     setCurWidth(roomSidebarWidth);
   }, [roomSidebarWidth]);
   const screenSize = useScreenSizeContext();
-  const isMobile = mobileOrTablet() || screenSize === ScreenSize.Mobile;
+  const isMobile = screenSize === ScreenSize.Mobile;
   const hideText = curWidth <= 80 && !isMobile;
 
   return (
@@ -312,7 +311,7 @@ export function Explore() {
           </Box>
         </PageNavContent>
       </PageNav>
-      {!mobileOrTablet() && (
+      {!isMobile && (
         <SidebarResizer
           setCurWidth={setCurWidth}
           sidebarWidth={roomSidebarWidth}
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index cddcefbb0..b7739d529 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -63,7 +63,6 @@ import { UseStateProvider } from '$components/UseStateProvider';
 import { JoinAddressPrompt } from '$components/join-address-prompt';
 import { useHomeRooms } from './useHomeRooms';
 import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer';
-import { mobileOrTablet } from '$utils/user-agent';
 import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 
 type HomeMenuProps = {
@@ -263,7 +262,7 @@ export function Home() {
   );
 
   const screenSize = useScreenSizeContext();
-  const isMobile = mobileOrTablet() || screenSize === ScreenSize.Mobile;
+  const isMobile = screenSize === ScreenSize.Mobile;
   const hideText = curWidth <= 80 && !isMobile;
 
   return (
@@ -454,7 +453,7 @@ export function Home() {
           </PageNavContent>
         )}
       </PageNav>
-      {!mobileOrTablet() && (
+      {!isMobile && (
         <SidebarResizer
           setCurWidth={setCurWidth}
           sidebarWidth={roomSidebarWidth}
diff --git a/src/app/pages/client/inbox/Inbox.tsx b/src/app/pages/client/inbox/Inbox.tsx
index 5e3926cce..07e69b7f5 100644
--- a/src/app/pages/client/inbox/Inbox.tsx
+++ b/src/app/pages/client/inbox/Inbox.tsx
@@ -11,7 +11,6 @@ import { SidebarResizer } from '$pages/client/sidebar/SidebarResizer';
 import { useSetting } from '$state/hooks/settings';
 import { settingsAtom } from '$state/settings';
 import { useEffect, useState } from 'react';
-import { mobileOrTablet } from '$utils/user-agent';
 import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 
 function InvitesNavItem({ hideText }: { hideText?: boolean }) {
@@ -62,7 +61,7 @@ export function Inbox() {
     setCurWidth(roomSidebarWidth);
   }, [roomSidebarWidth]);
   const screenSize = useScreenSizeContext();
-  const isMobile = mobileOrTablet() || screenSize === ScreenSize.Mobile;
+  const isMobile = screenSize === ScreenSize.Mobile;
   const hideText = curWidth <= 80 && !isMobile;
 
   return (
@@ -118,7 +117,7 @@ export function Inbox() {
           </Box>
         </PageNavContent>
       </PageNav>
-      {!mobileOrTablet() && (
+      {!isMobile && (
         <SidebarResizer
           setCurWidth={setCurWidth}
           sidebarWidth={roomSidebarWidth}
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index e30634310..32ff7e347 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -857,7 +857,7 @@ export function Space() {
   }, [lastRoomId, spaceIdOrAlias, mx, navigate]);
 
   const screenSize = useScreenSizeContext();
-  const isMobile = mobileOrTablet() || screenSize === ScreenSize.Mobile;
+  const isMobile = screenSize === ScreenSize.Mobile;
   const hideText = curWidth <= 80 && !isMobile;
   return (
     <Box
@@ -1048,7 +1048,7 @@ export function Space() {
           </PageNavContent>
         </SwipeableOverlayWrapper>
       </PageNav>
-      {!mobileOrTablet() && (
+      {!isMobile && (
         <SidebarResizer
           setCurWidth={setCurWidth}
           sidebarWidth={roomSidebarWidth}