From 1750f12c85e58037497f5529afa9542c18d662e2 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sat, 14 Mar 2026 14:04:14 +0100
Subject: [PATCH] fix: input depth styling, missed fields, and header button
 order

- Add subtle border + inset shadow to input tiers for resting-state visibility
- Fix DmSearchBar and SearchPopover containers missing input depth treatment
- Fix focus ring clipping in settings panel scroll container
- Swap search and member list toggle button positions in channel/DM headers
---
 packages/web/src/components/chat/SearchPopover.tsx | 2 +-
 packages/web/src/components/layout/DmSearchBar.tsx | 4 ++--
 packages/web/src/components/layout/MainContent.tsx | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/components/chat/SearchPopover.tsx b/packages/web/src/components/chat/SearchPopover.tsx
index 0dc142b2..453ace0e 100644
--- a/packages/web/src/components/chat/SearchPopover.tsx
+++ b/packages/web/src/components/chat/SearchPopover.tsx
@@ -162,7 +162,7 @@ export function SearchPopover({ open, onClose, anchorRef, channelId, isDm, onJum
     >
       {/* Search input */}
       <div className="p-3 border-b border-white/[0.07]">
-        <div className="flex items-center gap-2 bg-surface-input rounded-lg px-3 py-2">
+        <div className="flex items-center gap-2 bg-surface-input rounded-lg px-3 py-2 border border-white/[0.06] shadow-input">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary flex-shrink-0">
             <path d="M21.707 20.293l-5.395-5.395A7.457 7.457 0 0018 10.5 7.5 7.5 0 1010.5 18c1.575 0 3.027-.486 4.228-1.31l5.476 5.476a.997.997 0 001.414 0l.089-.089a1 1 0 000-1.414l.001-.37zM10.5 16a5.5 5.5 0 110-11 5.5 5.5 0 010 11z" />
           </svg>
diff --git a/packages/web/src/components/layout/DmSearchBar.tsx b/packages/web/src/components/layout/DmSearchBar.tsx
index 85eda8ff..f7f754d1 100644
--- a/packages/web/src/components/layout/DmSearchBar.tsx
+++ b/packages/web/src/components/layout/DmSearchBar.tsx
@@ -359,7 +359,7 @@ export function DmSearchBar() {
   return (
     <div ref={anchorRef} className="flex-1 min-w-0">
       {active ? (
-        <div className="flex-1 min-h-8 bg-surface-base rounded-[4px] flex items-center px-2 gap-1.5">
+        <div className="flex-1 min-h-8 bg-surface-input rounded-[4px] flex items-center px-2 gap-1.5 border border-white/[0.06] shadow-input">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary flex-shrink-0">
             <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
           </svg>
@@ -376,7 +376,7 @@ export function DmSearchBar() {
       ) : (
         <button
           onClick={open}
-          className="w-full min-h-8 bg-surface-base text-txt-tertiary text-[13px] font-medium py-[5px] px-2 rounded-[4px] text-left hover:bg-surface-base transition-colors"
+          className="w-full min-h-8 bg-surface-input text-txt-tertiary text-[13px] font-medium py-[5px] px-2 rounded-[4px] text-left border border-white/[0.06] shadow-input hover:border-white/[0.1] transition-colors"
         >
           Find or start a conversation
         </button>
diff --git a/packages/web/src/components/layout/MainContent.tsx b/packages/web/src/components/layout/MainContent.tsx
index 86261b33..8b396d1e 100644
--- a/packages/web/src/components/layout/MainContent.tsx
+++ b/packages/web/src/components/layout/MainContent.tsx
@@ -206,8 +206,6 @@ export function MainContent() {
                 <path d="M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006ZM20 20.006H22V19.006C22 16.451 20.178 14.471 17.532 13.471C19.461 14.601 20 16.561 20 19.006V20.006Z" />
               </svg>
             </button>
-            <MemberListToggleButton />
-            <div className="w-[1px] h-5 bg-border-soft mx-1" />
             <button
               ref={searchButtonRef}
               onClick={() => setSearchOpen(!searchOpen)}
@@ -218,6 +216,8 @@ export function MainContent() {
                 <path d="M21.707 20.293l-5.395-5.395A7.457 7.457 0 0018 10.5 7.5 7.5 0 1010.5 18c1.575 0 3.027-.486 4.228-1.31l5.476 5.476a.997.997 0 001.414 0l.089-.089a1 1 0 000-1.414l.001-.37zM10.5 16a5.5 5.5 0 110-11 5.5 5.5 0 010 11z" />
               </svg>
             </button>
+            <div className="w-[1px] h-5 bg-border-soft mx-1" />
+            <MemberListToggleButton />
           </div>
         </div>
         <MessageList channelId={currentChannelId} jumpToMessageId={jumpToMessageId} onJumpComplete={() => setJumpToMessageId(null)} />
@@ -347,8 +347,6 @@ export function MainContent() {
               <path d="M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" />
             </svg>
           </button>
-          <MemberListToggleButton />
-          <div className="w-[1px] h-5 bg-border-soft mx-1" />
           <button
             ref={searchButtonRef}
             onClick={() => setSearchOpen(!searchOpen)}
@@ -359,6 +357,8 @@ export function MainContent() {
               <path d="M21.707 20.293l-5.395-5.395A7.457 7.457 0 0018 10.5 7.5 7.5 0 1010.5 18c1.575 0 3.027-.486 4.228-1.31l5.476 5.476a.997.997 0 001.414 0l.089-.089a1 1 0 000-1.414l.001-.37zM10.5 16a5.5 5.5 0 110-11 5.5 5.5 0 010 11z" />
             </svg>
           </button>
+          <div className="w-[1px] h-5 bg-border-soft mx-1" />
+          <MemberListToggleButton />
         </div>
       </div>
       <MessageList channelId={currentChannelId} jumpToMessageId={jumpToMessageId} onJumpComplete={() => setJumpToMessageId(null)} />