From 6e2a7f0ca6b91be0a22fa2e13d0ff190234f2ca8 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 24 Aug 2026 11:55:32 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1(frontend)=20stack=20idle=20modal?=
 =?UTF-8?q?=20buttons=20in=20a=20column=20on=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrap the buttons in the idle modal so they stack vertically on
mobile viewports.

The horizontal layout was cramped on small screens; a column layout
gives each button a comfortable touch target and reads more
naturally on narrow displays.
---
 CHANGELOG.md                                           |  1 +
 .../rooms/livekit/components/IsIdleDisconnectModal.tsx | 10 +++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index da0062cd..76bfa435 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to
 ### Changed
 
 - 📱(frontend) collapse mobile control bar items on narrow viewports
+- 📱(frontend) stack idle modal buttons in a column on mobile
 
 ## [1.28.0] - 2026-08-24
 
diff --git a/src/frontend/src/features/rooms/livekit/components/IsIdleDisconnectModal.tsx b/src/frontend/src/features/rooms/livekit/components/IsIdleDisconnectModal.tsx
index 259e8f31..4e9adf0c 100644
--- a/src/frontend/src/features/rooms/livekit/components/IsIdleDisconnectModal.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/IsIdleDisconnectModal.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { css } from '@/styled-system/css'
 import { useSnapshot } from 'valtio'
 import { connectionObserverStore } from '@/stores/connectionObserver'
-import { HStack } from '@/styled-system/jsx'
+import { Stack } from '@/styled-system/jsx'
 import { useEffect, useRef, useState } from 'react'
 import { navigateTo } from '@/navigation/navigateTo'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
@@ -134,7 +134,11 @@ export const IsIdleDisconnectModal = () => {
             </H>
             <Description />
             <Settings />
-            <HStack marginTop="2rem">
+            <Stack
+              direction={{ base: 'column', xsm: 'row' }}
+              align={{ base: 'stretch', xsm: 'center' }}
+              marginTop="2rem"
+            >
               <Button
                 onPress={() => {
                   connectionObserverStore.isIdleDisconnectModalOpen = false
@@ -148,7 +152,7 @@ export const IsIdleDisconnectModal = () => {
               <Button onPress={close} size="sm" variant="primary">
                 {t('stayButton')}
               </Button>
-            </HStack>
+            </Stack>
           </div>
         )
       }}