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 8b3732b19735b91c05eb4f443fabde666de7bd0c..068f437b4798f09739251a2d51878f85b7126cc0 100644 (file)
--- 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 c0b4eb73dd14ef2c1346d326cfe05c937886d9ff..d8fb4bc30ac636ec7281cfbb18a0719f532a10b7 100644 (file)
--- 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 835c1bc022301f5ab32f15aa62f9ec7fcebdc07f..9507317a0c8d371f453c2d8bea8ea5ef724c4f12 100644 (file)
--- 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 9c92ac002d5811cc6e1346376531746fbc92497d..03f3e710a946116770d8b36b3e5b7cc66877f98b 100644 (file)
--- 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 6d1fd97b197ada918529bc39bcaf983b1340c57f..d77c80c60f4ff03575ae87c7c8ca8f058dc8d481 100644 (file)
--- 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 f50acd28a60f1935ef6004e66afc1f17eff9046f..bf17677d601b21471628064abd3bc9eeca3d254f 100644 (file)
--- 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 d4338d3a4cbb692fa10ba3a40495a7faec951fdb..7ce915661fe103b08d6534bf4d54b29184ed8990 100644 (file)
--- 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 0ac416f7f80c40508208c0b05c35f59f7716c729..17ba6bc2fd765f67f6ee0dff55248ec0a1a1030e 100644 (file)
--- 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 1878beb443f024371eeff61c80f8a0475438c206..1a1eb432d88b6015103a6910de0eae50f477df13 100644 (file)
--- 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 7e5540fdbcce584f7843544404c57961398b7f8a..0679939143ea84ebe6ecd83107028701f54798c5 100644 (file)
--- 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 dc92bf833875010355131f043aa19a4777bbbcdc..563d1bf8ed941b7738b5ed93df9b95584f87c8fc 100644 (file)
--- 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 9e7eb81beb5343571c04f70c9965a064258e9e0f..2b3b48c3dac341dab2305df1ff0cb0973d81abcd 100644 (file)
--- 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 8c65f2f3953b34961c6c0add22b2ada2c6311c54..34a7e24b5d76cc4001846d47f6f3f2e7874265b0 100644 (file)
--- 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 c6313f1196469ac67bd49e6bbfc21d0ce0f6215c..7b329b135759b3d6eac42f1eb871900ed43aca80 100644 (file)
--- 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 89514eb49fab2e4fc3326ee02afdf76981836613..b7dadf5ab3ce8d354e500c5960151ec6c3419112 100644 (file)
--- 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 d13c9133335536c8fa86ddfa8d8d85a796623653..f126e7cb4563c9dc24881ad056eeaa4a64883270 100644 (file)
--- 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 08f0cc6a82f9d24597d9bf85855aa20ce166c99b..bc4c46fe76d90886c7e2ad2043182da4c4d227a1 100644 (file)
--- 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 dca81b90e47e14108ce122afff63c12ffd53eca7..0a4d9de5a067db97a7726b89e7a41fde50ab0a69 100644 (file)
--- 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 e09658a2f8c1053e1be0eb98ea564f88e001823c..929dd1e919e3fff42c7fefa4faa3ee93dd83f992 100644 (file)
--- 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 ddff7bbdba98f65ea51123d57be0638aad3b28e0..bdb8141850c84c9dd9c002cf4e93861709a82c63 100644 (file)
--- 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 1399ec15dc2780e73bcb71ca6f073cf0b5cec105..501ee0dc2e6b0642f98cb43c2f298cabe4371957 100644 (file)
--- 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 c97b0f3daa8f02b59937503d3132ec9f4328f6f0..63e9d55d4b4a6d20fb884b908041586f08a82505 100644 (file)
--- 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 6b854cb62c62ae1c8eba2e8c3a120741da4c761c..e906a0244e34d938b76f73a356292a61282249f8 100644 (file)
--- 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 1b20efad9f8b09ca692ec24be8b2178747ea8c9d..b87cb50548dffc2e44bfbbf63812dd1c2bd7bd56 100644 (file)
--- 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 cb24ff609e6b4cc103400123a07e0ee34a696ec0..6c7eab17babb2ae5b3b498e0cf27bc50482bae26 100644 (file)
--- 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 e4f3a86b8a6a279e9d4a415775fecc0be02a6e21..ed11ec4d75b40cfa62e61366c011d52afc3b06e7 100644 (file)
--- 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 3b81ca32c2193ae40f5f802731b5ab69af236a8d..fe008390d6281557ed21ffbcc626db548dc6ce49 100644 (file)
--- 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 97d3c6fdfd46fda661a0040c61bd269a12c1abfe..a2a78106cd4b53f2bc966a61fd2fa4d06fcbb791 100644 (file)
--- 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 31b94dcb8b21f9f6c1777c41236a812cda1c6c28..90c305d00195e4e27987726f2adb6795c35f9155 100644 (file)
--- 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 6b7146dab61202057ec6e1b5a9cd31a9b19d2ab9..c48dbf532fe83eca789e0390c490ed3271a4f2f9 100644 (file)
--- 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 db3b6c895a01de9cd47232815624d758f5a31b05..b6a8de1a0af9d326fc5e5163d7ddc644f7274f8d 100644 (file)
--- 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 52aa2bfc9897254044f45acb232c8bc3a2b87583..48f267ccdd903d5672f64f18d846c5e220dd723e 100644 (file)
--- 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 ff26438d2136f90d22281d6f863a5f5a45edd7e5..af4164fda88990949d5c357b2e5f931892a842c2 100644 (file)
--- 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 7cb1bf469277afea2e62558a39899696e93d39cc..bd8090d3dd69440b993835925726871eea9a2b20 100644 (file)
--- 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 db870cb738f87c124729074478cefbde14d00e74..c8a80280a8a260cceb4f1373c2c3afd87522d1e0 100644 (file)
--- 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 a9f55f181f418a521edb6207a05b8830a3e0c748..011741eee24435a77a5389ec4b4e4dec25a957e0 100644 (file)
--- 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 97e3d0fad4328c81143349c1a40fe876363d4b48..d100946469053df75ac2cd45e086b2d3217dbf41 100644 (file)
--- 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) => (
             <>