From 3042af45753fe672545adcfe817a7ded7c186dae Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Tue, 6 May 2025 17:20:46 +0800
Subject: [PATCH] style(dockview): reduce tabs container height and center
 align items

- Changed --dv-tabs-and-actions-container-height from 44px to 36px
- Added align-items: center to .dv-tabs-container
- Improved CSS formatting for better readability
---
 src/styles/dockview.css | 162 ++++++++++++++++++++++++++++------------
 1 file changed, 114 insertions(+), 48 deletions(-)

diff --git a/src/styles/dockview.css b/src/styles/dockview.css
index b2cc7b5..f2fb0c8 100644
--- a/src/styles/dockview.css
+++ b/src/styles/dockview.css
@@ -19,7 +19,10 @@
 .dv-scrollable:hover .dv-scrollbar-horizontal,
 .dv-scrollable.dv-scrollable-resizing .dv-scrollbar-horizontal,
 .dv-scrollable.dv-scrollable-scrolling .dv-scrollbar-horizontal {
-  background-color: var(--dv-scrollbar-background-color, rgba(255, 255, 255, 0.25));
+  background-color: var(
+    --dv-scrollbar-background-color,
+    rgba(255, 255, 255, 0.25)
+  );
 }
 
 .dv-svg {
@@ -33,7 +36,6 @@
 .dockview-theme-abyss-spaced {
   --dv-paneview-active-outline-color: dodgerblue;
   --dv-tabs-and-actions-container-font-size: 13px;
-  --dv-tabs-and-actions-container-height: 35px;
   --dv-drag-over-background-color: hsl(var(--accent) / 50%);
   --dv-drag-over-border-color: transparent;
   --dv-tabs-container-scrollbar-color: #888;
@@ -47,8 +49,7 @@
   --dv-active-sash-transition-duration: 0.1s;
   --dv-active-sash-transition-delay: 0.5s;
   --dv-tab-font-size: 12px;
-  --dv-tab-margin: 0.5rem 0.25rem;
-  --dv-tabs-and-actions-container-height: 44px;
+  --dv-tabs-and-actions-container-height: 36px;
   --dv-border-radius: 24px;
   --dv-color-abyss-dark: hsl(var(--background));
   --dv-color-abyss: hsl(var(--muted));
@@ -60,15 +61,25 @@
   --dv-drag-over-border: 2px solid var(--dv-color-abyss-accent);
   --dv-group-view-background-color: var(--dv-color-abyss-dark);
   --dv-tabs-and-actions-container-background-color: var(--dv-color-abyss);
-  --dv-activegroup-visiblepanel-tab-background-color: var(--dv-color-abyss-lighter);
-  --dv-activegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss-light);
-  --dv-inactivegroup-visiblepanel-tab-background-color: var(--dv-color-abyss-lighter);
-  --dv-inactivegroup-hiddenpanel-tab-background-color: var(--dv-color-abyss-light);
+  --dv-activegroup-visiblepanel-tab-background-color: var(
+    --dv-color-abyss-lighter
+  );
+  --dv-activegroup-hiddenpanel-tab-background-color: var(
+    --dv-color-abyss-light
+  );
+  --dv-inactivegroup-visiblepanel-tab-background-color: var(
+    --dv-color-abyss-lighter
+  );
+  --dv-inactivegroup-hiddenpanel-tab-background-color: var(
+    --dv-color-abyss-light
+  );
   --dv-tab-divider-color: transparent;
   --dv-activegroup-visiblepanel-tab-color: var(--dv-color-abyss-primary-text);
   --dv-activegroup-hiddenpanel-tab-color: var(--dv-color-abyss-secondary-text);
   --dv-inactivegroup-visiblepanel-tab-color: var(--dv-color-abyss-primary-text);
-  --dv-inactivegroup-hiddenpanel-tab-color: var(--dv-color-abyss-secondary-text);
+  --dv-inactivegroup-hiddenpanel-tab-color: var(
+    --dv-color-abyss-secondary-text
+  );
   --dv-separator-border: transparent;
   --dv-paneview-header-border-color: rgb(51, 51, 51);
   --dv-active-sash-color: var(--dv-color-abyss-accent);
@@ -143,7 +154,11 @@
 .dv-drop-target-container .dv-drop-target-anchor {
   position: relative;
   border: var(--dv-drag-over-border);
-  transition: opacity var(--dv-transition-duration) ease-in, top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out;
+  transition: opacity var(--dv-transition-duration) ease-in,
+    top var(--dv-transition-duration) ease-out,
+    left var(--dv-transition-duration) ease-out,
+    width var(--dv-transition-duration) ease-out,
+    height var(--dv-transition-duration) ease-out;
   background-color: var(--dv-drag-over-background-color);
   opacity: 1;
 }
@@ -153,7 +168,7 @@
   --dv-transition-duration: 70ms;
 }
 
-.dv-drop-target>.dv-drop-target-dropzone {
+.dv-drop-target > .dv-drop-target-dropzone {
   position: absolute;
   left: 0px;
   top: 0px;
@@ -163,31 +178,43 @@
   pointer-events: none;
 }
 
-.dv-drop-target>.dv-drop-target-dropzone>.dv-drop-target-selection {
+.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection {
   position: relative;
   box-sizing: border-box;
   height: 100%;
   width: 100%;
   border: var(--dv-drag-over-border);
   background-color: var(--dv-drag-over-background-color);
-  transition: top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out, opacity var(--dv-transition-duration) ease-out;
+  transition: top var(--dv-transition-duration) ease-out,
+    left var(--dv-transition-duration) ease-out,
+    width var(--dv-transition-duration) ease-out,
+    height var(--dv-transition-duration) ease-out,
+    opacity var(--dv-transition-duration) ease-out;
   will-change: transform;
   pointer-events: none;
 }
 
-.dv-drop-target>.dv-drop-target-dropzone>.dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {
+.dv-drop-target
+  > .dv-drop-target-dropzone
+  > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical {
   border-top: 1px solid var(--dv-drag-over-border-color);
 }
 
-.dv-drop-target>.dv-drop-target-dropzone>.dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {
+.dv-drop-target
+  > .dv-drop-target-dropzone
+  > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical {
   border-bottom: 1px solid var(--dv-drag-over-border-color);
 }
 
-.dv-drop-target>.dv-drop-target-dropzone>.dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {
+.dv-drop-target
+  > .dv-drop-target-dropzone
+  > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal {
   border-left: 1px solid var(--dv-drag-over-border-color);
 }
 
-.dv-drop-target>.dv-drop-target-dropzone>.dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {
+.dv-drop-target
+  > .dv-drop-target-dropzone
+  > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal {
   border-right: 1px solid var(--dv-drag-over-border-color);
 }
 
@@ -209,22 +236,34 @@
   position: relative;
 }
 
-.dv-groupview.dv-active-group>.dv-tabs-and-actions-container .dv-tabs-container>.dv-tab.dv-active-tab {
+.dv-groupview.dv-active-group
+  > .dv-tabs-and-actions-container
+  .dv-tabs-container
+  > .dv-tab.dv-active-tab {
   background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
   color: var(--dv-activegroup-visiblepanel-tab-color);
 }
 
-.dv-groupview.dv-active-group>.dv-tabs-and-actions-container .dv-tabs-container>.dv-tab.dv-inactive-tab {
+.dv-groupview.dv-active-group
+  > .dv-tabs-and-actions-container
+  .dv-tabs-container
+  > .dv-tab.dv-inactive-tab {
   background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
   color: var(--dv-activegroup-hiddenpanel-tab-color);
 }
 
-.dv-groupview.dv-inactive-group>.dv-tabs-and-actions-container .dv-tabs-container>.dv-tab.dv-active-tab {
+.dv-groupview.dv-inactive-group
+  > .dv-tabs-and-actions-container
+  .dv-tabs-container
+  > .dv-tab.dv-active-tab {
   background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
   color: var(--dv-inactivegroup-visiblepanel-tab-color);
 }
 
-.dv-groupview.dv-inactive-group>.dv-tabs-and-actions-container .dv-tabs-container>.dv-tab.dv-inactive-tab {
+.dv-groupview.dv-inactive-group
+  > .dv-tabs-and-actions-container
+  .dv-tabs-container
+  > .dv-tab.dv-inactive-tab {
   background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
   color: var(--dv-inactivegroup-hiddenpanel-tab-color);
 }
@@ -250,7 +289,7 @@
   outline: none;
 }
 
-.dv-groupview>.dv-content-container {
+.dv-groupview > .dv-content-container {
   flex-grow: 1;
   min-height: 0;
   outline: none;
@@ -423,7 +462,7 @@
   background-color: transparent !important;
 }
 
-.dv-pane-container .dv-view:not(:first-child) .dv-pane>.dv-pane-header {
+.dv-pane-container .dv-view:not(:first-child) .dv-pane > .dv-pane-header {
   border-top: 1px solid var(--dv-paneview-header-border-color);
 }
 
@@ -441,12 +480,12 @@
   align-items: center;
 }
 
-.dv-pane-container .dv-view .dv-default-header>span {
+.dv-pane-container .dv-view .dv-default-header > span {
   padding-left: 8px;
   flex-grow: 1;
 }
 
-.dv-pane-container:first-of-type>.dv-pane>.dv-pane-header {
+.dv-pane-container:first-of-type > .dv-pane > .dv-pane-header {
   border-top: none !important;
 }
 
@@ -533,7 +572,7 @@
   width: 100%;
 }
 
-.dv-split-view-container.dv-splitview-disabled>.dv-sash-container>.dv-sash {
+.dv-split-view-container.dv-splitview-disabled > .dv-sash-container > .dv-sash {
   pointer-events: none;
 }
 
@@ -547,28 +586,38 @@
   height: 100%;
 }
 
-.dv-split-view-container.dv-horizontal>.dv-sash-container>.dv-sash {
+.dv-split-view-container.dv-horizontal > .dv-sash-container > .dv-sash {
   height: 100%;
   width: 4px;
 }
 
-.dv-split-view-container.dv-horizontal>.dv-sash-container>.dv-sash.dv-enabled {
+.dv-split-view-container.dv-horizontal
+  > .dv-sash-container
+  > .dv-sash.dv-enabled {
   cursor: ew-resize;
 }
 
-.dv-split-view-container.dv-horizontal>.dv-sash-container>.dv-sash.dv-disabled {
+.dv-split-view-container.dv-horizontal
+  > .dv-sash-container
+  > .dv-sash.dv-disabled {
   cursor: default;
 }
 
-.dv-split-view-container.dv-horizontal>.dv-sash-container>.dv-sash.dv-maximum {
+.dv-split-view-container.dv-horizontal
+  > .dv-sash-container
+  > .dv-sash.dv-maximum {
   cursor: w-resize;
 }
 
-.dv-split-view-container.dv-horizontal>.dv-sash-container>.dv-sash.dv-minimum {
+.dv-split-view-container.dv-horizontal
+  > .dv-sash-container
+  > .dv-sash.dv-minimum {
   cursor: e-resize;
 }
 
-.dv-split-view-container.dv-horizontal>.dv-view-container>.dv-view:not(:first-child)::before {
+.dv-split-view-container.dv-horizontal
+  > .dv-view-container
+  > .dv-view:not(:first-child)::before {
   height: 100%;
   width: 1px;
 }
@@ -577,32 +626,42 @@
   width: 100%;
 }
 
-.dv-split-view-container.dv-vertical>.dv-sash-container>.dv-sash {
+.dv-split-view-container.dv-vertical > .dv-sash-container > .dv-sash {
   width: 100%;
   height: 4px;
 }
 
-.dv-split-view-container.dv-vertical>.dv-sash-container>.dv-sash.dv-enabled {
+.dv-split-view-container.dv-vertical
+  > .dv-sash-container
+  > .dv-sash.dv-enabled {
   cursor: ns-resize;
 }
 
-.dv-split-view-container.dv-vertical>.dv-sash-container>.dv-sash.dv-disabled {
+.dv-split-view-container.dv-vertical
+  > .dv-sash-container
+  > .dv-sash.dv-disabled {
   cursor: default;
 }
 
-.dv-split-view-container.dv-vertical>.dv-sash-container>.dv-sash.dv-maximum {
+.dv-split-view-container.dv-vertical
+  > .dv-sash-container
+  > .dv-sash.dv-maximum {
   cursor: n-resize;
 }
 
-.dv-split-view-container.dv-vertical>.dv-sash-container>.dv-sash.dv-minimum {
+.dv-split-view-container.dv-vertical
+  > .dv-sash-container
+  > .dv-sash.dv-minimum {
   cursor: s-resize;
 }
 
-.dv-split-view-container.dv-vertical>.dv-view-container>.dv-view {
+.dv-split-view-container.dv-vertical > .dv-view-container > .dv-view {
   width: 100%;
 }
 
-.dv-split-view-container.dv-vertical>.dv-view-container>.dv-view:not(:first-child)::before {
+.dv-split-view-container.dv-vertical
+  > .dv-view-container
+  > .dv-view:not(:first-child)::before {
   height: 1px;
   width: 100%;
 }
@@ -647,7 +706,8 @@
   position: absolute;
 }
 
-.dv-split-view-container.dv-separator-border .dv-view:not(:first-child)::before {
+.dv-split-view-container.dv-separator-border
+  .dv-view:not(:first-child)::before {
   content: " ";
   position: absolute;
   top: 0;
@@ -739,11 +799,11 @@
   cursor: pointer;
 }
 
-.dv-tabs-overflow-dropdown-default>span {
+.dv-tabs-overflow-dropdown-default > span {
   padding-left: 0.25rem;
 }
 
-.dv-tabs-overflow-dropdown-default>svg {
+.dv-tabs-overflow-dropdown-default > svg {
   transform: rotate(90deg);
 }
 
@@ -752,6 +812,7 @@
   height: 100%;
   overflow: auto;
   scrollbar-width: thin;
+  align-items: center;
   /* Track */
   /* Handle */
 }
@@ -780,7 +841,7 @@
   background: var(--dv-tabs-container-scrollbar-color);
 }
 
-.dv-scrollable>.dv-tabs-container {
+.dv-scrollable > .dv-tabs-container {
   overflow: hidden;
 }
 
@@ -825,20 +886,25 @@
   font-size: var(--dv-tabs-and-actions-container-font-size);
 }
 
-.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-scrollable {
+.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab
+  .dv-scrollable {
   flex-grow: 1;
 }
 
-.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container {
+.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab
+  .dv-tabs-container {
   flex-grow: 1;
 }
 
-.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-tabs-container .dv-tab {
+.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab
+  .dv-tabs-container
+  .dv-tab {
   flex-grow: 1;
   padding: 0px;
 }
 
-.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab .dv-void-container {
+.dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab
+  .dv-void-container {
   flex-grow: 0;
 }
 
@@ -855,4 +921,4 @@
 .dv-watermark {
   display: flex;
   height: 100%;
-}
\ No newline at end of file
+}