feat: vertical tabs docs

docs/docs.json

@@ -33,7 +33,8 @@
           "features/memory",
           "features/sync-to-cloud",
           "features/llm-chat-hub",
-          "features/ad-blocking"
+          "features/ad-blocking",
+          "features/vertical-tabs"
         ]
       },
       {

docs/features/vertical-tabs.mdx

@@ -0,0 +1,60 @@
+---
+title: "Vertical Tabs"
+description: "Move your tabs to the side for a cleaner, more organized browsing experience"
+---
+
+BrowserOS supports vertical tabs — a side panel that lists all your open tabs along the left edge of the browser window. Instead of shrinking tab titles into a cramped horizontal strip, vertical tabs give each tab its own full-width row so you can read titles at a glance, even with dozens of tabs open.
+
+## Why Vertical Tabs?
+
+Modern screens are wide, not tall. A horizontal tab bar wastes vertical space you could use for content, and tabs quickly become unreadable as they shrink. Vertical tabs solve both problems:
+
+<CardGroup cols={2}>
+  <Card title="Read every tab title" icon="text">
+    Tabs stack vertically with full-width labels, so you always know what is open — no squinting at favicons.
+  </Card>
+  <Card title="Handle many tabs" icon="layer-group">
+    Open 30, 50, or 100 tabs without the strip becoming unusable. The side panel scrolls naturally.
+  </Card>
+  <Card title="Reclaim vertical space" icon="arrows-left-right">
+    The horizontal tab bar disappears, giving web pages more room on widescreen monitors.
+  </Card>
+  <Card title="Stay organized" icon="folder-tree">
+    Combine vertical tabs with tab groups to visually separate work, research, and personal browsing.
+  </Card>
+</CardGroup>
+
+## Enabling Vertical Tabs
+
+Toggle vertical tabs on or off from the Customization settings page.
+
+<Steps>
+  <Step title="Open Settings">
+    Go to `chrome://browseros/settings` in the address bar.
+  </Step>
+  <Step title="Go to Customization">
+    In the left sidebar, select **Customization**.
+  </Step>
+  <Step title="Toggle Use Vertical Tabs">
+    Flip the **Use Vertical Tabs** switch to on. The browser immediately moves your tabs to a side panel.
+  </Step>
+</Steps>
+
+<Frame caption="Enable vertical tabs in Settings > Customization">
+  <img src="/images/features--vertical-tabs-setting.png" alt="Vertical tabs toggle in BrowserOS Customization settings" />
+</Frame>
+
+To switch back, return to the same setting and turn the toggle off. Your tabs move back to the horizontal strip instantly.
+
+## How It Works
+
+When vertical tabs are enabled, the tab strip relocates from the top of the window to a collapsible side panel on the left. Each tab is displayed as a row showing the page favicon and full title.
+
+- **Click** a tab row to switch to it.
+- **Right-click** a tab for the standard context menu (pin, mute, close, move to group).
+- **Drag** tabs up or down to reorder them, or drag them into and out of tab groups.
+- The panel can be **collapsed** to show only favicons, freeing up even more horizontal space.
+
+## Vertical Tabs + Tab Groups
+
+Vertical tabs pair naturally with [tab groups](/features/workflows). Groups appear as collapsible sections in the side panel, making it easy to keep projects separate and fold away tabs you are not actively using.