From e0484d6fd62a7f5b9df5a94cb413efebb9607583 Mon Sep 17 00:00:00 2001
From: "mr. m" <mr.m@tuta.com>
Date: Fri, 23 Jan 2026 11:54:41 +0100
Subject: [PATCH] feat: Limit the amount of displayed moving tabs we show,
 b=no-bug, c=common, tabs

---
 src/zen/common/styles/zen-theme.css     | 2 +-
 src/zen/drag-and-drop/ZenDragAndDrop.js | 6 ++++--
 src/zen/tabs/zen-tabs/vertical-tabs.css | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css
index 4a783dcbb..69dd44f26 100644
--- a/src/zen/common/styles/zen-theme.css
+++ b/src/zen/common/styles/zen-theme.css
@@ -142,7 +142,7 @@
 
   --zen-toolbar-element-bg: light-dark(
     color-mix(in oklch, var(--toolbox-textcolor) 10%, transparent),
-    color-mix(in oklch, var(--toolbox-textcolor) 12.5%, transparent)
+    color-mix(in oklch, var(--toolbox-textcolor) 15%, transparent)
   );
 
   --zen-toolbar-element-bg-hover: light-dark(
diff --git a/src/zen/drag-and-drop/ZenDragAndDrop.js b/src/zen/drag-and-drop/ZenDragAndDrop.js
index 1c093a442..0c658cb89 100644
--- a/src/zen/drag-and-drop/ZenDragAndDrop.js
+++ b/src/zen/drag-and-drop/ZenDragAndDrop.js
@@ -129,12 +129,13 @@
       );
       const tabRect = window.windowUtils.getBoundsWithoutFlushing(movingTabs[0]);
       const wrapper = document.createElement("div");
+      let movingTabsCount = Math.min(movingTabs.length, 3);
       wrapper.style.width = tabRect.width + "px";
-      wrapper.style.height = tabRect.height * movingTabs.length + "px";
+      wrapper.style.height = tabRect.height * movingTabsCount + "px";
       wrapper.style.position = "fixed";
       wrapper.style.top = "-9999px";
       periphery.appendChild(wrapper);
-      for (let i = 0; i < movingTabs.length; i++) {
+      for (let i = 0; i < movingTabsCount; i++) {
         const tab = movingTabs[i];
         const tabClone = tab.cloneNode(true);
         if (tab.hasAttribute("zen-essential")) {
@@ -149,6 +150,7 @@
           // for the tab to be more visible. This is a hacky workaround.
           // TODO: Make windows and linux DnD use nsZenDragAndDrop::mDragImageOpacity
           tabClone.style.colorScheme = "light";
+          tabClone.style.color = "black";
         }
         if (i > 0) {
           tabClone.style.transform = `translate(${i * 4}px, -${i * (tabRect.height - 4)}px)`;
diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css
index 2dd3e1ddb..e757ec649 100644
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -296,7 +296,7 @@
   border-bottom: 0px solid transparent !important;
 
   --tab-block-margin: 2px;
-  --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.12));
+  --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.18));
   --tab-selected-shadow: 0 1px 1px 1px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.05)) !important;
   grid-gap: 0 !important;