Fix design of tabs in sidebar

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 8b94d08ce2ea9e1f4dc4b53a6c8ea70c7a95d228..54372afa45a94a618b2a05e5fbe6c04818d14d74 100644 (file)
--- 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;