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

* make menus more spacious * improve threaded reply layout * fix search filter button spacing
2025-11-03 22:10:29 +03:00 · 2025-07-27 17:50:23 +05:30 · 2025-07-27 17:50:23 +05:30 · d8d4714370
commit d8d4714370
parent 9183fd66b2
37 changed files with 82 additions and 83 deletions
--- a/src/app/components/BackupRestore.tsx
+++ b/src/app/components/BackupRestore.tsx
@ -203,12 +203,8 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
                  escapeDeactivates: stopPropagation,
                }}
              >
-                <Menu
-                  style={{
-                    padding: config.space.S100,
-                  }}
-                >
-                  <Box direction="Column" gap="100">
+                <Menu style={{ padding: config.space.S200 }}>
+                  <Box direction="Column" gap="200">
                    <Box direction="Column" gap="200">
                      <InfoCard
                        variant="SurfaceVariant"
--- 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.S100,
+              padding: config.space.S200,
              borderRadius: config.radii.R500,
              overflow: 'initial',
            }}
--- 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.S100 }}>
+            <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
              {rules.map((rule) => (
                <MenuItem
                  key={rule}
--- 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.S100 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                <MenuItem
                  size="300"
                  variant="Surface"
--- 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.S100 }}>
+      <Menu style={{ padding: config.space.S200 }}>
        {memberSortMenu.map((menuItem, index) => (
          <MenuItem
            key={menuItem.name}
--- 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.S100 }}>
+      <Menu style={{ padding: config.space.S200 }}>
        {membershipFilterMenu.map((menuItem, index) => (
          <MenuItem
            key={menuItem.name}
--- a/src/app/components/RoomNotificationSwitcher.tsx
+++ b/src/app/components/RoomNotificationSwitcher.tsx
@ -70,7 +70,7 @@ export function RoomNotificationModeSwitcher({
  return (
    <PopOut
      anchor={menuCords}
-      offset={5}
+      offset={8}
      position="Right"
      align="Start"
      content={
@ -86,7 +86,7 @@ export function RoomNotificationModeSwitcher({
          }}
        >
          <Menu>
-            <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+            <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
              {modes.map((mode) => (
                <MenuItem
                  key={mode}
--- 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.S100 }}>
+          <Menu style={{ padding: config.space.S200 }}>
            <Box gap="100">
              <TooltipProvider
                tooltip={<BtnTooltip text="Heading 1" shortCode={`${modKey} + 1`} />}
--- 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.S100 }}>
+    <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
      {allUsages.map((usage) => (
        <MenuItem
          key={getUsageStr(usage)}
--- a/src/app/components/message/Reply.css.ts
+++ b/src/app/components/message/Reply.css.ts
@ -7,7 +7,6 @@ export const ReplyBend = style({

 export const ThreadIndicator = style({
  opacity: config.opacity.P300,
-  gap: toRem(2),

  selectors: {
    'button&': {
@ -19,11 +18,6 @@ export const ThreadIndicator = style({
  },
 });

-export const ThreadIndicatorIcon = style({
-  width: toRem(14),
-  height: toRem(14),
-});
-
 export const Reply = style({
  marginBottom: toRem(1),
  minWidth: 0,
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@ -38,9 +38,16 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
 );

 export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
-  <Box className={css.ThreadIndicator} alignItems="Center" {...props} ref={ref}>
-    <Icon className={css.ThreadIndicatorIcon} src={Icons.Message} />
-    <Text size="T200">Threaded reply</Text>
+  <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>
 ));

@ -97,7 +104,7 @@ export const Reply = as<'div', ReplyProps>(
    const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;

    return (
-      <Box direction="Column" alignItems="Start" {...props} ref={ref}>
+      <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
        {threadRootId && (
          <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
        )}
--- a/src/app/components/power/PowerSelector.tsx
+++ b/src/app/components/power/PowerSelector.tsx
@ -16,13 +16,14 @@ export const PowerSelector = forwardRef<HTMLDivElement, PowerSelectorProps>(
      ref={ref}
      style={{
        maxHeight: '75vh',
-        maxWidth: toRem(300),
+        maxWidth: toRem(200),
+        width: '100vw',
        display: 'flex',
      }}
    >
      <Box grow="Yes">
        <Scroll size="0" hideTrack visibility="Hover">
-          <div style={{ padding: config.space.S100 }}>
+          <div style={{ padding: config.space.S200 }}>
            {getPowers(powerLevelTags).map((power) => {
              const selected = value === power;
              const tag = powerLevelTags[power];
--- 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="Soft" />}
+            before={joining && <Spinner size="50" variant="Secondary" fill="Solid" />}
          >
            <Text size="B300" truncate>
              {joining ? 'Joining' : 'Join'}
--- 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.S100 }}>
+                <Menu style={{ padding: config.space.S200 }}>
                  {visibilityMenu.map((visibility) => (
                    <MenuItem
                      key={visibility}
--- 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.S200 }} direction="Column" gap="400">
+                <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
                  {permissionGroups.map((group, groupIndex) => (
                    <Box key={groupIndex} direction="Column" gap="100">
                      <Text size="L400">{group.name}</Text>
--- 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={{ maxWidth: toRem(150), width: '100vw' }}>
+              <Menu style={{ minWidth: toRem(200) }}>
                {joined && (
-                  <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                  <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                    {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.S100 }}>
+                  <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                    <SuggestMenuItem item={item} requestClose={handleRequestClose} />
                    <RemoveMenuItem item={item} requestClose={handleRequestClose} />
                  </Box>
--- 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={{ maxWidth: toRem(160), width: '100vw' }}>
-        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+      <Menu ref={ref} style={{ minWidth: toRem(200) }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
          <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.S100 }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
          <UseStateProvider initial={false}>
            {(promptLeave, setPromptLeave) => (
              <>
--- 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.S100 }}>
+          <Menu style={{ padding: config.space.S200 }}>
            <MenuItem
              size="300"
              radii="300"
@ -333,7 +333,7 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) {
            escapeDeactivates: stopPropagation,
          }}
        >
-          <Menu style={{ padding: config.space.S100 }}>
+          <Menu style={{ padding: config.space.S200 }}>
            <MenuItem
              size="300"
              radii="300"
--- a/src/app/features/message-search/SearchFilters.tsx
+++ b/src/app/features/message-search/SearchFilters.tsx
@ -74,8 +74,7 @@ function OrderButton({ order, onChange }: OrderButtonProps) {
            <Header size="300" variant="Surface" style={{ padding: `0 ${config.space.S300}` }}>
              <Text size="L400">Sort by</Text>
            </Header>
-            <Line variant="Surface" size="300" />
-            <div style={{ padding: config.space.S100 }}>
+            <div style={{ padding: config.space.S200, paddingTop: 0 }}>
              <MenuItem
                onClick={() => setOrder()}
                variant="Surface"
@ -291,7 +290,7 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
                </Box>
              </Scroll>
              <Line variant="Surface" size="300" />
-              <Box shrink="No" direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+              <Box shrink="No" direction="Column" gap="200" 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>
--- 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={{ maxWidth: toRem(160), width: '100vw' }}>
-        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+      <Menu ref={ref} style={{ minWidth: toRem(200) }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
          <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.S100 }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
          <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.S100 }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
          <UseStateProvider initial={false}>
            {(promptLeave, setPromptLeave) => (
              <>
--- 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="Column">
+                  <Box direction="Row" gap="200" alignItems="Center">
                    {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
                    <ReplyLayout
                      userColor={replyUsernameColor}
--- 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={{ maxWidth: toRem(160), width: '100vw' }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+    <Menu ref={ref} style={{ minWidth: toRem(200) }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
        <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.S100 }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
        <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.S100 }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
        <UseStateProvider initial={false}>
          {(promptLeave, setPromptLeave) => (
            <>
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@ -22,6 +22,7 @@ import {
  as,
  color,
  config,
+  toRem,
 } from 'folds';
 import React, {
  FormEventHandler,
@ -94,10 +95,10 @@ export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>(
    return (
      <>
        <Box
-          style={{ padding: config.space.S200 }}
+          style={{ padding: config.space.S300 }}
          alignItems="Center"
          justifyContent="Center"
-          gap="200"
+          gap="300"
          {...props}
          ref={ref}
        >
@ -972,7 +973,7 @@ export const Message = as<'div', MessageProps>(
                        escapeDeactivates: stopPropagation,
                      }}
                    >
-                      <Menu>
+                      <Menu style={{ minWidth: toRem(200) }}>
                        {canSendReaction && (
                          <MessageQuickReactions
                            onReaction={(key, shortcode) => {
@ -1169,6 +1170,7 @@ export const Event = as<'div', EventProps>(
      hideReadReceipts,
      showDeveloperTools,
      children,
+      style,
      ...props
    },
    ref
@ -1235,7 +1237,7 @@ export const Event = as<'div', EventProps>(
                        escapeDeactivates: stopPropagation,
                      }}
                    >
-                      <Menu {...props} ref={ref}>
+                      <Menu style={{ minWidth: toRem(200), ...style }} {...props} ref={ref}>
                        <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
                          {!hideReadReceipts && (
                            <MessageReadReceiptItem
--- 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.S100,
+  padding: config.space.S200,
 });

 export const MessageMenuItemText = style({
--- 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.S100 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                <MenuItem
                  variant="Critical"
                  onClick={handleReset}
--- 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.S100 }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
        {themes.map((theme) => (
          <MenuItem
            key={theme.id}
@ -781,7 +781,7 @@ function SelectMessageLayout() {
            }}
          >
            <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                {messageLayoutItems.map((item) => (
                  <MenuItem
                    key={item.layout}
@ -850,7 +850,7 @@ function SelectMessageSpacing() {
            }}
          >
            <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                {messageSpacingItems.map((item) => (
                  <MenuItem
                    key={item.spacing}
--- 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.S100 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                {modes.map((mode) => (
                  <MenuItem
                    key={mode}
--- a/src/app/pages/auth/ServerPicker.tsx
+++ b/src/app/pages/auth/ServerPicker.tsx
@ -108,10 +108,10 @@ export function ServerPicker({
                }}
              >
                <Menu>
-                  <Header size="300" style={{ padding: `0 ${config.space.S200}` }}>
+                  <Header size="400" style={{ padding: `0 ${config.space.S300}` }}>
                    <Text size="L400">Homeserver List</Text>
                  </Header>
-                  <div style={{ padding: config.space.S100, paddingTop: 0 }}>
+                  <div style={{ padding: config.space.S200, paddingTop: 0 }}>
                    {serverList?.map((serverName) => (
                      <MenuItem
                        key={serverName}
--- 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="300" style={{ padding: `0 ${config.space.S200}` }}>
+            <Header size="400" style={{ padding: `0 ${config.space.S400}` }}>
              <Text size="L400">Hint</Text>
            </Header>
            <Box
-              style={{ padding: config.space.S200, paddingTop: 0 }}
+              style={{ padding: config.space.S400, paddingTop: 0 }}
              direction="Column"
              tabIndex={0}
              gap="100"
--- 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.S100 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                {mx && (
                  <MenuItem onClick={() => clearCacheAndReload(mx)} size="300" radii="300">
                    <Text as="span" size="T300" truncate>
--- 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={{ maxWidth: toRem(160), width: '100vw' }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+    <Menu ref={ref} style={{ minWidth: toRem(200) }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
        <MenuItem
          onClick={handleMarkAsRead}
          size="300"
--- 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.S100, minWidth: toRem(100) }}
+              style={{ padding: config.space.S200, 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="400"
+                    radii="300"
                    aria-label="Per Page Item Limit"
                  />
                </Box>
-                <Button type="submit" size="300" variant="Primary" radii="400">
+                <Button type="submit" size="300" variant="Primary" radii="300">
                  <Text size="B300">Change Limit</Text>
                </Button>
              </Box>
--- 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={{ maxWidth: toRem(160), width: '100vw' }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+    <Menu ref={ref} style={{ minWidth: toRem(200) }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
        <MenuItem
          onClick={handleMarkAsRead}
          size="300"
--- 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={{ maxWidth: toRem(160), width: '100vw' }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+    <Menu ref={ref} style={{ minWidth: toRem(200) }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
        <MenuItem
          onClick={handleMarkAsRead}
          size="300"
--- 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={{ maxWidth: toRem(160), width: '100vw' }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+    <Menu ref={ref} style={{ minWidth: toRem(200) }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
        <MenuItem
          onClick={handleMarkAsRead}
          size="300"
--- 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={{ maxWidth: toRem(160), width: '100vw' }}>
-        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+      <Menu ref={ref} style={{ minWidth: toRem(200) }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
          <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.S100 }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
          <MenuItem
            onClick={handleInvite}
            variant="Primary"
--- 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={{ maxWidth: toRem(160), width: '100vw' }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+    <Menu ref={ref} style={{ minWidth: toRem(200) }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
        <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.S100 }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
        <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.S100 }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
        <UseStateProvider initial={false}>
          {(promptLeave, setPromptLeave) => (
            <>