From 2404538270e59dbacacb78be942af7cfa44f37d7 Mon Sep 17 00:00:00 2001
From: sravan <sravanm@bizgaze.com>
Date: Wed, 1 Jul 2026 16:46:40 +0530
Subject: [PATCH] fix(ui): modern thin scrollbars app-wide (remove classic
 up/down arrows)

Only the chat LIST had styled scrollbars; the chat message area and every other scroll
region fell back to the OS scrollbar, which in the Electron/Windows shell shows classic
up/down stepper arrows. Added a global ::-webkit-scrollbar style (thin, rounded thumb,
scrollbar-button hidden) + scrollbar-width:thin to home.html, share.html, connect.html,
dashboard.html. (home build batch18)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 server/public/connect.html   |  7 +++++++
 server/public/dashboard.html |  7 +++++++
 server/public/home.html      | 12 +++++++++++-
 server/public/share.html     |  7 +++++++
 4 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/server/public/connect.html b/server/public/connect.html
index d3bea81..2dede34 100644
--- a/server/public/connect.html
+++ b/server/public/connect.html
@@ -7,6 +7,13 @@
 <style>
   :root{ --brand:#FFC708; --brand-d:#E0AC00; --blue:#1F3B73; --blue-d:#16294f; --ink:#1f2430; --muted:#6b7280; --bg:#f6f8fb; --card:#fff; --line:#e6e9ef; }
   *{box-sizing:border-box;}
+  /* Modern thin scrollbars (no classic up/down arrows in the Electron shell) */
+  ::-webkit-scrollbar{width:9px;height:9px;}
+  ::-webkit-scrollbar-button{display:none!important;width:0;height:0;}
+  ::-webkit-scrollbar-track{background:transparent;}
+  ::-webkit-scrollbar-thumb{background:#c7d0dd;border-radius:9px;border:2px solid transparent;background-clip:content-box;}
+  ::-webkit-scrollbar-thumb:hover{background:#aab6c8;}
+  *{scrollbar-width:thin;scrollbar-color:#c7d0dd transparent;}
   body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);margin:0;}
   .topbar{background:var(--blue);padding:.7rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
   .brandrow{display:flex;align-items:center;gap:.6rem;}
diff --git a/server/public/dashboard.html b/server/public/dashboard.html
index d3d94fe..67c8569 100644
--- a/server/public/dashboard.html
+++ b/server/public/dashboard.html
@@ -7,6 +7,13 @@
 <style>
   :root{ --brand:#FFC708; --brand-d:#E0AC00; --blue:#1F3B73; --blue-d:#16294f; --blue-soft:#EAF0FB; --ink:#1f2430; --muted:#6b7280; --bg:#f6f8fb; --card:#fff; --line:#e6e9ef; --green:#16a34a; --red:#b91c1c; }
   *{box-sizing:border-box;}
+  /* Modern thin scrollbars (no classic up/down arrows in the Electron shell) */
+  ::-webkit-scrollbar{width:9px;height:9px;}
+  ::-webkit-scrollbar-button{display:none!important;width:0;height:0;}
+  ::-webkit-scrollbar-track{background:transparent;}
+  ::-webkit-scrollbar-thumb{background:#c7d0dd;border-radius:9px;border:2px solid transparent;background-clip:content-box;}
+  ::-webkit-scrollbar-thumb:hover{background:#aab6c8;}
+  *{scrollbar-width:thin;scrollbar-color:#c7d0dd transparent;}
   body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);margin:0;}
   header{background:var(--blue);padding:.75rem 1.5rem;display:flex;justify-content:space-between;align-items:center;}
   .brandrow{display:flex;align-items:center;gap:.6rem;}
diff --git a/server/public/home.html b/server/public/home.html
index 153011a..8eae0f8 100644
--- a/server/public/home.html
+++ b/server/public/home.html
@@ -129,6 +129,16 @@
   .search-x{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--muted);cursor:pointer;padding:.2rem;border-radius:6px;display:grid;place-items:center;}
   .search-x:hover{color:var(--blue);background:var(--blue-soft);}
 
+  /* Modern thin scrollbars for every scroll area (chat, modals, lists, …). Without this,
+     Electron on Windows falls back to the classic scrollbar with up/down stepper arrows. */
+  ::-webkit-scrollbar{width:9px;height:9px;}
+  ::-webkit-scrollbar-button{display:none!important;width:0;height:0;}
+  ::-webkit-scrollbar-track{background:transparent;}
+  ::-webkit-scrollbar-thumb{background:#c7d0dd;border-radius:9px;border:2px solid transparent;background-clip:content-box;}
+  ::-webkit-scrollbar-thumb:hover{background:#aab6c8;}
+  ::-webkit-scrollbar-corner{background:transparent;}
+  *{scrollbar-width:thin;scrollbar-color:#c7d0dd transparent;}
+
   .chatlist{overflow-y:auto;flex:1 1 auto;padding:.4rem;scrollbar-width:thin;scrollbar-color:transparent transparent;}
   .chatlist:hover{scrollbar-color:#c7d0dd transparent;}
   .chatlist::-webkit-scrollbar{width:7px;}
@@ -721,7 +731,7 @@
 </head>
 <body>
 <script src="/icons.js?v=4"></script>
-<script>window.__BUILD='2026-06-30-batch17';console.log('%cBiz Connect','color:#1F3B73;font-weight:bold','build '+window.__BUILD);</script>
+<script>window.__BUILD='2026-06-30-batch18';console.log('%cBiz Connect','color:#1F3B73;font-weight:bold','build '+window.__BUILD);</script>
 <div class="loading" id="loading">Loading…</div>
 
 <header>
diff --git a/server/public/share.html b/server/public/share.html
index 9d09f81..ce70db2 100644
--- a/server/public/share.html
+++ b/server/public/share.html
@@ -7,6 +7,13 @@
 <style>
   :root{ --brand:#FFC708; --brand-d:#E0AC00; --blue:#1F3B73; --blue-d:#16294f; --blue-soft:#EAF0FB; --ink:#1f2430; --muted:#6b7280; --bg:#f6f8fb; --card:#ffffff; --line:#e6e9ef; }
   *{box-sizing:border-box;}
+  /* Modern thin scrollbars (no classic up/down arrows in the Electron shell) */
+  ::-webkit-scrollbar{width:9px;height:9px;}
+  ::-webkit-scrollbar-button{display:none!important;width:0;height:0;}
+  ::-webkit-scrollbar-track{background:transparent;}
+  ::-webkit-scrollbar-thumb{background:#c7d0dd;border-radius:9px;border:2px solid transparent;background-clip:content-box;}
+  ::-webkit-scrollbar-thumb:hover{background:#aab6c8;}
+  *{scrollbar-width:thin;scrollbar-color:#c7d0dd transparent;}
   body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);margin:0;}
   .stage{display:flex;min-height:100vh;}
   .brandpanel{flex:1;background:linear-gradient(160deg,var(--blue),var(--blue-d));color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2.5rem;}