From e73b0777e3b7dadd0801efbed60b484e768fa11e Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 18 Sep 2025 00:22:49 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1(frontend)=20fix=20permission=20mod?=
 =?UTF-8?q?al=20width=20on=20mobile=20screens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adjust permission modal dimensions to properly fit mobile viewports
and prevent poor responsive user experience. Ensures modal content
remains accessible and readable across different screen sizes.
---
 src/frontend/src/features/rooms/components/Join.tsx        | 2 +-
 src/frontend/src/features/rooms/components/Permissions.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/Join.tsx b/src/frontend/src/features/rooms/components/Join.tsx
index b367c80b..b11c15b6 100644
--- a/src/frontend/src/features/rooms/components/Join.tsx
+++ b/src/frontend/src/features/rooms/components/Join.tsx
@@ -638,7 +638,7 @@ export const Join = ({
                       <Button
                         size="sm"
                         variant="tertiary"
-                        onPress={() => openPermissionsDialog()}
+                        onPress={() => openPermissionsDialog('videoinput')}
                       >
                         {t(`permissionsButton.${permissionsButtonLabel}`)}
                       </Button>
diff --git a/src/frontend/src/features/rooms/components/Permissions.tsx b/src/frontend/src/features/rooms/components/Permissions.tsx
index 178eb5d8..a81a93a6 100644
--- a/src/frontend/src/features/rooms/components/Permissions.tsx
+++ b/src/frontend/src/features/rooms/components/Permissions.tsx
@@ -80,13 +80,17 @@ export const Permissions = () => {
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
+          flexDirection: 'column',
+          md: {
+            flexDirection: 'row',
+          },
         })}
       >
         <img
           src="/assets/camera_mic_permission.svg"
           alt=""
           className={css({
-            minWidth: '290px',
+            width: '100%',
             minHeight: '290px',
             maxWidth: '290px',
           })}