A wrap tap tabs. 🥒🦎

lib/tab-bar-view.coffee

@@ -88,6 +88,7 @@ class TabBarView
     @subscriptions.add atom.config.observe 'tabs.tabScrolling', (value) => @updateTabScrolling(value)
     @subscriptions.add atom.config.observe 'tabs.tabScrollingThreshold', (value) => @updateTabScrollingThreshold(value)
     @subscriptions.add atom.config.observe 'tabs.alwaysShowTabBar', => @updateTabBarVisibility()
+    @subscriptions.add atom.config.observe 'tabs.wrapTabs', (value) => @element.classList.toggle "wrap-tabs", value
 
     @updateActiveTab()
 

package.json

@@ -76,6 +76,11 @@
       "title": "Display MRU Tab Switching List",
       "default": true,
       "description": "When MRU Tab Switching is enabled, display the most-recently-used tab list."
+    },
+    "wrapTabs": {
+      "type": "boolean",
+      "default": false,
+      "description": "Wrap overflowing tabs onto multiple rows."
     }
   },
   "devDependencies": {

spec/tabs-spec.coffee

@@ -1321,6 +1321,17 @@ describe "TabBarView", ->
           expect(tabBar.element).not.toHaveClass 'hidden'
           expect(tabBar2.element).toHaveClass 'hidden'
 
+  describe "when wrapTabs is true in package settings", ->
+    it "adds the `wrap-tabs` class to tabBar element", ->
+      atom.config.set("tabs.wrapTabs", true)
+      expect(tabBar.element).toHaveClass 'wrap-tabs'
+
+  describe "when wrapTabs is false in package settings", ->
+    it "removes `wrap-tabs` class from tabBar element", ->
+      tabBar.element.classList.add 'wrap-tabs'
+      atom.config.set("tabs.wrapTabs", false)
+      expect(tabBar.element).not.toHaveClass 'wrap-tabs'
+
   if atom.workspace.buildTextEditor().isPending? or atom.workspace.getActivePane().getActiveItem?
     isPending = (item) ->
       if item.isPending?

styles/wrap-tabs.less

@@ -0,0 +1,27 @@
+@import "ui-variables";
+
+.tab-bar.wrap-tabs {
+           flex-wrap: wrap;
+            height: auto;
+        box-shadow: none;
+          margin-top: -1px;
+       background: linear-gradient(180deg, @tab-border-color, transparent 75%);
+       background-size: 1px @tab-height+1px;
+
+    .tab, .tab.active {
+         min-width: auto;
+         max-width: 19em;
+    }
+
+    .tab.active {
+        box-shadow: none !important;
+        margin-left: 1px;
+    }
+
+    .tab {
+         border: 1px solid @tab-border-color;
+         border-bottom: none;
+         margin: 0 -1px 0 -1px;
+         &:last-of-type { box-shadow: none; }
+    }
+}