From 767db72847c40be5045ab93f13f68c5cf8ea753f Mon Sep 17 00:00:00 2001
From: byGalax <dennis@landmann.dev>
Date: Sat, 16 May 2026 15:33:36 +0200
Subject: [PATCH] fix(desktop): drop bright border on Settings SubSection cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The inner cards (Nachrichten-Ton / Klingelton / Audio-Gerät / Hotkeys /
…) looked like they had a stark white outline. The cause: --color-line
is a semi-transparent white token, and applying the `/60` alpha modifier
in `border-line/60` overrides the original alpha — so the inner border
ended up brighter than the outer Section's normal `border-line`.

Drop the border entirely. Background tint + caps heading is enough
grouping signal in a tab-pattern panel.
---
 apps/desktop/src/pages/SettingsPage.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/desktop/src/pages/SettingsPage.tsx b/apps/desktop/src/pages/SettingsPage.tsx
index dfa1c4b..09960d3 100644
--- a/apps/desktop/src/pages/SettingsPage.tsx
+++ b/apps/desktop/src/pages/SettingsPage.tsx
@@ -1310,9 +1310,13 @@ function Section({
 
 // Sub-heading inside a Section — used to chunk dense sections like Voice into
 // smaller named groups (Audio-Gerät / Qualität / PTT / Hotkeys / E2EE).
+// No border: `--color-line` is already a semi-transparent token, and applying
+// the `/60` opacity modifier brightens it (Tailwind overrides the original
+// alpha) which made the sub-cards look harsher than the outer Section. Plain
+// background tint + caps heading carry the grouping signal on their own.
 function SubSection({ title, children }: { title: string; children: React.ReactNode }) {
   return (
-    <div className="space-y-2 rounded-xl border border-line/60 bg-surface-3/40 p-4">
+    <div className="space-y-2 rounded-xl bg-surface-3/50 p-4">
       <h3 className="text-[11px] font-semibold uppercase tracking-[0.1em] text-fg-muted">
         {title}
       </h3>