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

* make menus more spacious * improve threaded reply layout * fix search filter button spacing
2025-11-11 09:40:28 +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'}