css: fix tab icon/text baseline

the baseline for the text was seriously off, the text had
(relatively) much more space below than above, which looks off for
buttons with an actual background

Instead of centering with margin/padding explicitly, do so with the
flex layout model.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index 2516578e6ec8f382504ef20354ca33fb5628b595..c26b533f475787de7e443a3e15a45ab901c4b36a 100644 (file)
--- a/src/css/ext6-pmx.css
+++ b/src/css/ext6-pmx.css
@@ -179,6 +179,30 @@ div.right-aligned {
     height: 100%;
 }
 
+/* Fix icon/text baseline */
+.x-tab-default {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.x-tab-default > span {
+    text-align: center;
+    vertical-align: middle;
+}
+.x-tab-button {
+    line-height: unset;
+}
+.x-tab-inner {
+    display: unset;
+    vertical-align: text-top;
+}
+.x-tab-wrap {
+    display: unset;
+}
+.x-tab-default-top {
+    padding: 2px 6px 2px 6px;
+}
+
 /* rules for the markdown content, prefix with the .pmx-md class */
 .pmx-md {
     font-size: 1.0em;