From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 4 Aug 2025 14:59:12 +0000 (+0530)
Subject: Revert "Fix menus congestion and improve thread reply layout (#2402)" (#2409)
X-Git-Tag: v4.9.0~13
X-Git-Url: https://git.wafflesoft.org/?a=commitdiff_plain;h=ccf10fc20cadde14868e27f913414b251dbb75f2;p=rainny.git

Revert "Fix menus congestion and improve thread reply layout (#2402)" (#2409)

This reverts commit d8d4714370fbe6c6ea6f6889ba4a5aae505220b8.
---

diff --git a/src/app/components/BackupRestore.tsx b/src/app/components/BackupRestore.tsx
index 8b3732b..068f437 100644
--- a/src/app/components/BackupRestore.tsx
+++ b/src/app/components/BackupRestore.tsx
@@ -203,8 +203,12 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <Menu style={{ padding: config.space.S200 }}>
-                  <Box direction="Column" gap="200">
+                <Menu
+                  style={{
+                    padding: config.space.S100,
+                  }}
+                >
+                  <Box direction="Column" gap="100">
                     <Box direction="Column" gap="200">
                       <InfoCard
                         variant="SurfaceVariant"
diff --git a/src/app/components/HexColorPickerPopOut.tsx b/src/app/components/HexColorPickerPopOut.tsx
index c0b4eb7..d8fb4bc 100644
--- a/src/app/components/HexColorPickerPopOut.tsx
+++ b/src/app/components/HexColorPickerPopOut.tsx
@@ -30,7 +30,7 @@ export function HexColorPickerPopOut({ picker, onRemove, children }: HexColorPic
         >
           <Menu
             style={{
-              padding: config.space.S200,
+              padding: config.space.S100,
               borderRadius: config.radii.R500,
               overflow: 'initial',
             }}
diff --git a/src/app/components/JoinRulesSwitcher.tsx b/src/app/components/JoinRulesSwitcher.tsx
index 835c1bc..9507317 100644
--- a/src/app/components/JoinRulesSwitcher.tsx
+++ b/src/app/components/JoinRulesSwitcher.tsx
@@ -109,7 +109,7 @@ export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
           }}
         >
           <Menu>
-            <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+            <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
               {rules.map((rule) => (
                 <MenuItem
                   key={rule}
diff --git a/src/app/components/ManualVerification.tsx b/src/app/components/ManualVerification.tsx
index 9c92ac0..03f3e71 100644
--- a/src/app/components/ManualVerification.tsx
+++ b/src/app/components/ManualVerification.tsx
@@ -78,7 +78,7 @@ export function ManualVerificationMethodSwitcher({
             }}
           >
             <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
                 <MenuItem
                   size="300"
                   variant="Surface"
diff --git a/src/app/components/MemberSortMenu.tsx b/src/app/components/MemberSortMenu.tsx
index 6d1fd97..d77c80c 100644
--- a/src/app/components/MemberSortMenu.tsx
+++ b/src/app/components/MemberSortMenu.tsx
@@ -23,7 +23,7 @@ export function MemberSortMenu({ selected, onSelect, requestClose }: MemberSortM
         escapeDeactivates: stopPropagation,
       }}
     >
-      <Menu style={{ padding: config.space.S200 }}>
+      <Menu style={{ padding: config.space.S100 }}>
         {memberSortMenu.map((menuItem, index) => (
           <MenuItem
             key={menuItem.name}
diff --git a/src/app/components/MembershipFilterMenu.tsx b/src/app/components/MembershipFilterMenu.tsx
index f50acd2..bf17677 100644
--- a/src/app/components/MembershipFilterMenu.tsx
+++ b/src/app/components/MembershipFilterMenu.tsx
@@ -27,7 +27,7 @@ export function MembershipFilterMenu({
         escapeDeactivates: stopPropagation,
       }}
     >
-      <Menu style={{ padding: config.space.S200 }}>
+      <Menu style={{ padding: config.space.S100 }}>
         {membershipFilterMenu.map((menuItem, index) => (
           <MenuItem
             key={menuItem.name}
diff --git a/src/app/components/RoomNotificationSwitcher.tsx b/src/app/components/RoomNotificationSwitcher.tsx
index d4338d3..7ce9156 100644
--- a/src/app/components/RoomNotificationSwitcher.tsx
+++ b/src/app/components/RoomNotificationSwitcher.tsx
@@ -70,7 +70,7 @@ export function RoomNotificationModeSwitcher({
   return (
     <PopOut
       anchor={menuCords}
-      offset={8}
+      offset={5}
       position="Right"
       align="Start"
       content={
@@ -86,7 +86,7 @@ export function RoomNotificationModeSwitcher({
           }}
         >
           <Menu>
-            <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+            <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
               {modes.map((mode) => (
                 <MenuItem
                   key={mode}
diff --git a/src/app/components/editor/Toolbar.tsx b/src/app/components/editor/Toolbar.tsx
index 0ac416f..17ba6bc 100644
--- a/src/app/components/editor/Toolbar.tsx
+++ b/src/app/components/editor/Toolbar.tsx
@@ -155,7 +155,7 @@ export function HeadingBlockButton() {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Menu style={{ padding: config.space.S200 }}>
+          <Menu style={{ padding: config.space.S100 }}>
             <Box gap="100">
               <TooltipProvider
                 tooltip={<BtnTooltip text="Heading 1" shortCode={`${modKey} + 1`} />}
diff --git a/src/app/components/image-pack-view/UsageSwitcher.tsx b/src/app/components/image-pack-view/UsageSwitcher.tsx
index 1878beb..1a1eb43 100644
--- a/src/app/components/image-pack-view/UsageSwitcher.tsx
+++ b/src/app/components/image-pack-view/UsageSwitcher.tsx
@@ -33,7 +33,7 @@ export function UsageSelector({ selected, onChange }: UsageSelectorProps) {
   );
 
   return (
-    <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+    <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
       {allUsages.map((usage) => (
         <MenuItem
           key={getUsageStr(usage)}
diff --git a/src/app/components/message/Reply.css.ts b/src/app/components/message/Reply.css.ts
index 7e5540f..0679939 100644
--- a/src/app/components/message/Reply.css.ts
+++ b/src/app/components/message/Reply.css.ts
@@ -7,6 +7,7 @@ export const ReplyBend = style({
 
 export const ThreadIndicator = style({
   opacity: config.opacity.P300,
+  gap: toRem(2),
 
   selectors: {
     'button&': {
@@ -18,6 +19,11 @@ export const ThreadIndicator = style({
   },
 });
 
+export const ThreadIndicatorIcon = style({
+  width: toRem(14),
+  height: toRem(14),
+});
+
 export const Reply = style({
   marginBottom: toRem(1),
   minWidth: 0,
diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index dc92bf8..563d1bf 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -38,16 +38,9 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
 );
 
 export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
-  <Box
-    shrink="No"
-    className={css.ThreadIndicator}
-    alignItems="Center"
-    gap="100"
-    {...props}
-    ref={ref}
-  >
-    <Icon size="50" src={Icons.Thread} />
-    <Text size="L400">Thread</Text>
+  <Box className={css.ThreadIndicator} alignItems="Center" {...props} ref={ref}>
+    <Icon className={css.ThreadIndicatorIcon} src={Icons.Message} />
+    <Text size="T200">Threaded reply</Text>
   </Box>
 ));
 
@@ -104,7 +97,7 @@ export const Reply = as<'div', ReplyProps>(
     const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
 
     return (
-      <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
+      <Box direction="Column" alignItems="Start" {...props} ref={ref}>
         {threadRootId && (
           <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
         )}
diff --git a/src/app/components/power/PowerSelector.tsx b/src/app/components/power/PowerSelector.tsx
index 9e7eb81..2b3b48c 100644
--- a/src/app/components/power/PowerSelector.tsx
+++ b/src/app/components/power/PowerSelector.tsx
@@ -16,14 +16,13 @@ export const PowerSelector = forwardRef<HTMLDivElement, PowerSelectorProps>(
       ref={ref}
       style={{
         maxHeight: '75vh',
-        maxWidth: toRem(200),
-        width: '100vw',
+        maxWidth: toRem(300),
         display: 'flex',
       }}
     >
       <Box grow="Yes">
         <Scroll size="0" hideTrack visibility="Hover">
-          <div style={{ padding: config.space.S200 }}>
+          <div style={{ padding: config.space.S100 }}>
             {getPowers(powerLevelTags).map((power) => {
               const selected = value === power;
               const tag = powerLevelTags[power];
diff --git a/src/app/components/room-card/RoomCard.tsx b/src/app/components/room-card/RoomCard.tsx
index 8c65f2f..34a7e24 100644
--- a/src/app/components/room-card/RoomCard.tsx
+++ b/src/app/components/room-card/RoomCard.tsx
@@ -273,7 +273,7 @@ export const RoomCard = as<'div', RoomCardProps>(
             variant="Secondary"
             size="300"
             disabled={joining}
-            before={joining && <Spinner size="50" variant="Secondary" fill="Solid" />}
+            before={joining && <Spinner size="50" variant="Secondary" fill="Soft" />}
           >
             <Text size="B300" truncate>
               {joining ? 'Joining' : 'Join'}
diff --git a/src/app/features/common-settings/general/RoomHistoryVisibility.tsx b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx
index c6313f1..7b329b1 100644
--- a/src/app/features/common-settings/general/RoomHistoryVisibility.tsx
+++ b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx
@@ -119,7 +119,7 @@ export function RoomHistoryVisibility({ powerLevels }: RoomHistoryVisibilityProp
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <Menu style={{ padding: config.space.S200 }}>
+                <Menu style={{ padding: config.space.S100 }}>
                   {visibilityMenu.map((visibility) => (
                     <MenuItem
                       key={visibility}
diff --git a/src/app/features/common-settings/permissions/Powers.tsx b/src/app/features/common-settings/permissions/Powers.tsx
index 89514eb..b7dadf5 100644
--- a/src/app/features/common-settings/permissions/Powers.tsx
+++ b/src/app/features/common-settings/permissions/Powers.tsx
@@ -63,7 +63,7 @@ function PeekPermissions({ powerLevels, power, permissionGroups, children }: Pee
           >
             <Box grow="Yes" tabIndex={0}>
               <Scroll size="0" hideTrack visibility="Hover">
-                <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+                <Box style={{ padding: config.space.S200 }} direction="Column" gap="400">
                   {permissionGroups.map((group, groupIndex) => (
                     <Box key={groupIndex} direction="Column" gap="100">
                       <Text size="L400">{group.name}</Text>
diff --git a/src/app/features/lobby/HierarchyItemMenu.tsx b/src/app/features/lobby/HierarchyItemMenu.tsx
index d13c913..f126e7c 100644
--- a/src/app/features/lobby/HierarchyItemMenu.tsx
+++ b/src/app/features/lobby/HierarchyItemMenu.tsx
@@ -234,9 +234,9 @@ export function HierarchyItemMenu({
                 escapeDeactivates: stopPropagation,
               }}
             >
-              <Menu style={{ minWidth: toRem(200) }}>
+              <Menu style={{ maxWidth: toRem(150), width: '100vw' }}>
                 {joined && (
-                  <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+                  <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
                     {onTogglePin && (
                       <MenuItem
                         size="300"
@@ -296,7 +296,7 @@ export function HierarchyItemMenu({
                   <Line size="300" variant="Surface" direction="Horizontal" />
                 )}
                 {canEditChild && (
-                  <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+                  <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
                     <SuggestMenuItem item={item} requestClose={handleRequestClose} />
                     <RemoveMenuItem item={item} requestClose={handleRequestClose} />
                   </Box>
diff --git a/src/app/features/lobby/LobbyHeader.tsx b/src/app/features/lobby/LobbyHeader.tsx
index 08f0cc6..bc4c46f 100644
--- a/src/app/features/lobby/LobbyHeader.tsx
+++ b/src/app/features/lobby/LobbyHeader.tsx
@@ -60,8 +60,8 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
     };
 
     return (
-      <Menu ref={ref} style={{ minWidth: toRem(200) }}>
-        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+      <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <MenuItem
             onClick={handleInvite}
             variant="Primary"
@@ -87,7 +87,7 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
           </MenuItem>
         </Box>
         <Line variant="Surface" size="300" />
-        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <UseStateProvider initial={false}>
             {(promptLeave, setPromptLeave) => (
               <>
diff --git a/src/app/features/lobby/SpaceItem.tsx b/src/app/features/lobby/SpaceItem.tsx
index dca81b9..0a4d9de 100644
--- a/src/app/features/lobby/SpaceItem.tsx
+++ b/src/app/features/lobby/SpaceItem.tsx
@@ -271,7 +271,7 @@ function AddRoomButton({ item }: { item: HierarchyItem }) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Menu style={{ padding: config.space.S200 }}>
+          <Menu style={{ padding: config.space.S100 }}>
             <MenuItem
               size="300"
               radii="300"
@@ -333,7 +333,7 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Menu style={{ padding: config.space.S200 }}>
+          <Menu style={{ padding: config.space.S100 }}>
             <MenuItem
               size="300"
               radii="300"
diff --git a/src/app/features/message-search/SearchFilters.tsx b/src/app/features/message-search/SearchFilters.tsx
index e09658a..929dd1e 100644
--- a/src/app/features/message-search/SearchFilters.tsx
+++ b/src/app/features/message-search/SearchFilters.tsx
@@ -74,7 +74,8 @@ function OrderButton({ order, onChange }: OrderButtonProps) {
             <Header size="300" variant="Surface" style={{ padding: `0 ${config.space.S300}` }}>
               <Text size="L400">Sort by</Text>
             </Header>
-            <div style={{ padding: config.space.S200, paddingTop: 0 }}>
+            <Line variant="Surface" size="300" />
+            <div style={{ padding: config.space.S100 }}>
               <MenuItem
                 onClick={() => setOrder()}
                 variant="Surface"
@@ -290,7 +291,7 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
                 </Box>
               </Scroll>
               <Line variant="Surface" size="300" />
-              <Box shrink="No" direction="Column" gap="200" style={{ padding: config.space.S200 }}>
+              <Box shrink="No" direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                 <Button size="300" variant="Secondary" radii="300" onClick={handleSave}>
                   {localSelected && localSelected.length > 0 ? (
                     <Text size="B300">Save ({localSelected.length})</Text>
diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index ddff7bb..bdb8141 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -89,8 +89,8 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     };
 
     return (
-      <Menu ref={ref} style={{ minWidth: toRem(200) }}>
-        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+      <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <MenuItem
             onClick={handleMarkAsRead}
             size="300"
@@ -125,7 +125,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
           </RoomNotificationModeSwitcher>
         </Box>
         <Line variant="Surface" size="300" />
-        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <MenuItem
             onClick={handleInvite}
             variant="Primary"
@@ -161,7 +161,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
           </MenuItem>
         </Box>
         <Line variant="Surface" size="300" />
-        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <UseStateProvider initial={false}>
             {(promptLeave, setPromptLeave) => (
               <>
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 1399ec1..501ee0d 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -543,7 +543,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   >
                     <Icon src={Icons.Cross} size="50" />
                   </IconButton>
-                  <Box direction="Row" gap="200" alignItems="Center">
+                  <Box direction="Column">
                     {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
                     <ReplyLayout
                       userColor={replyUsernameColor}
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index c97b0f3..63e9d55 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -108,8 +108,8 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   };
 
   return (
-    <Menu ref={ref} style={{ minWidth: toRem(200) }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+    <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         <MenuItem
           onClick={handleMarkAsRead}
           size="300"
@@ -144,7 +144,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
         </RoomNotificationModeSwitcher>
       </Box>
       <Line variant="Surface" size="300" />
-      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         <MenuItem
           onClick={handleInvite}
           variant="Primary"
@@ -207,7 +207,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
         </UseStateProvider>
       </Box>
       <Line variant="Surface" size="300" />
-      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         <UseStateProvider initial={false}>
           {(promptLeave, setPromptLeave) => (
             <>
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index 6b854cb..e906a02 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -22,7 +22,6 @@ import {
   as,
   color,
   config,
-  toRem,
 } from 'folds';
 import React, {
   FormEventHandler,
@@ -95,10 +94,10 @@ export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>(
     return (
       <>
         <Box
-          style={{ padding: config.space.S300 }}
+          style={{ padding: config.space.S200 }}
           alignItems="Center"
           justifyContent="Center"
-          gap="300"
+          gap="200"
           {...props}
           ref={ref}
         >
@@ -973,7 +972,7 @@ export const Message = as<'div', MessageProps>(
                         escapeDeactivates: stopPropagation,
                       }}
                     >
-                      <Menu style={{ minWidth: toRem(200) }}>
+                      <Menu>
                         {canSendReaction && (
                           <MessageQuickReactions
                             onReaction={(key, shortcode) => {
@@ -1170,7 +1169,6 @@ export const Event = as<'div', EventProps>(
       hideReadReceipts,
       showDeveloperTools,
       children,
-      style,
       ...props
     },
     ref
@@ -1237,7 +1235,7 @@ export const Event = as<'div', EventProps>(
                         escapeDeactivates: stopPropagation,
                       }}
                     >
-                      <Menu style={{ minWidth: toRem(200), ...style }} {...props} ref={ref}>
+                      <Menu {...props} ref={ref}>
                         <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
                           {!hideReadReceipts && (
                             <MessageReadReceiptItem
diff --git a/src/app/features/room/message/styles.css.ts b/src/app/features/room/message/styles.css.ts
index 1b20efa..b87cb50 100644
--- a/src/app/features/room/message/styles.css.ts
+++ b/src/app/features/room/message/styles.css.ts
@@ -30,7 +30,7 @@ export const MessageQuickReaction = style({
 });
 
 export const MessageMenuGroup = style({
-  padding: config.space.S200,
+  padding: config.space.S100,
 });
 
 export const MessageMenuItemText = style({
diff --git a/src/app/features/settings/devices/Verification.tsx b/src/app/features/settings/devices/Verification.tsx
index cb24ff6..6c7eab1 100644
--- a/src/app/features/settings/devices/Verification.tsx
+++ b/src/app/features/settings/devices/Verification.tsx
@@ -315,7 +315,7 @@ export function DeviceVerificationOptions() {
             }}
           >
             <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
                 <MenuItem
                   variant="Critical"
                   onClick={handleReset}
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index e4f3a86..ed11ec4 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -60,7 +60,7 @@ type ThemeSelectorProps = {
 const ThemeSelector = as<'div', ThemeSelectorProps>(
   ({ themeNames, themes, selected, onSelect, ...props }, ref) => (
     <Menu {...props} ref={ref}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         {themes.map((theme) => (
           <MenuItem
             key={theme.id}
@@ -781,7 +781,7 @@ function SelectMessageLayout() {
             }}
           >
             <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
                 {messageLayoutItems.map((item) => (
                   <MenuItem
                     key={item.layout}
@@ -850,7 +850,7 @@ function SelectMessageSpacing() {
             }}
           >
             <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
                 {messageSpacingItems.map((item) => (
                   <MenuItem
                     key={item.spacing}
diff --git a/src/app/features/settings/notifications/NotificationModeSwitcher.tsx b/src/app/features/settings/notifications/NotificationModeSwitcher.tsx
index 3b81ca3..fe00839 100644
--- a/src/app/features/settings/notifications/NotificationModeSwitcher.tsx
+++ b/src/app/features/settings/notifications/NotificationModeSwitcher.tsx
@@ -92,7 +92,7 @@ export function NotificationModeSwitcher({ pushRule, onChange }: NotificationMod
             }}
           >
             <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
                 {modes.map((mode) => (
                   <MenuItem
                     key={mode}
diff --git a/src/app/pages/auth/ServerPicker.tsx b/src/app/pages/auth/ServerPicker.tsx
index 97d3c6f..a2a7810 100644
--- a/src/app/pages/auth/ServerPicker.tsx
+++ b/src/app/pages/auth/ServerPicker.tsx
@@ -108,10 +108,10 @@ export function ServerPicker({
                 }}
               >
                 <Menu>
-                  <Header size="400" style={{ padding: `0 ${config.space.S300}` }}>
+                  <Header size="300" style={{ padding: `0 ${config.space.S200}` }}>
                     <Text size="L400">Homeserver List</Text>
                   </Header>
-                  <div style={{ padding: config.space.S200, paddingTop: 0 }}>
+                  <div style={{ padding: config.space.S100, paddingTop: 0 }}>
                     {serverList?.map((serverName) => (
                       <MenuItem
                         key={serverName}
diff --git a/src/app/pages/auth/login/PasswordLoginForm.tsx b/src/app/pages/auth/login/PasswordLoginForm.tsx
index 31b94dc..90c305d 100644
--- a/src/app/pages/auth/login/PasswordLoginForm.tsx
+++ b/src/app/pages/auth/login/PasswordLoginForm.tsx
@@ -59,11 +59,11 @@ function UsernameHint({ server }: { server: string }) {
           }}
         >
           <Menu>
-            <Header size="400" style={{ padding: `0 ${config.space.S400}` }}>
+            <Header size="300" style={{ padding: `0 ${config.space.S200}` }}>
               <Text size="L400">Hint</Text>
             </Header>
             <Box
-              style={{ padding: config.space.S400, paddingTop: 0 }}
+              style={{ padding: config.space.S200, paddingTop: 0 }}
               direction="Column"
               tabIndex={0}
               gap="100"
diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx
index 6b7146d..c48dbf5 100644
--- a/src/app/pages/client/ClientRoot.tsx
+++ b/src/app/pages/client/ClientRoot.tsx
@@ -91,7 +91,7 @@ function ClientRootOptions({ mx }: { mx?: MatrixClient }) {
             }}
           >
             <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
                 {mx && (
                   <MenuItem onClick={() => clearCacheAndReload(mx)} size="300" radii="300">
                     <Text as="span" size="T300" truncate>
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index db3b6c8..b6a8de1 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -67,8 +67,8 @@ const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }
   };
 
   return (
-    <Menu ref={ref} style={{ minWidth: toRem(200) }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+    <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         <MenuItem
           onClick={handleMarkAsRead}
           size="300"
diff --git a/src/app/pages/client/explore/Server.tsx b/src/app/pages/client/explore/Server.tsx
index 52aa2bf..48f267c 100644
--- a/src/app/pages/client/explore/Server.tsx
+++ b/src/app/pages/client/explore/Server.tsx
@@ -193,7 +193,7 @@ function ThirdPartyProtocolsSelector({
             <Box
               direction="Column"
               gap="100"
-              style={{ padding: config.space.S200, minWidth: toRem(100) }}
+              style={{ padding: config.space.S100, minWidth: toRem(100) }}
             >
               <Text style={{ padding: config.space.S100 }} size="L400" truncate>
                 Protocols
@@ -313,11 +313,11 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
                     step={1}
                     outlined
                     type="number"
-                    radii="300"
+                    radii="400"
                     aria-label="Per Page Item Limit"
                   />
                 </Box>
-                <Button type="submit" size="300" variant="Primary" radii="300">
+                <Button type="submit" size="300" variant="Primary" radii="400">
                   <Text size="B300">Change Limit</Text>
                 </Button>
               </Box>
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index ff26438..af4164f 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -75,8 +75,8 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
   };
 
   return (
-    <Menu ref={ref} style={{ minWidth: toRem(200) }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+    <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         <MenuItem
           onClick={handleMarkAsRead}
           size="300"
diff --git a/src/app/pages/client/sidebar/DirectTab.tsx b/src/app/pages/client/sidebar/DirectTab.tsx
index 7cb1bf4..bd8090d 100644
--- a/src/app/pages/client/sidebar/DirectTab.tsx
+++ b/src/app/pages/client/sidebar/DirectTab.tsx
@@ -42,8 +42,8 @@ const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }
   };
 
   return (
-    <Menu ref={ref} style={{ minWidth: toRem(200) }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+    <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         <MenuItem
           onClick={handleMarkAsRead}
           size="300"
diff --git a/src/app/pages/client/sidebar/HomeTab.tsx b/src/app/pages/client/sidebar/HomeTab.tsx
index db870cb..c8a8028 100644
--- a/src/app/pages/client/sidebar/HomeTab.tsx
+++ b/src/app/pages/client/sidebar/HomeTab.tsx
@@ -43,8 +43,8 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
   };
 
   return (
-    <Menu ref={ref} style={{ minWidth: toRem(200) }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+    <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         <MenuItem
           onClick={handleMarkAsRead}
           size="300"
diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx
index a9f55f1..011741e 100644
--- a/src/app/pages/client/sidebar/SpaceTabs.tsx
+++ b/src/app/pages/client/sidebar/SpaceTabs.tsx
@@ -142,8 +142,8 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
     };
 
     return (
-      <Menu ref={ref} style={{ minWidth: toRem(200) }}>
-        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+      <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <MenuItem
             onClick={handleMarkAsRead}
             size="300"
@@ -169,7 +169,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
           )}
         </Box>
         <Line variant="Surface" size="300" />
-        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <MenuItem
             onClick={handleInvite}
             variant="Primary"
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 97e3d0f..d100946 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -127,8 +127,8 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   };
 
   return (
-    <Menu ref={ref} style={{ minWidth: toRem(200) }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+    <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         <MenuItem
           onClick={handleMarkAsRead}
           size="300"
@@ -142,7 +142,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
         </MenuItem>
       </Box>
       <Line variant="Surface" size="300" />
-      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         <MenuItem
           onClick={handleInvite}
           variant="Primary"
@@ -190,7 +190,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
         )}
       </Box>
       <Line variant="Surface" size="300" />
-      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
         <UseStateProvider initial={false}>
           {(promptLeave, setPromptLeave) => (
             <>