## Problem:

When working with many `pinned tabs`, they consume significant
horizontal space in the tab bar, leaving less room for unpinned (active
working) tabs, especially on small screens. This creates a poor user
experience as users must constantly scroll to find their working tabs,
or the tabs become too narrow to read file names.


![8_tabs](https://github.com/user-attachments/assets/087a0b4d-8f1c-42f0-851c-b774228f11dd)

##  Solution:

Added a new opt-in setting `tab_bar.show_pinned_tabs_in_separate_row`
that displays pinned and unpinned tabs in two separate rows:
  - Top row: Pinned tabs with navigation buttons and tab bar controls
  - Bottom row: Unpinned (working) tabs with full horizontal space
 
- when pinned and not pinned tabs we show 2 rows:  

<img width="1512" height="159" alt="2_rows"
src="https://github.com/user-attachments/assets/62a85fcc-8073-40d2-a8e4-270efd0d0f21"
/>

This is a well-established UX pattern used in many popular IDEs
including JetBrains products (IntelliJ IDEA, WebStorm, PyCharm,
RubyMine), Visual Studio, and Eclipse.

The two-row layout only appears when both pinned AND unpinned tabs
exist. If only one type is present, a single row is displayed:
  
- when only not pinned tabs we show one row:

<img width="1510" height="111" alt="when only not pinned"
src="https://github.com/user-attachments/assets/048df4fc-4b17-4ea2-9c5b-b4db91cdfc78"
/>

- when only pinned tabs we show one row:

<img width="1510" height="111" alt="when only pinned tabs"
src="https://github.com/user-attachments/assets/7ccf2517-8711-4114-815d-6cbb1e89d7e2"
/>

  **Important** - Default Behavior Preserved:

- The setting defaults to false - existing users will see no change
whatsoever
- Original tab bar logic is preserved in a dedicated
`render_single_row_tab_bar` method, while the new two-row layout lives
in `render_two_row_tab_bar`. Both methods share common components
(`configure_tab_bar_start`, `configure_tab_bar_end`,
`render_unpinned_tabs_container`, `render_tab_bar_drop_target`) ensuring
DRY code and consistent behavior.
- Purely opt-in - users must explicitly enable this feature via Settings
UI or settings.json
- No impact on default UX - Zed's default tab bar appearance and
behavior remains identical

This implementation ensures zero risk to the existing user experience
while providing an optional enhancement for users who prefer separated
tab rows.

  Configuration

  Via Settings UI:
  - Open Settings (Cmd+,) → Editor section → "Pinned Tabs Layout" toggle
  
  

![settings_ui](https://github.com/user-attachments/assets/59b9bb94-1c10-4c32-b942-13aa01943526)


  Via settings.json:
  
  ```json
  {
    "tab_bar": {
      "show_pinned_tabs_in_separate_row": true
    }
  }
  ```
  
<img width="468" height="67" alt="manual_settings"
src="https://github.com/user-attachments/assets/d21f6dde-7683-47b3-8dca-d190049d32fb"
/>

## Video of implemented feature:


https://github.com/user-attachments/assets/b1e52074-a5a1-4c4e-ad59-e55e2213509d

## Tested:

- Verify default behavior unchanged (single row with pinned + unpinned
tabs inline)
- Enable setting → verify two rows appear when both pinned and unpinned
tabs exist
  - Enable setting → verify single row when only pinned tabs exist
  - Enable setting → verify single row when only unpinned tabs exist
  - Verify drag & drop works in both layouts
  - Verify navigation buttons and tab bar buttons render correctly
  - Verify setting toggle works in Settings UI
  - Verify setting works via settings.json

  Tested on: MacBook Pro M4, macOS 26.2
  
   ## Release Notes:

- Added `tab_bar.show_pinned_tabs_in_separate_row` setting to display
pinned and unpinned tabs in separate rows, giving unpinned tabs full
horizontal space

---------

Co-authored-by: Matt Miller <mattrx@gmail.com>