From 907728ab24225a6d629365f5d6f23ed40c9caea3 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Mon, 2 Mar 2026 17:07:33 +0100
Subject: [PATCH] fix: replace broken border-hard/50 opacity with subtle white
 borders

Tailwind can't decompose CSS variables for opacity modifiers, so
border-border-hard/50 fell back to white currentColor. Replaced with
border-white/[0.06] on image attachments, code blocks, and action
toolbar. Also applied frosted glass material to message action toolbar.
---
 packages/web/src/components/chat/MarkdownRenderer.tsx | 4 ++--
 packages/web/src/components/chat/Message.tsx          | 6 +++---
 packages/web/src/components/chat/MessageList.tsx      | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/components/chat/MarkdownRenderer.tsx b/packages/web/src/components/chat/MarkdownRenderer.tsx
index 17b74d72..97fb60a3 100644
--- a/packages/web/src/components/chat/MarkdownRenderer.tsx
+++ b/packages/web/src/components/chat/MarkdownRenderer.tsx
@@ -80,7 +80,7 @@ function CodeBlock({ language, code }: { language: string; code: string }) {
   // 'text' means a bare fenced block with no language — render without highlighting
   if (language === 'text') {
     return (
-      <pre className="mt-1 p-3 bg-surface-elevated border border-border-hard/50 rounded text-[0.875rem] leading-[1.125rem] font-mono overflow-x-auto whitespace-pre">
+      <pre className="mt-1 p-3 bg-surface-elevated border border-white/[0.06] rounded text-[0.875rem] leading-[1.125rem] font-mono overflow-x-auto whitespace-pre">
         <code>{code}</code>
       </pre>
     );
@@ -90,7 +90,7 @@ function CodeBlock({ language, code }: { language: string; code: string }) {
     <Highlight theme={aetherTheme} code={code} language={language}>
       {({ style, tokens, getLineProps, getTokenProps }) => (
         <pre
-          className="mt-1 rounded border border-border-hard/50 text-[0.875rem] leading-[1.125rem] font-mono overflow-x-auto"
+          className="mt-1 rounded border border-white/[0.06] text-[0.875rem] leading-[1.125rem] font-mono overflow-x-auto"
           style={{ ...style, padding: '0.625rem 0.75rem', margin: 0 }}
         >
           {tokens.map((line, i) => {
diff --git a/packages/web/src/components/chat/Message.tsx b/packages/web/src/components/chat/Message.tsx
index 232d7c9d..c32defc3 100644
--- a/packages/web/src/components/chat/Message.tsx
+++ b/packages/web/src/components/chat/Message.tsx
@@ -270,7 +270,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
                   const isImage = att.mimetype.startsWith('image/');
                   if (isImage) {
                     return (
-                      <div key={att.id} className="max-w-fit mt-1 rounded-lg overflow-hidden border border-border-hard/50 bg-surface-base/20">
+                      <div key={att.id} className="max-w-fit mt-1 rounded-lg overflow-hidden border border-white/[0.06]">
                         <img
                           src={`/api/uploads/${att.filename}`}
                           alt={att.originalName}
@@ -312,8 +312,8 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
 
       {/* Action buttons on hover */}
       {isHovered && !isEditing && (
-        <div className="absolute -top-[18px] right-4 flex items-center bg-surface-chat border border-border-hard/50 rounded-[4px] shadow-elevation-low overflow-hidden z-10 h-8">
-          <div className="flex items-center px-1 border-r border-border-hard/50 h-full">
+        <div className="absolute -top-[18px] right-4 flex items-center glass rounded-[10px] overflow-hidden z-10 h-8">
+          <div className="flex items-center px-1 border-r border-white/[0.06] h-full">
             {['👍', '❤️', '😂', '😮'].map(emoji => (
               <button
                 key={emoji}
diff --git a/packages/web/src/components/chat/MessageList.tsx b/packages/web/src/components/chat/MessageList.tsx
index 05a6e674..5e5bf58e 100644
--- a/packages/web/src/components/chat/MessageList.tsx
+++ b/packages/web/src/components/chat/MessageList.tsx
@@ -113,7 +113,7 @@ export function MessageList({ channelId }: MessageListProps) {
   return (
     <div
       ref={containerRef}
-      className="flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin"
+      className="flex-1 overflow-y-auto overflow-x-hidden no-scrollbar"
       onScroll={handleScroll}
     >
       {isLoadingMore && (