From 2633247492388a2b52a01b1ea657f138be8a8e44 Mon Sep 17 00:00:00 2001
From: Jermolene <jeremy@osmosoft.com>
Date: Mon, 12 May 2014 08:41:47 +0100
Subject: [PATCH] Use flexbox for vertical tabs

Thus stepping into a new world:

http://caniuse.com/flexbox

The vertical tabs are now completely reusable, with sensible wrapping
behaviour.
---
 editions/tw5.com/tiddlers/macros/TabsMacro.tid |  2 +-
 themes/tiddlywiki/vanilla/base.tid             | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/editions/tw5.com/tiddlers/macros/TabsMacro.tid b/editions/tw5.com/tiddlers/macros/TabsMacro.tid
index 9da4f78ca..cbccf492e 100644
--- a/editions/tw5.com/tiddlers/macros/TabsMacro.tid
+++ b/editions/tw5.com/tiddlers/macros/TabsMacro.tid
@@ -26,4 +26,4 @@ Here is an example of the tabs macro:
 
 <<tabs "Docs WikiText Features RoadMap" "WikiText" "$:/state/tab1">>
 
-<<tabs "[tag[tips]]" "GoogleChromeTips" "$:/state/tab1" "tw-vertical">>
+<<tabs "[tag[tips]]" "GoogleChromeTips" "$:/state/tab2" "tw-vertical">>
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index 6af8f06ca..19c33d1f7 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -960,7 +960,7 @@ canvas.tw-edit-bitmapeditor  {
 */
 
 .tw-tab-set.tw-vertical {
-	white-space: nowrap;
+	display: flex;
 }
 
 .tw-tab-buttons {
@@ -970,12 +970,15 @@ canvas.tw-edit-bitmapeditor  {
 }
 
 .tw-tab-buttons.tw-vertical  {
-	display: inline-block;
-	padding-top: inherit;
+	display: block;
+	padding-top: 14px;
+	padding-top: 14px;
 	vertical-align: top;
 	text-align: right;
 	margin-bottom: inherit;
 	margin-right: -1px;
+	max-width: 33%;
+	flex: 0 0 auto;
 }
 
 .tw-tab-buttons button.tw-tab-selected {
@@ -1026,11 +1029,12 @@ canvas.tw-edit-bitmapeditor  {
 }
 
 .tw-tab-content.tw-vertical  {
-	white-space: normal;
 	display: inline-block;
 	vertical-align: top;
+	padding-top: 0;
 	padding-left: 14px;
 	border-left: 1px solid <<colour tab-border>>;
+	flex: 0 0 70%;
 }
 
 .tw-sidebar-lists .tw-tab-buttons button.tw-tab-selected {