Improved stylings for split view goups

src/browser/base/content/zen-styles/zen-folders.css

@@ -1,29 +1,54 @@
 tab-group[split-view-group] {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(auto-fit, minmax(calc(var(--tab-pinned-min-width-expanded) + 20px), auto));
+  flex-wrap: nowrap;
-  gap: 1px;
   border-radius: var(--border-radius-medium);
-  padding: 0;
+  padding: 0 2px;
   margin-inline: var(--tab-block-margin);
   margin-block: var(--tab-block-margin);
   min-height: var(--tab-min-height);
   outline: var(--tab-outline);
   outline-offset: var(--tab-outline-offset);
   outline-color: var(--tab-selected-outline-color);
-  padding: 1px;
   transition: scale 0.1s ease;
+  align-items: center;
+  --zen-split-view-active-tab-bg: color-mix(in srgb, var(--zen-toolbar-element-bg), transparent 40%);
 
-  & > * {
+  & > .tabbrowser-tab {
-    --tab-min-height: 32px;
+    --tab-min-height: 28px;
-    --tab-selected-bgcolor: var(--zen-toolbar-element-bg);
+    --tab-selected-bgcolor: var(--zen-split-view-active-tab-bg);
+    --tab-hover-background-color: transparent;
     --tab-selected-shadow: none;
     --border-radius-medium: var(--tab-border-radius);
     --zen-active-tab-scale: 1;
+
+    flex: 1 !important;
+
+    &:not(:last-child)::after {
+      content: '';
+      width: 1px;
+      height: 16px;
+      background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
 
-  &:has(tab[visuallyselected]) {
+  &:has(> tab[visuallyselected]) {
     background-color: var(--tab-selected-bgcolor);
     box-shadow: var(--tab-selected-shadow);
+
+    & > .tabbrowser-tab {
+      --tab-hover-background-color: var(--zen-split-view-active-tab-bg);
+      & .tab-background {
+        background-color: var(--zen-split-view-active-tab-bg);
+      }
+
+      &::after {
+        display: none;
+      }
+    }
   }
 
   &:active {

src/browser/base/content/zen-styles/zen-theme.css

@@ -104,7 +104,7 @@
   --zen-button-border-radius: 5px;
   --zen-button-padding: 0.6rem 1.2rem;
 
-  --zen-toolbar-element-bg: light-dark(rgba(89, 89, 89, 0.1), rgba(255, 255, 255, 0.125));
+  --zen-toolbar-element-bg: light-dark(rgba(89, 89, 89, 0.1), rgba(255, 255, 255, 0.1));
 
   /* Toolbar */
   --zen-toolbar-height: 38px;

src/browser/base/zen-components/ZenViewSplitter.mjs

@@ -69,6 +69,8 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
   _edgeHoverSize;
   minResizeWidth;
 
+  MAX_TABS = 4;
+
   init() {
     XPCOMUtils.defineLazyPreferenceGetter(this, 'canChangeTabOnHover', 'zen.splitView.change-on-hover', false);
     XPCOMUtils.defineLazyPreferenceGetter(this, 'minResizeWidth', 'zen.splitView.min-resize-width', 7);
@@ -673,7 +675,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
    * @returns {boolean} True if the tabs can be split, false otherwise.
    */
   contextCanSplitTabs() {
-    if (window.gBrowser.selectedTabs.length < 2) {
+    if (window.gBrowser.selectedTabs.length < 2 || window.gBrowser.selectedTabs.length > this.MAX_TABS) {
       return false;
     }
     for (const tab of window.gBrowser.selectedTabs) {
@@ -707,8 +709,8 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
    */
   splitTabs(tabs, gridType) {
     const firstisPinned = tabs[0].pinned;
-    tabs = tabs.filter((t) => t.pinned === firstisPinned);
+    tabs = tabs.filter((t) => t.pinned === firstisPinned && !t.hidden && !t.hasAttribute('zen-empty-tab'));
-    if (tabs.length < 2) {
+    if (tabs.length < 2 || tabs.length > this.MAX_TABS) {
       return;
     }
 
@@ -724,9 +726,10 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         group.layoutTree = this.calculateLayoutTree([...new Set(group.tabs.concat(tabs))], gridType);
       } else {
         // Add any tabs that are not already in the group
-        for (const tab of tabs) {
+        for (let i = 0; i < tabs.length; i++) {
-          if (!group.tabs.includes(tab) && tab.pinned === group.pinned) {
+          const tab = tabs[i];
-            group.tabs.push(tab);
+          if (!group.tabs.includes(tab) && tab.pinned === !!group.pinned) {
+            gBrowser.moveTabToGroup(tab, this._getSplitViewGroup(tabs));
             this.addTabToSplit(tab, group.layoutTree);
           }
         }
@@ -1302,7 +1305,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         const groupIndex = this._data.findIndex((group) => group.tabs.includes(droppedOnTab));
         const group = this._data[groupIndex];
 
-        if (!group.tabs.includes(draggedTab)) {
+        if (!group.tabs.includes(draggedTab) && group.tabs.length < this.MAX_TABS) {
           // First move the tab to the split view group
           let splitGroup = droppedOnTab.group;
           if (splitGroup && (!draggedTab.group || draggedTab.group !== splitGroup)) {