Final tweaks for v3

frontend/src/css/layout.css

@@ -40,6 +40,7 @@
 .tab-bar {
   grid-column: 2;
   grid-row: 1;
+  position: relative;
   background: var(--bg-surface);
   border-bottom: 1px solid var(--border-subtle);
   display: flex;
@@ -53,13 +54,51 @@
   display: flex;
   align-items: center;
   flex: 1;
+  height: 100%;
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
-  scrollbar-width: none; /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+  scroll-behavior: smooth;
 }
 .tab-list::-webkit-scrollbar {
-  display: none;
+  height: 6px;
+}
+.tab-list::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: var(--radius-full);
+}
+.tab-list::-webkit-scrollbar-thumb:hover {
+  background: var(--text-tertiary);
+}
+
+.tab-bar::before,
+.tab-bar::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 1px;
+  z-index: 2;
+  width: 18px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+
+.tab-bar::before {
+  left: 0;
+  background: linear-gradient(90deg, var(--bg-surface), transparent);
+}
+
+.tab-bar::after {
+  right: calc(var(--tab-bar-height) * 2);
+  background: linear-gradient(-90deg, var(--bg-surface), transparent);
+}
+
+.tab-bar.has-overflow-left::before,
+.tab-bar.has-overflow-right::after {
+  opacity: 1;
 }
 
 /* -----------------------------------------------------------------------

frontend/src/css/tabs.css

@@ -240,7 +240,7 @@
 }
 
 .tab:hover .tab-sftp,
-.tab.active .tab-sftp {
+.tab.tab-active .tab-sftp {
   opacity: 1;
 }
 
@@ -268,11 +268,15 @@
     background var(--transition-fast),
     color var(--transition-fast);
   cursor: pointer;
-  margin-left: 2px;
+  margin: 0 2px 0 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  line-height: 1;
 }
 
 .tab:hover .tab-close,
-.tab.active .tab-close {
+.tab.tab-active .tab-close {
   opacity: 1;
 }
 
@@ -456,6 +460,28 @@
   /* Transparent hit area for right-click context menu */
 }
 
+/* -----------------------------------------------------------------------
+   Tab hover tooltip
+   ----------------------------------------------------------------------- */
+.tab-tooltip {
+  max-width: 360px;
+  white-space: normal;
+}
+
+.tab-tooltip-title {
+  max-width: 320px;
+  overflow: hidden;
+  color: var(--text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tab-tooltip-meta {
+  margin-top: 2px;
+  color: var(--text-tertiary);
+  font-weight: var(--weight-normal);
+}
+
 /* -----------------------------------------------------------------------
    Modified indicator (unsaved changes)
    ----------------------------------------------------------------------- */