improvements to relative panel sizing

2 files changed, 7 insertions, 7 deletions

diff --git a/src/App.scss b/src/App.scss
index eae3afa3..acaf282a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -2,7 +2,7 @@
 @import './_variables.scss';
 
 :root {
-  --navbar-height: 3.5em;
+  --navbar-height: 3.5rem;
 }
 
 html {
diff --git a/src/panel.scss b/src/panel.scss
index b23ec4bb..57059cb9 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -34,6 +34,10 @@
 }
 
 .panel-heading {
+  --panel-heading-height: 3.2em;
+  --panel-heading-height-padding: 0.6em;
+  --__panel-heading-height-inner: calc(var(--panel-heading-height) - 2 * var(--panel-heading-height-padding));
+
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -43,7 +47,7 @@
   background-size: cover;
   padding: 0.6em 0.6em;
   text-align: left;
-  line-height: calc(var(--panel-heading-height) / 2);
+  line-height: var(--__panel-heading-height-inner);
   color: var(--panelText);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
@@ -51,8 +55,6 @@
   height: var(--panel-heading-height);
   z-index: -2;
 
-  --panel-heading-height: 3.2em;
-
   &.-flexible-height {
     --panel-heading-height: auto;
 
@@ -120,14 +122,12 @@
 
   .button-default,
   .alert {
-    // height: 100%;
-    line-height: 21px;
+    height: var(--__panel-heading-height-inner);
     min-height: 0;
     box-sizing: border-box;
     margin: 0;
     margin-left: 0.5em;
     min-width: 1px;
-    align-self: stretch;
   }
 
   .button-default {