From 68ff2d6992fa9b02708bffecdb5f9a5decefb216 Mon Sep 17 00:00:00 2001
From: 7w1 <noreply@sl.sable.moe>
Date: Wed, 13 May 2026 20:45:31 -0500
Subject: [PATCH 1/3] add border for thread drawer

---
 .changeset/thread-drawer-root-separator.md |  5 ++
 src/app/features/room/ThreadDrawer.css.ts  | 17 +++++
 src/app/features/room/ThreadDrawer.tsx     | 77 +++++++++-------------
 3 files changed, 52 insertions(+), 47 deletions(-)
 create mode 100644 .changeset/thread-drawer-root-separator.md

diff --git a/.changeset/thread-drawer-root-separator.md b/.changeset/thread-drawer-root-separator.md
new file mode 100644
index 000000000..f474a72f5
--- /dev/null
+++ b/.changeset/thread-drawer-root-separator.md
@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Improve thread drawer separation between the pinned root message and replies with a border.
diff --git a/src/app/features/room/ThreadDrawer.css.ts b/src/app/features/room/ThreadDrawer.css.ts
index d44d1b103..607f2ac06 100644
--- a/src/app/features/room/ThreadDrawer.css.ts
+++ b/src/app/features/room/ThreadDrawer.css.ts
@@ -28,6 +28,23 @@ export const ThreadDrawerHeader = style({
   borderBottomWidth: config.borderWidth.B300,
 });
 
+export const threadRootShell = style({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  flexShrink: 0,
+});
+
+export const threadRootScrollShadow = style({
+  position: 'relative',
+  flexShrink: 0,
+  zIndex: 1,
+  boxShadow: config.shadow.E100,
+  borderBottomWidth: config.borderWidth.B300,
+  borderBottomStyle: 'solid',
+  borderBottomColor: color.Surface.ContainerLine,
+});
+
 export const ThreadDrawerContent = style({
   position: 'relative',
   overflow: 'hidden',
diff --git a/src/app/features/room/ThreadDrawer.tsx b/src/app/features/room/ThreadDrawer.tsx
index 6a243bca1..070cdaf58 100644
--- a/src/app/features/room/ThreadDrawer.tsx
+++ b/src/app/features/room/ThreadDrawer.tsx
@@ -1,18 +1,6 @@
 import type { MouseEventHandler } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Box,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Scroll,
-  Spinner,
-  Text,
-  color,
-  config,
-  toRem,
-} from 'folds';
+import { Box, Header, Icon, IconButton, Icons, Scroll, Spinner, Text, config, toRem } from 'folds';
 import type { IEvent, Room } from '$types/matrix-sdk';
 import {
   Direction,
@@ -807,36 +795,38 @@ export function ThreadDrawer({ room, threadRootId, onClose, overlay }: ThreadDra
 
       {/* Thread root message */}
       {rootEvent && (
-        <Box style={{ position: 'relative', flexShrink: 0 }}>
-          <Scroll
-            variant="Background"
-            visibility="Hover"
-            direction="Vertical"
-            size="300"
-            hideTrack
-            style={{
-              height: toRem(curHeight),
-              flexShrink: 0,
-            }}
-          >
-            <Box
-              className={css.messageList}
-              direction="Column"
+        <Box className={css.threadRootShell}>
+          <Box className={css.threadRootScrollShadow}>
+            <Scroll
+              variant="Background"
+              visibility="Hover"
+              direction="Vertical"
+              size="300"
+              hideTrack
               style={{
-                padding: `${config.space.S200} 0 ${config.space.S100} 0`,
+                height: toRem(curHeight),
+                flexShrink: 0,
               }}
             >
-              {renderMatrixEvent(
-                rootEvent.getType(),
-                typeof rootEvent.getStateKey() === 'string',
-                rootEvent.getId()!,
-                rootEvent,
-                processedEvents.find((e) => e.id === threadRootId)?.itemIndex ?? 0,
-                thread?.timelineSet ?? room.getUnfilteredTimelineSet(),
-                false
-              )}
-            </Box>
-          </Scroll>
+              <Box
+                className={css.messageList}
+                direction="Column"
+                style={{
+                  padding: `${config.space.S200} 0 ${config.space.S100} 0`,
+                }}
+              >
+                {renderMatrixEvent(
+                  rootEvent.getType(),
+                  typeof rootEvent.getStateKey() === 'string',
+                  rootEvent.getId()!,
+                  rootEvent,
+                  processedEvents.find((e) => e.id === threadRootId)?.itemIndex ?? 0,
+                  thread?.timelineSet ?? room.getUnfilteredTimelineSet(),
+                  false
+                )}
+              </Box>
+            </Scroll>
+          </Box>
           <SidebarResizer
             setCurWidth={setCurHeight}
             sidebarWidth={threadRootHeight}
@@ -845,13 +835,6 @@ export function ThreadDrawer({ room, threadRootId, onClose, overlay }: ThreadDra
             maxValue={700}
             topSided
           />
-          <div
-            style={{
-              width: '100%',
-              height: toRem(1),
-              backgroundColor: color.Surface.ContainerLine,
-            }}
-          />
         </Box>
       )}
       {/* Replies */}

From 4b7354e381c50e0e675ae082a89b85f055c31215 Mon Sep 17 00:00:00 2001
From: 7w1 <noreply@sl.sable.moe>
Date: Wed, 13 May 2026 20:54:25 -0500
Subject: [PATCH 2/3] fix: settings header

---
 src/app/features/settings/Settings.tsx | 46 ++++++++++++++------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/app/features/settings/Settings.tsx b/src/app/features/settings/Settings.tsx
index e480d53b9..65be2eaf5 100644
--- a/src/app/features/settings/Settings.tsx
+++ b/src/app/features/settings/Settings.tsx
@@ -249,29 +249,31 @@ export function Settings({
       nav={
         screenSize === ScreenSize.Mobile && visibleSection !== null ? undefined : (
           <PageNav size="300">
-            <PageNavHeader className={settingsHeader}>
+            <PageNavHeader className={settingsHeader} size="600">
               <Box grow="Yes" gap="200">
-                <Avatar size="200" radii="300">
-                  <UserAvatar
-                    userId={userId}
-                    src={avatarUrl}
-                    renderFallback={() => <Text size="H6">{nameInitials(displayName)}</Text>}
-                  />
-                </Avatar>
-                <Text size="H4" truncate>
-                  Settings
-                </Text>
-              </Box>
-              <Box shrink="No">
-                {visibleSection === null && (
-                  <IconButton
-                    aria-label="Close settings"
-                    onClick={handleRequestClose}
-                    variant="Background"
-                  >
-                    <Icon src={Icons.Cross} />
-                  </IconButton>
-                )}
+                <Box grow="Yes" alignItems="Center" gap="200">
+                  <Avatar size="200" radii="300">
+                    <UserAvatar
+                      userId={userId}
+                      src={avatarUrl}
+                      renderFallback={() => <Text size="H6">{nameInitials(displayName)}</Text>}
+                    />
+                  </Avatar>
+                  <Text size="H4" truncate>
+                    Settings
+                  </Text>
+                </Box>
+                <Box shrink="No">
+                  {visibleSection === null && (
+                    <IconButton
+                      aria-label="Close settings"
+                      onClick={handleRequestClose}
+                      variant="Background"
+                    >
+                      <Icon src={Icons.Cross} />
+                    </IconButton>
+                  )}
+                </Box>
               </Box>
             </PageNavHeader>
             <Box grow="Yes" direction="Column">

From 6ade93e3ef93cc5263f5b821b962c5953a8641fb Mon Sep 17 00:00:00 2001
From: 7w1 <noreply@sl.sable.moe>
Date: Wed, 13 May 2026 21:04:04 -0500
Subject: [PATCH 3/3] fix: top left headers

---
 src/app/components/page/Page.tsx         |  4 +-
 src/app/components/page/style.css.ts     |  2 +-
 src/app/pages/client/direct/Direct.tsx   | 30 +++++++-------
 src/app/pages/client/home/Home.tsx       | 35 ++++++++---------
 src/app/pages/client/space/Space.tsx     | 50 ++++++++++++------------
 src/app/pages/client/space/styles.css.ts |  5 +--
 6 files changed, 62 insertions(+), 64 deletions(-)

diff --git a/src/app/components/page/Page.tsx b/src/app/components/page/Page.tsx
index bcad116d3..bafa45903 100644
--- a/src/app/components/page/Page.tsx
+++ b/src/app/components/page/Page.tsx
@@ -44,7 +44,9 @@ export function PageNav({ size, children }: ClientDrawerLayoutProps & css.PageNa
   );
 }
 
-export const PageNavHeader = as<'header', css.PageNavHeaderVariants>(
+type PageNavHeaderOwnProps = Pick<ComponentProps<typeof Header>, 'size'>;
+
+export const PageNavHeader = as<'header', css.PageNavHeaderVariants & PageNavHeaderOwnProps>(
   ({ className, outlined, ...props }, ref) => (
     <Header
       className={classNames(css.PageNavHeader({ outlined }), className)}
diff --git a/src/app/components/page/style.css.ts b/src/app/components/page/style.css.ts
index 8a5472c48..7ca01766a 100644
--- a/src/app/components/page/style.css.ts
+++ b/src/app/components/page/style.css.ts
@@ -46,7 +46,7 @@ export const PageNavHeader = recipe({
   variants: {
     outlined: {
       true: {
-        borderBottomWidth: 1,
+        borderBottomWidth: config.borderWidth.B300,
       },
     },
   },
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index a8ba93f2b..dce68f104 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -103,25 +103,27 @@ function DirectHeader({ hideText }: { hideText?: boolean }) {
   };
   return (
     <>
-      <PageNavHeader>
-        <Box alignItems="Center" grow="Yes" gap="300" justifyContent="Center">
-          {!hideText && (
-            <Box grow="Yes">
+      <PageNavHeader size="600">
+        {hideText ? (
+          <Box alignItems="Center" grow="Yes" justifyContent="Center">
+            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+              <Icon src={Icons.User} size="200" filled={!!menuAnchor} />
+            </IconButton>
+          </Box>
+        ) : (
+          <Box grow="Yes" gap="300">
+            <Box grow="Yes" alignItems="Center">
               <Text size="H4" truncate>
                 Direct Messages
               </Text>
             </Box>
-          )}
-          <Box>
-            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
-              <Icon
-                src={hideText ? Icons.User : Icons.VerticalDots}
-                size="200"
-                filled={!!menuAnchor}
-              />
-            </IconButton>
+            <Box shrink="No">
+              <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+                <Icon src={Icons.VerticalDots} size="200" filled={!!menuAnchor} />
+              </IconButton>
+            </Box>
           </Box>
-        </Box>
+        )}
       </PageNavHeader>
       <PopOut
         anchor={menuAnchor}
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index 791fc897b..38022a2e6 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -113,30 +113,27 @@ function HomeHeader({ hideText }: { hideText?: boolean }) {
 
   return (
     <>
-      <PageNavHeader>
-        <Box
-          alignItems="Center"
-          grow="Yes"
-          gap="300"
-          justifyContent={hideText ? 'Center' : 'Start'}
-        >
-          {!hideText && (
-            <Box grow="Yes">
+      <PageNavHeader size="600">
+        {hideText ? (
+          <Box alignItems="Center" grow="Yes" justifyContent="Center">
+            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+              <Icon src={Icons.Home} size="200" filled={!!menuAnchor} />
+            </IconButton>
+          </Box>
+        ) : (
+          <Box grow="Yes" gap="300">
+            <Box grow="Yes" alignItems="Center">
               <Text size="H4" truncate>
                 Home
               </Text>
             </Box>
-          )}
-          <Box>
-            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
-              <Icon
-                src={hideText ? Icons.Home : Icons.VerticalDots}
-                size="200"
-                filled={!!menuAnchor}
-              />
-            </IconButton>
+            <Box shrink="No">
+              <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+                <Icon src={Icons.VerticalDots} size="200" filled={!!menuAnchor} />
+              </IconButton>
+            </Box>
           </Box>
-        </Box>
+        )}
       </PageNavHeader>
       <PopOut
         anchor={menuAnchor}
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 39db42aa8..af453e77a 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -291,9 +291,9 @@ function SpaceHeader({ hideText, mx }: { hideText?: boolean; mx: MatrixClient })
             hasBanner ? css.RoomCoverNavContainer : css.RoomCoverlessNavContainer({ hideText })
           }
         >
-          <PageNavHeader outlined={false}>
-            <Box alignItems="Center" grow="Yes" gap="300" justifyContent="Center">
-              {hideText ? (
+          <PageNavHeader outlined={!hasBanner} size="600">
+            {hideText ? (
+              <Box alignItems="Center" grow="Yes" justifyContent="Center">
                 <Avatar size={hideText ? undefined : '200'} radii="400" onClick={handleOpenMenu}>
                   <RoomAvatar
                     roomId={space.roomId}
@@ -307,29 +307,27 @@ function SpaceHeader({ hideText, mx }: { hideText?: boolean; mx: MatrixClient })
                     )}
                   />
                 </Avatar>
-              ) : (
-                <>
-                  <Box grow="Yes" alignItems="Center" gap="100">
-                    <Text size="H4" truncate>
-                      {spaceName}
-                    </Text>
-                    {joinRules?.join_rule !== JoinRule.Public && (
-                      <Icon src={Icons.Lock} size="50" />
-                    )}
-                  </Box>
-                  <Box shrink="No">
-                    <IconButton
-                      aria-pressed={!!menuAnchor}
-                      variant="Background"
-                      style={hasBanner ? { backgroundColor: '#0000' } : {}}
-                      onClick={handleOpenMenu}
-                    >
-                      <Icon src={Icons.VerticalDots} size="200" />
-                    </IconButton>
-                  </Box>
-                </>
-              )}
-            </Box>
+              </Box>
+            ) : (
+              <Box grow="Yes" gap="300">
+                <Box grow="Yes" alignItems="Center" gap="100">
+                  <Text size="H4" truncate>
+                    {spaceName}
+                  </Text>
+                  {joinRules?.join_rule !== JoinRule.Public && <Icon src={Icons.Lock} size="50" />}
+                </Box>
+                <Box shrink="No">
+                  <IconButton
+                    aria-pressed={!!menuAnchor}
+                    variant="Background"
+                    style={hasBanner ? { backgroundColor: '#0000' } : {}}
+                    onClick={handleOpenMenu}
+                  >
+                    <Icon src={Icons.VerticalDots} size="200" />
+                  </IconButton>
+                </Box>
+              </Box>
+            )}
           </PageNavHeader>
           {menuAnchor && (
             <PopOut
diff --git a/src/app/pages/client/space/styles.css.ts b/src/app/pages/client/space/styles.css.ts
index c569121bc..2f6f303a1 100644
--- a/src/app/pages/client/space/styles.css.ts
+++ b/src/app/pages/client/space/styles.css.ts
@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
-import { color, config } from 'folds';
+import { config } from 'folds';
 
 export const RoomCoverHeaderContainer = style({ width: '100%', position: 'relative' });
 export const RoomCoverNavContainer = style({
@@ -13,7 +13,6 @@ export const RoomCoverNavContainer = style({
 export const RoomCoverlessNavContainer = recipe({
   base: {
     flexShrink: 0,
-    borderBottom: `1px solid ${color.Background.ContainerLine}`,
     minHeight: '100%',
     paddingRight: 0,
   },
@@ -23,7 +22,7 @@ export const RoomCoverlessNavContainer = recipe({
         padding: `${config.space.S100} ${config.space.S200} ${config.space.S200}`,
       },
       false: {
-        padding: `${config.space.S100} ${config.space.S200} ${config.space.S200} ${config.space.S400}`,
+        padding: 0,
       },
     },
   },