From 7608afccc4a4671ab30b7dfaca30e27b052b5619 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Mon, 2 Mar 2026 16:51:17 +0100
Subject: [PATCH] fix: panel separator borders and reaction spacing to match
 prototype

Replace @apply border-none with @apply border-0 on global * selector.
border-none sets border-style: none, which silently kills all Tailwind
border utilities (they only set width/color, relying on preflight's
border-style: solid). border-0 sets border-width: 0 instead, preserving
the solid style so border-r/border-l/border-b utilities render correctly.

- Add border-r border-border-hard to ChannelSidebar (both DM and server views)
- Add border-l border-border-hard to MemberSidebar and ActivityPanel
- Replace shadow-header with border-b border-border-hard on sidebar headers
- Remove duplicate mt-1 on reaction container (parent gap-1 already provides 4px)
---
 packages/web/src/components/chat/Message.tsx          | 2 +-
 packages/web/src/components/layout/ActivityPanel.tsx  | 2 +-
 packages/web/src/components/layout/ChannelSidebar.tsx | 8 ++++----
 packages/web/src/components/layout/MemberSidebar.tsx  | 2 +-
 packages/web/src/styles/globals.css                   | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/components/chat/Message.tsx b/packages/web/src/components/chat/Message.tsx
index 74593a4f..232d7c9d 100644
--- a/packages/web/src/components/chat/Message.tsx
+++ b/packages/web/src/components/chat/Message.tsx
@@ -243,7 +243,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
 
             {/* Reactions */}
             {Object.keys(reactionGroups).length > 0 && (
-              <div className="flex flex-wrap gap-1 mt-1">
+              <div className="flex flex-wrap gap-1">
                 {Object.entries(reactionGroups).map(([emoji, { count, me }]) => (
                   <button
                     key={emoji}
diff --git a/packages/web/src/components/layout/ActivityPanel.tsx b/packages/web/src/components/layout/ActivityPanel.tsx
index 698217b3..5321c72b 100644
--- a/packages/web/src/components/layout/ActivityPanel.tsx
+++ b/packages/web/src/components/layout/ActivityPanel.tsx
@@ -68,7 +68,7 @@ export function ActivityPanel() {
   );
 
   return (
-    <div className="w-60 bg-surface-channel flex-shrink-0 overflow-y-auto select-none no-scrollbar hidden md:block">
+    <div className="w-60 bg-surface-channel flex-shrink-0 overflow-y-auto select-none no-scrollbar hidden md:block border-l border-border-hard">
       <div className="p-3">
         <h3 className="text-[20px] font-bold text-txt-primary mb-4 px-2">Active Now</h3>
 
diff --git a/packages/web/src/components/layout/ChannelSidebar.tsx b/packages/web/src/components/layout/ChannelSidebar.tsx
index f56a3933..31b8d326 100644
--- a/packages/web/src/components/layout/ChannelSidebar.tsx
+++ b/packages/web/src/components/layout/ChannelSidebar.tsx
@@ -119,8 +119,8 @@ export function ChannelSidebar() {
   if (!server) {
     return (
       <>
-      <div className="w-60 md:w-full bg-surface-channel flex flex-col flex-shrink-0 select-none md:pl-[72px]">
-        <div className="h-12 px-[10px] flex items-center shadow-header z-10">
+      <div className="w-60 md:w-full bg-surface-channel flex flex-col flex-shrink-0 select-none md:pl-[72px] border-r border-border-hard">
+        <div className="h-12 px-[10px] flex items-center border-b border-border-hard z-10">
           <button className="flex-1 bg-surface-base text-txt-tertiary text-[13px] font-medium py-[5px] px-2 rounded-[4px] text-left hover:bg-surface-base/80 transition-colors">
             Find or start a conversation
           </button>
@@ -271,9 +271,9 @@ export function ChannelSidebar() {
 
   return (
     <>
-    <div className="w-60 md:w-full bg-surface-channel flex flex-col flex-shrink-0 select-none md:pl-[72px]">
+    <div className="w-60 md:w-full bg-surface-channel flex flex-col flex-shrink-0 select-none md:pl-[72px] border-r border-border-hard">
       {/* Server header */}
-      <div className="h-12 flex items-center shadow-header z-10 group/header">
+      <div className="h-12 flex items-center border-b border-border-hard z-10 group/header">
         <button
           onClick={() => openModal('serverSettings')}
           className="flex-1 h-full px-4 flex items-center justify-between hover:bg-interactive-hover transition-colors min-w-0"
diff --git a/packages/web/src/components/layout/MemberSidebar.tsx b/packages/web/src/components/layout/MemberSidebar.tsx
index 1f4b6ae0..30e0e89b 100644
--- a/packages/web/src/components/layout/MemberSidebar.tsx
+++ b/packages/web/src/components/layout/MemberSidebar.tsx
@@ -126,7 +126,7 @@ export function MemberSidebar() {
   };
 
   return (
-    <div className="w-60 bg-surface-members flex-shrink-0 overflow-y-auto select-none no-scrollbar hidden md:block">
+    <div className="w-60 bg-surface-members flex-shrink-0 overflow-y-auto select-none no-scrollbar hidden md:block border-l border-border-hard">
       <div className="p-3">
         {/* Role-based groups */}
         {roleGroups.map(([key, group]) => (
diff --git a/packages/web/src/styles/globals.css b/packages/web/src/styles/globals.css
index fa820d94..8b3cfbda 100644
--- a/packages/web/src/styles/globals.css
+++ b/packages/web/src/styles/globals.css
@@ -64,7 +64,7 @@
   }
 
   * {
-    @apply border-none;
+    @apply border-0;
     outline: none !important;
   }