From c0aee3f1a11188e862e8715b8a3a1a51259b333f Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 1 Nov 2018 04:16:56 +0100
Subject: Fix design of tabs in sidebar

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 core/css/apps.scss | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

(limited to 'core')

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 8b94d08ce2e..54372afa45a 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -781,27 +781,47 @@ kbd {
 
 /* TABS ------------------------------------------------------------ */
 .tabHeaders {
-	display: inline-block;
-	margin: 15px;
+	display: flex;
+	margin-bottom: 16px;
+
 	.tabHeader {
-		float: left;
-		padding: 12px;
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		text-align: center;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 		cursor: pointer;
 		color: var(--color-text-lighter);
 		margin-bottom: 1px;
+		padding: 5px;
+
+		/* Use same amount as sidebar padding */
+		&:first-child {
+			padding-left: 15px;
+		}
+		&:last-child {
+			padding-right: 15px;
+		}
+
 		.icon {
 			display: inline-block;
-			width: 16px;
+			width: 100%;
 			height: 16px;
 			background-size: 16px;
 			vertical-align: middle;
 			margin-top: -2px;
 			margin-right: 3px;
 			opacity: .7;
+			cursor: pointer;
 		}
+
 		a {
 			color: var(--color-text-lighter);
 			margin-bottom: 1px;
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
 		&.selected {
 			font-weight: bold;
-- 
cgit v1.2.3