fix(split-view): left-align close buttons in split view tabs

[ritiksahni]

Problem Statement

When switching from a normal tab to a split view tab group in the vertical tab bar, users often click the center area of the split view group. However, with multiple tabs (3-4) in split view, the close buttons (X) appear in the center area where users naturally click, leading to accidental tab closes.

I personally faced this problem while having a split view group for my reading session across multiple tabs. I accidentally closed the tabs multiple times while switching.

User Impact:

• Accidental tab closes when clicking center to switch tabs
• Poor UX especially with 3-4 tabs in split view

Proposed Solution

Position all close buttons on the left edge of each tab in split view groups, instead of right/center positioning. This minimal change:

• Prevents accidental closes when clicking center area
• Maintains close button accessibility
• Zero breaking changes. It's just repositioning for better UX.

Changes

• Modified src/zen/split-view/zen-split-group.inc.css to position close buttons on left edge
• Added padding to tab content to accommodate left-positioned buttons

Testing

Tested with:

• 2 tabs in split view
• 3-4 tabs in split view (most problematic case)
• Switching from normal tabs to split view groups

Screenshots

[mr-cheffy]

@JaceThings thoughts on this?

[simonalveteg]

I don't think it would make much sense to left align the close buttons.

One option is to remove the close buttons from split views, and instead have a single "unsplit" button on the right (not sure how that icon would look though).

[ritiksahni]

@simonalveteg - thanks for your comment.

I am open to working on a different design for this problem altogether. Unsplit button would be a step forward, I agree.

Are you proposing that we don't have a close button for each individual tab in split view altogether?

[simonalveteg]

I personally don't mind having a close button for each individual tab in the split, especially since the buttons don't seem to show up if there isn't enough horizontal space to display them - but this is also why I don't think the buttons are strictly necessary. An "unsplit"-icon could be displayed no matter how many tabs are in the split view.

I also feel like there's some design inconsistency when it comes to how split views are handled in the sidebar. Having individual close buttons indicates that these are different objects you can interact with, but a lot of the options in the right click context menu will act upon both tabs as a group. As an example:

Actions that act upon a single tab in the split view:

• Reload tab
• Mute tab
• Duplicate tab
• Bookmark tab
• Share
• Close tab

Actions that act upon the split view as a whole:

• Pin tab
• Unload tab
• Move tab
• Change tab(s) to workspace

A "tab" can either be a single tab or all the tabs in the split view depending on which action you click on (maybe just change the names of these actions to e.g. "Pin split view"?)

There's also currently no way to unsplit a split view from the sidebar.

[mr-cheffy]

I dont think this would be accepted as close buttons are always on the right, and changing the order just for split views would make it feel inconsistent. It also shifts the entire tab focus which can be distracting, and I dont see how it would fix the original issue (Accidental tab closes when clicking center to switch tabs) anyways. Sorry