From e875fc06cb19e6f3e9a389362edec1ff388b6179 Mon Sep 17 00:00:00 2001
From: Shea Duma <nu@she-a.eu>
Date: Fri, 10 Apr 2026 06:06:43 +0300
Subject: [PATCH 1/6] bodge to fix the hero going under the screen when
 clicking the bottom item

---
 src/app/features/room/MembersDrawer.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx
index 0a74acfda..2f4849288 100644
--- a/src/app/features/room/MembersDrawer.tsx
+++ b/src/app/features/room/MembersDrawer.tsx
@@ -282,7 +282,12 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
     const btn = evt.currentTarget as HTMLButtonElement;
     const userId = btn.getAttribute('data-user-id');
     if (!userId) return;
-    openUserRoomProfile(room.roomId, space?.roomId, userId, btn.getBoundingClientRect(), 'Left');
+
+    const cords = btn.getBoundingClientRect();
+    // BODGE, dependent on menuItem height staying at toRem(40)
+    cords.y = Math.min(cords.y, window.innerHeight - 42);
+
+    openUserRoomProfile(room.roomId, space?.roomId, userId, cords, 'Left');
   };
 
   return (

From afc33a18d13f9c85eb8cf55e4378c9c49c378bdd Mon Sep 17 00:00:00 2001
From: Shea Duma <nu@she-a.eu>
Date: Sat, 11 Apr 2026 04:25:45 +0300
Subject: [PATCH 2/6] break misc data into sections

---
 .../components/UserRoomProfileRenderer.tsx    |  2 +-
 .../user-profile/UserRoomProfile.tsx          | 68 +++++++++++++------
 2 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/src/app/components/UserRoomProfileRenderer.tsx b/src/app/components/UserRoomProfileRenderer.tsx
index 97489d277..e8b247c01 100644
--- a/src/app/components/UserRoomProfileRenderer.tsx
+++ b/src/app/components/UserRoomProfileRenderer.tsx
@@ -23,7 +23,7 @@ function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState })
     <PopOut
       anchor={cords}
       position={position ?? 'Top'}
-      align="Start"
+      align={cords.y > window.innerHeight / 2 ? 'End' : 'Start'}
       content={
         <FocusTrap
           focusTrapOptions={{
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index 124642f84..b76ff3989 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, config, Icon, Icons, Scroll, Text } from 'folds';
+import { Box, Button, config, Icon, Icons, Scroll, Text, toRem } from 'folds';
 import { SyntheticEvent, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAtomValue } from 'jotai';
@@ -67,11 +67,8 @@ function UserExtendedSection({
   htmlReactParserOptions,
   linkifyOpts,
 }: Readonly<UserExtendedSectionProps>) {
-  const clamp = (str: any, len: number) => {
-    const stringified = String(str ?? '');
-    return stringified.length > len ? `${stringified.slice(0, len)}...` : stringified;
-  };
   const [showMore, setShowMore] = useState(false);
+  const [moreIndex, setMoreIndex] = useState(0);
 
   const [renderAnimals] = useSetting(settingsAtom, 'renderAnimals');
   const isCat = profile.isCat === true;
@@ -223,25 +220,54 @@ function UserExtendedSection({
           </Button>
 
           {showMore && (
-            <Box
-              direction="Column"
-              style={{
-                padding: config.space.S200,
-                backgroundColor: 'var(--sable-surface-container)',
-                borderRadius: config.radii.R400,
-              }}
-            >
-              {unknownFields.map(([key, value]) => (
-                <Box key={key} direction="Column" style={{ marginBottom: config.space.S100 }}>
-                  <Text size="T200" priority="400" style={{ letterSpacing: '0.05em' }}>
-                    {key}
-                  </Text>
+            <>
+              <Box direction="Row" justifyContent="SpaceBetween" alignContent="Center">
+                {unknownFields.length > 1 && (
+                  <Button
+                    variant="Secondary"
+                    size="300"
+                    fill="None"
+                    onClick={() =>
+                      setMoreIndex(moreIndex === 0 ? unknownFields.length - 1 : moreIndex - 1)
+                    }
+                  >
+                    <Icon src={Icons.ArrowLeft} size="50" />
+                  </Button>
+                )}
+                <Text
+                  size="T200"
+                  priority="400"
+                  style={{ letterSpacing: '0.05em', alignSelf: 'center' }}
+                >
+                  {unknownFields[moreIndex][0]}
+                </Text>
+                {unknownFields.length > 1 && (
+                  <Button
+                    variant="Secondary"
+                    size="300"
+                    fill="None"
+                    onClick={() => setMoreIndex((moreIndex + 1) % unknownFields.length)}
+                  >
+                    <Icon src={Icons.ArrowRight} size="50" />
+                  </Button>
+                )}
+              </Box>
+              <Scroll size="300" direction="Both">
+                <Box
+                  direction="Column"
+                  style={{
+                    padding: config.space.S200,
+                    backgroundColor: 'var(--sable-surface-container)',
+                    borderRadius: config.radii.R400,
+                    maxHeight: toRem(100),
+                  }}
+                >
                   <Text size="T200" priority="300">
-                    {clamp(renderValue(value), 128)}
+                    {renderValue(unknownFields[moreIndex][1])}
                   </Text>
                 </Box>
-              ))}
-            </Box>
+              </Scroll>
+            </>
           )}
         </Box>
       )}

From 688feabccff7d721dba3c78afb4780cf696ea992 Mon Sep 17 00:00:00 2001
From: Shea Duma <nu@she-a.eu>
Date: Sat, 11 Apr 2026 07:47:01 +0300
Subject: [PATCH 3/6] style misc data

---
 .../user-profile/UserRoomProfile.tsx          | 84 +++++++++++++------
 1 file changed, 59 insertions(+), 25 deletions(-)

diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index b76ff3989..5eddd236e 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -35,6 +35,7 @@ import { getSettings, settingsAtom } from '$state/settings';
 import { filterPronounsByLanguage } from '$utils/pronouns';
 import { useSetting } from '$state/hooks/settings';
 import { useSettingsLinkBaseUrl } from '$features/settings/useSettingsLinkBaseUrl';
+import { TextViewerContent } from '$components/text-viewer';
 import { CreatorChip } from './CreatorChip';
 import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration';
 import { PowerChip } from './PowerChip';
@@ -206,22 +207,40 @@ function UserExtendedSection({
 
       {unknownFields.length > 0 && (
         <Box direction="Column" gap="100">
-          <Button
-            variant="Secondary"
-            size="300"
-            fill="None"
-            onClick={() => setShowMore(!showMore)}
-            after={<Icon size="50" src={showMore ? Icons.ChevronTop : Icons.ChevronBottom} />}
-            style={{ padding: '1rem', justifyContent: 'flex-start', width: 'fit-content' }}
-          >
-            <Text size="T200" priority="400">
-              {showMore ? 'Show less' : `+ ${unknownFields.length} more info`}
-            </Text>
-          </Button>
+          {!showMore && (
+            <Box justifyContent="Center">
+              <Button
+                variant="Secondary"
+                size="300"
+                fill="None"
+                onClick={() => setShowMore(!showMore)}
+                after={<Icon size="50" src={showMore ? Icons.ChevronTop : Icons.ChevronBottom} />}
+                style={{ padding: '1rem', justifyContent: 'flex-start', width: 'fit-content' }}
+              >
+                <Text size="T200" priority="400">
+                  {`Show Misc. Data (${unknownFields.length} values)`}
+                </Text>
+              </Button>
+            </Box>
+          )}
 
           {showMore && (
-            <>
-              <Box direction="Row" justifyContent="SpaceBetween" alignContent="Center">
+            <div
+              style={{
+                border: '2px solid',
+                backgroundColor: 'var(--sable-bg-container)',
+                borderColor: 'var(--sable-surface-container-line)',
+                borderRadius: config.radii.R400,
+              }}
+            >
+              <Box
+                direction="Row"
+                justifyContent="Center"
+                alignContent="Center"
+                style={{
+                  borderRadius: config.radii.R400,
+                }}
+              >
                 {unknownFields.length > 1 && (
                   <Button
                     variant="Secondary"
@@ -234,13 +253,28 @@ function UserExtendedSection({
                     <Icon src={Icons.ArrowLeft} size="50" />
                   </Button>
                 )}
-                <Text
-                  size="T200"
-                  priority="400"
-                  style={{ letterSpacing: '0.05em', alignSelf: 'center' }}
+                <Button
+                  variant="Secondary"
+                  size="300"
+                  fill="None"
+                  onClick={() => setShowMore(!showMore)}
+                  style={{
+                    padding: '1rem',
+                    justifyContent: 'flex-center',
+                    width: 'fit-content',
+                    wordBreak: 'break-word',
+                    overflow: 'hidden',
+                    flexGrow: '1',
+                  }}
                 >
-                  {unknownFields[moreIndex][0]}
-                </Text>
+                  <Text
+                    size="T200"
+                    priority="400"
+                    style={{ letterSpacing: '0.05em', alignSelf: 'center' }}
+                  >
+                    {unknownFields[moreIndex][0]}
+                  </Text>
+                </Button>
                 {unknownFields.length > 1 && (
                   <Button
                     variant="Secondary"
@@ -257,17 +291,17 @@ function UserExtendedSection({
                   direction="Column"
                   style={{
                     padding: config.space.S200,
-                    backgroundColor: 'var(--sable-surface-container)',
                     borderRadius: config.radii.R400,
                     maxHeight: toRem(100),
                   }}
                 >
-                  <Text size="T200" priority="300">
-                    {renderValue(unknownFields[moreIndex][1])}
-                  </Text>
+                  <TextViewerContent
+                    text={renderValue(unknownFields[moreIndex][1])}
+                    langName="json"
+                  />
                 </Box>
               </Scroll>
-            </>
+            </div>
           )}
         </Box>
       )}

From 5f5957a293359b5588d789c6fb24a047a583af39 Mon Sep 17 00:00:00 2001
From: Shea Duma <nu@she-a.eu>
Date: Sat, 11 Apr 2026 11:54:55 +0300
Subject: [PATCH 4/6] style misc selector

---
 src/app/components/user-profile/UserChips.tsx |   2 +-
 .../user-profile/UserModeration.tsx           |   4 +-
 .../user-profile/UserRoomProfile.tsx          | 112 +++++++++++-------
 3 files changed, 73 insertions(+), 45 deletions(-)

diff --git a/src/app/components/user-profile/UserChips.tsx b/src/app/components/user-profile/UserChips.tsx
index 1ce3b26c1..44432df22 100644
--- a/src/app/components/user-profile/UserChips.tsx
+++ b/src/app/components/user-profile/UserChips.tsx
@@ -433,7 +433,7 @@ export function IgnoredUserAlert() {
     <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
       <SettingTile>
         <Box direction="Column" gap="200">
-          <Box gap="200" justifyContent="SpaceBetween">
+          <Box gap="200" justifyContent="Center">
             <Text size="L400">Blocked User</Text>
           </Box>
           <Box direction="Column">
diff --git a/src/app/components/user-profile/UserModeration.tsx b/src/app/components/user-profile/UserModeration.tsx
index a6f8c796e..fb7b679da 100644
--- a/src/app/components/user-profile/UserModeration.tsx
+++ b/src/app/components/user-profile/UserModeration.tsx
@@ -256,7 +256,9 @@ export function UserModeration({ userId, canKick, canBan, canInvite }: UserModer
     <Box direction="Column" gap="400">
       <Box direction="Column" gap="200">
         <Box grow="Yes" direction="Column" gap="100">
-          <Text size="L400">Moderation</Text>
+          <Text size="L400" align="Center">
+            Moderation
+          </Text>
           <Input
             ref={reasonInputRef}
             placeholder="Reason"
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index 5eddd236e..b095510cc 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, config, Icon, Icons, Scroll, Text, toRem } from 'folds';
+import { Box, Button, config, Icon, Icons, Menu, MenuItem, Scroll, Text, toRem } from 'folds';
 import { SyntheticEvent, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAtomValue } from 'jotai';
@@ -69,7 +69,7 @@ function UserExtendedSection({
   linkifyOpts,
 }: Readonly<UserExtendedSectionProps>) {
   const [showMore, setShowMore] = useState(false);
-  const [moreIndex, setMoreIndex] = useState(0);
+  const [moreIndex, setMoreIndex] = useState(-1);
 
   const [renderAnimals] = useSetting(settingsAtom, 'renderAnimals');
   const isCat = profile.isCat === true;
@@ -146,6 +146,69 @@ function UserExtendedSection({
     ([key]) => !KNOWN_KEYS.includes(key)
   );
 
+  function handleMiscSelector(index: number) {
+    setMoreIndex(index);
+    setShowMore(false);
+  }
+
+  const miscSelector = useMemo(
+    () => (
+      <Menu style={{ position: 'absolute', zIndex: '100', transform: `translateY(${toRem(32)})` }}>
+        <MenuItem
+          size="300"
+          radii="300"
+          fill="None"
+          variant="Primary"
+          style={{ justifyContent: 'Center', textAlign: 'center' }}
+          onClick={() => handleMiscSelector(-1)}
+        >
+          <Icon src={Icons.ChevronTop} size="50" />
+          <Text>Show less</Text>
+        </MenuItem>
+        {unknownFields.map(([key], index) => (
+          <MenuItem
+            size="300"
+            radii="300"
+            fill="None"
+            variant="Secondary"
+            style={{ justifyContent: 'Center' }}
+            onClick={() => handleMiscSelector(index)}
+          >
+            <Text>{key}</Text>
+          </MenuItem>
+        ))}
+      </Menu>
+    ),
+    [unknownFields]
+  );
+  const miscHeader = useMemo(
+    () => (
+      <Box justifyContent="Center" grow="Yes">
+        <Button
+          variant="Secondary"
+          size="300"
+          fill="None"
+          onClick={() => setShowMore(!showMore)}
+          after={moreIndex === -1 && <Icon size="50" src={Icons.ChevronBottom} />}
+          style={{
+            padding: '1rem',
+            justifyContent: 'flex-start',
+            width: 'fit-content',
+            textAlign: 'center',
+          }}
+        >
+          <Text size="T200" priority="400">
+            {moreIndex === -1
+              ? `Show Misc. Data (${unknownFields.length} values)`
+              : `${unknownFields[moreIndex][0]} (${moreIndex + 1}/${unknownFields.length})`}
+          </Text>
+        </Button>
+        {showMore && miscSelector}
+      </Box>
+    ),
+    [miscSelector, moreIndex, showMore, unknownFields]
+  );
+
   return (
     <Box direction="Column" gap="200" style={{ marginBottom: config.space.S100 }}>
       {(pronouns || localTime) && (
@@ -207,24 +270,8 @@ function UserExtendedSection({
 
       {unknownFields.length > 0 && (
         <Box direction="Column" gap="100">
-          {!showMore && (
-            <Box justifyContent="Center">
-              <Button
-                variant="Secondary"
-                size="300"
-                fill="None"
-                onClick={() => setShowMore(!showMore)}
-                after={<Icon size="50" src={showMore ? Icons.ChevronTop : Icons.ChevronBottom} />}
-                style={{ padding: '1rem', justifyContent: 'flex-start', width: 'fit-content' }}
-              >
-                <Text size="T200" priority="400">
-                  {`Show Misc. Data (${unknownFields.length} values)`}
-                </Text>
-              </Button>
-            </Box>
-          )}
-
-          {showMore && (
+          {moreIndex === -1 && miscHeader}
+          {moreIndex > -1 && (
             <div
               style={{
                 border: '2px solid',
@@ -253,28 +300,7 @@ function UserExtendedSection({
                     <Icon src={Icons.ArrowLeft} size="50" />
                   </Button>
                 )}
-                <Button
-                  variant="Secondary"
-                  size="300"
-                  fill="None"
-                  onClick={() => setShowMore(!showMore)}
-                  style={{
-                    padding: '1rem',
-                    justifyContent: 'flex-center',
-                    width: 'fit-content',
-                    wordBreak: 'break-word',
-                    overflow: 'hidden',
-                    flexGrow: '1',
-                  }}
-                >
-                  <Text
-                    size="T200"
-                    priority="400"
-                    style={{ letterSpacing: '0.05em', alignSelf: 'center' }}
-                  >
-                    {unknownFields[moreIndex][0]}
-                  </Text>
-                </Button>
+                {miscHeader}
                 {unknownFields.length > 1 && (
                   <Button
                     variant="Secondary"
@@ -442,7 +468,7 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly<UserRoomPro
             htmlReactParserOptions={htmlReactParserOptions}
             linkifyOpts={linkifyOpts}
           />
-          <Box alignItems="Center" gap="100" wrap="Wrap">
+          <Box alignItems="Center" gap="100" wrap="Wrap" justifyContent="Center">
             {server && <ServerChip server={server} />}
             <ShareChip userId={userId} />
             {creator ? <CreatorChip /> : <PowerChip userId={userId} />}

From 766910c1d1d25325c85152601980f9b2c8464e4e Mon Sep 17 00:00:00 2001
From: Shea Duma <nu@she-a.eu>
Date: Sat, 11 Apr 2026 12:13:03 +0300
Subject: [PATCH 5/6] add changeset and speciic style for when a person only
 has one key

---
 .changeset/add_better_misc_data_styling.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/add_better_misc_data_styling.md

diff --git a/.changeset/add_better_misc_data_styling.md b/.changeset/add_better_misc_data_styling.md
new file mode 100644
index 000000000..b71cd2949
--- /dev/null
+++ b/.changeset/add_better_misc_data_styling.md
@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Change Misc. data styling in users profile pages

From bde822f2d5811e0c9296916c70db1c13ec81ae4a Mon Sep 17 00:00:00 2001
From: Shea Duma <nu@she-a.eu>
Date: Sat, 11 Apr 2026 12:15:08 +0300
Subject: [PATCH 6/6] make variable names make sense

---
 .../user-profile/UserRoomProfile.tsx          | 48 +++++++++++--------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index b095510cc..2b65d9f40 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -68,8 +68,8 @@ function UserExtendedSection({
   htmlReactParserOptions,
   linkifyOpts,
 }: Readonly<UserExtendedSectionProps>) {
-  const [showMore, setShowMore] = useState(false);
-  const [moreIndex, setMoreIndex] = useState(-1);
+  const [showMisc, setShowMisc] = useState(false);
+  const [miscDataIndex, setMiscDataIndex] = useState(-1);
 
   const [renderAnimals] = useSetting(settingsAtom, 'renderAnimals');
   const isCat = profile.isCat === true;
@@ -147,12 +147,17 @@ function UserExtendedSection({
   );
 
   function handleMiscSelector(index: number) {
-    setMoreIndex(index);
-    setShowMore(false);
+    setMiscDataIndex(index);
+    setShowMisc(false);
   }
 
-  const miscSelector = useMemo(
-    () => (
+  const miscSelector = useMemo(() => {
+    if (unknownFields.length === 1 && showMisc) {
+      setShowMisc(false);
+      setMiscDataIndex(miscDataIndex === -1 ? 0 : -1);
+      return null;
+    }
+    return (
       <Menu style={{ position: 'absolute', zIndex: '100', transform: `translateY(${toRem(32)})` }}>
         <MenuItem
           size="300"
@@ -178,9 +183,8 @@ function UserExtendedSection({
           </MenuItem>
         ))}
       </Menu>
-    ),
-    [unknownFields]
-  );
+    );
+  }, [miscDataIndex, showMisc, unknownFields]);
   const miscHeader = useMemo(
     () => (
       <Box justifyContent="Center" grow="Yes">
@@ -188,8 +192,8 @@ function UserExtendedSection({
           variant="Secondary"
           size="300"
           fill="None"
-          onClick={() => setShowMore(!showMore)}
-          after={moreIndex === -1 && <Icon size="50" src={Icons.ChevronBottom} />}
+          onClick={() => setShowMisc(!showMisc)}
+          after={miscDataIndex === -1 && <Icon size="50" src={Icons.ChevronBottom} />}
           style={{
             padding: '1rem',
             justifyContent: 'flex-start',
@@ -198,15 +202,15 @@ function UserExtendedSection({
           }}
         >
           <Text size="T200" priority="400">
-            {moreIndex === -1
-              ? `Show Misc. Data (${unknownFields.length} values)`
-              : `${unknownFields[moreIndex][0]} (${moreIndex + 1}/${unknownFields.length})`}
+            {miscDataIndex === -1
+              ? `Show Misc. Data (${unknownFields.length} value${unknownFields.length > 1 ? 's' : ''})`
+              : `${unknownFields[miscDataIndex][0]} ${unknownFields.length > 1 ? `(${miscDataIndex + 1}/${unknownFields.length})` : ''}`}
           </Text>
         </Button>
-        {showMore && miscSelector}
+        {showMisc && miscSelector}
       </Box>
     ),
-    [miscSelector, moreIndex, showMore, unknownFields]
+    [miscSelector, miscDataIndex, showMisc, unknownFields]
   );
 
   return (
@@ -270,8 +274,8 @@ function UserExtendedSection({
 
       {unknownFields.length > 0 && (
         <Box direction="Column" gap="100">
-          {moreIndex === -1 && miscHeader}
-          {moreIndex > -1 && (
+          {miscDataIndex === -1 && miscHeader}
+          {miscDataIndex > -1 && (
             <div
               style={{
                 border: '2px solid',
@@ -294,7 +298,9 @@ function UserExtendedSection({
                     size="300"
                     fill="None"
                     onClick={() =>
-                      setMoreIndex(moreIndex === 0 ? unknownFields.length - 1 : moreIndex - 1)
+                      setMiscDataIndex(
+                        miscDataIndex === 0 ? unknownFields.length - 1 : miscDataIndex - 1
+                      )
                     }
                   >
                     <Icon src={Icons.ArrowLeft} size="50" />
@@ -306,7 +312,7 @@ function UserExtendedSection({
                     variant="Secondary"
                     size="300"
                     fill="None"
-                    onClick={() => setMoreIndex((moreIndex + 1) % unknownFields.length)}
+                    onClick={() => setMiscDataIndex((miscDataIndex + 1) % unknownFields.length)}
                   >
                     <Icon src={Icons.ArrowRight} size="50" />
                   </Button>
@@ -322,7 +328,7 @@ function UserExtendedSection({
                   }}
                 >
                   <TextViewerContent
-                    text={renderValue(unknownFields[moreIndex][1])}
+                    text={renderValue(unknownFields[miscDataIndex][1])}
                     langName="json"
                   />
                 </Box>