From 0df90e34de3e486fcad537c4d1714509ed97e68e Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 16 Apr 2026 22:39:23 +0530 Subject: [PATCH 1/3] style: restyle sidebar Files/AI tabs as pill buttons --- src/styles/Extn-SidebarTabs.less | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/src/styles/Extn-SidebarTabs.less b/src/styles/Extn-SidebarTabs.less index 9a79950d70..af74247b94 100644 --- a/src/styles/Extn-SidebarTabs.less +++ b/src/styles/Extn-SidebarTabs.less @@ -23,11 +23,10 @@ #navTabBar { display: none; align-items: center; + gap: 0.25rem; background-color: @bc-ai-sidebar-bg; - height: 2rem; - overflow: hidden; + padding: 0.35rem 0.5rem; user-select: none; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); &.has-tabs { display: flex; @@ -38,12 +37,11 @@ display: inline-flex; align-items: center; gap: 0.35rem; - padding: 0 0.75rem; - height: 100%; + padding: 0.25rem 0.7rem; cursor: pointer; - position: relative; color: @project-panel-text-2; font-size: 0.85rem; + border-radius: 4px; transition: color 0.15s ease, background-color 0.15s ease; i { @@ -57,17 +55,7 @@ &.active { color: @project-panel-text-1; - background-color: rgba(255, 255, 255, 0.04); - - &::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 2px; - background-color: @project-panel-text-1; - } + background-color: rgba(255, 255, 255, 0.12); } } From c2dd9908c4b9792800404d7dcbf1a77f842971e0 Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 16 Apr 2026 22:48:37 +0530 Subject: [PATCH 2/3] style: refine sidebar tab pills with inset track and depth --- src/styles/Extn-SidebarTabs.less | 39 +++++++++++++++++++++----------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/src/styles/Extn-SidebarTabs.less b/src/styles/Extn-SidebarTabs.less index af74247b94..e3dd444d03 100644 --- a/src/styles/Extn-SidebarTabs.less +++ b/src/styles/Extn-SidebarTabs.less @@ -23,39 +23,52 @@ #navTabBar { display: none; align-items: center; - gap: 0.25rem; - background-color: @bc-ai-sidebar-bg; - padding: 0.35rem 0.5rem; + gap: 2px; + width: fit-content; + margin: 0.5rem 0.5rem 0.4rem; + padding: 3px; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 7px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); user-select: none; &.has-tabs { - display: flex; + display: inline-flex; } } .sidebar-tab { display: inline-flex; align-items: center; - gap: 0.35rem; - padding: 0.25rem 0.7rem; + gap: 0.4rem; + padding: 0.25rem 0.75rem; cursor: pointer; color: @project-panel-text-2; - font-size: 0.85rem; - border-radius: 4px; - transition: color 0.15s ease, background-color 0.15s ease; + font-size: 0.8rem; + font-weight: 500; + border-radius: 5px; + transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; i { - font-size: 0.75rem; + font-size: 0.78rem; + opacity: 0.85; } - &:hover { + &:hover:not(.active) { color: @project-panel-text-1; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.04); } &.active { color: @project-panel-text-1; - background-color: rgba(255, 255, 255, 0.12); + background-color: rgba(255, 255, 255, 0.09); + box-shadow: + 0 1px 0 rgba(255, 255, 255, 0.05) inset, + 0 1px 2px rgba(0, 0, 0, 0.2); + + i { + opacity: 1; + } } } From e252d9b8690c39409087e5ca6c3f8918f1352340 Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 16 Apr 2026 22:52:44 +0530 Subject: [PATCH 3/3] style: expand sidebar tab pills to full sidebar width --- src/styles/Extn-SidebarTabs.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/styles/Extn-SidebarTabs.less b/src/styles/Extn-SidebarTabs.less index e3dd444d03..f16716c215 100644 --- a/src/styles/Extn-SidebarTabs.less +++ b/src/styles/Extn-SidebarTabs.less @@ -22,9 +22,8 @@ #navTabBar { display: none; - align-items: center; + align-items: stretch; gap: 2px; - width: fit-content; margin: 0.5rem 0.5rem 0.4rem; padding: 3px; background-color: rgba(0, 0, 0, 0.3); @@ -33,13 +32,15 @@ user-select: none; &.has-tabs { - display: inline-flex; + display: flex; } } .sidebar-tab { display: inline-flex; align-items: center; + justify-content: center; + flex: 1 1 0; gap: 0.4rem; padding: 0.25rem 0.75rem; cursor: pointer;