From e85a8697331eb5f586bc2648dc935963b0762e23 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Sun, 30 Jan 2022 10:41:18 +0530
Subject: [PATCH] Add max width for room and space options menu

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/molecules/room-options/RoomOptions.jsx   | 4 ++--
 src/app/molecules/space-options/SpaceOptions.jsx | 4 ++--
 src/app/organisms/room/RoomSettings.jsx          | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/molecules/room-options/RoomOptions.jsx b/src/app/molecules/room-options/RoomOptions.jsx
index 83a94827..734f93bd 100644
--- a/src/app/molecules/room-options/RoomOptions.jsx
+++ b/src/app/molecules/room-options/RoomOptions.jsx
@@ -38,7 +38,7 @@ function RoomOptions({ roomId, afterOptionSelect }) {
   };
 
   return (
-    <>
+    <div style={{ maxWidth: '256px' }}>
       <MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
       <MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>Mark as read</MenuItem>
       <MenuItem
@@ -51,7 +51,7 @@ function RoomOptions({ roomId, afterOptionSelect }) {
       <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={handleLeaveClick}>Leave</MenuItem>
       <MenuHeader>Notification</MenuHeader>
       <RoomNotification roomId={roomId} />
-    </>
+    </div>
   );
 }
 
diff --git a/src/app/molecules/space-options/SpaceOptions.jsx b/src/app/molecules/space-options/SpaceOptions.jsx
index cfa8012d..a1f0c6bb 100644
--- a/src/app/molecules/space-options/SpaceOptions.jsx
+++ b/src/app/molecules/space-options/SpaceOptions.jsx
@@ -44,7 +44,7 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
   };
 
   return (
-    <>
+    <div style={{ maxWidth: 'calc(var(--navigation-drawer-width) - var(--sp-normal))' }}>
       <MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
       <MenuItem
         onClick={handlePinClick}
@@ -67,7 +67,7 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
       >
         Leave
       </MenuItem>
-    </>
+    </div>
   );
 }
 
diff --git a/src/app/organisms/room/RoomSettings.jsx b/src/app/organisms/room/RoomSettings.jsx
index 4c4fc2fa..d5e5c165 100644
--- a/src/app/organisms/room/RoomSettings.jsx
+++ b/src/app/organisms/room/RoomSettings.jsx
@@ -170,7 +170,7 @@ function RoomSettings({ roomId }) {
                   <span style={{ color: 'var(--tc-surface-low)' }}> — room settings</span>
                 </Text>
               </TitleWrapper>
-              <RawIcon src={ChevronTopIC} />
+              <RawIcon size="small" src={ChevronTopIC} />
             </button>
           </Header>
           <RoomProfile roomId={roomId} />