Merge branch 'threecolumn' into shigusegubu-vue3

* threecolumn:
  improvements to relative panel sizing
  fix chromium crashing on my machine :hyperjoy: LUL
  improvements to relative font sizes
  fix main post form having hidden emoji picker

src/App.scss

@@ -2,12 +2,11 @@
 @import './_variables.scss';
 
 :root {
-  --navbar-height: 50px;
+  --navbar-height: 3.5rem;
 }
 
 html {
   font-size: 14px;
-  overflow-x: clip;
 }
 
 body {
@@ -159,8 +158,8 @@ nav {
 }
 
 .app-layout {
-  --miniColumn: 25em;
+  --miniColumn: 25rem;
-  --maxiColumn: minmax(var(--miniColumn), 45em);
+  --maxiColumn: minmax(var(--miniColumn), 45rem);
   --columnGap: 1em;
   --status-margin: 0.75em;
 
@@ -227,7 +226,7 @@ nav {
 
   &.-has-new-post-button {
     .column {
-      padding-bottom: 20em;
+      padding-bottom: 10rem;
     }
   }
 
@@ -301,7 +300,7 @@ nav {
   cursor: pointer;
   box-shadow: $fallback--buttonShadow;
   box-shadow: var(--buttonShadow);
-  font-size: 14px;
+  font-size: 1em;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
@@ -429,7 +428,7 @@ textarea,
   color: var(--inputText, $fallback--lightText);
   font-family: sans-serif;
   font-family: var(--inputFont, sans-serif);
-  font-size: 14px;
+  font-size: 1em;
   margin: 0;
   box-sizing: border-box;
   display: inline-block;
@@ -730,7 +729,7 @@ i[class*=icon-],
 }
 
 .btn.button-default {
-  min-height: 28px;
+  min-height: 2em;
 }
 
 .new-status-notification {

src/components/attachment/attachment.scss

@@ -173,7 +173,7 @@
       margin: 8px;
       word-break: break-all;
       h1 {
-        font-size: 14px;
+        font-size: 1rem;
         margin: 0px;
       }
     }

src/components/desktop_nav/desktop_nav.scss

@@ -9,7 +9,7 @@
 
   .inner-nav {
     display: grid;
-    grid-template-rows: 50px;
+    grid-template-rows: var(--navbar-height);
     grid-template-columns: 2fr auto 2fr;
     grid-template-areas: "sitename logo actions";
     box-sizing: border-box;
@@ -75,7 +75,7 @@
 
     img {
       display: inline-block;
-      height: 50px;
+      height: var(--navbar-height);
     }
   }
 
@@ -101,8 +101,8 @@
 
   .item {
     flex: 1;
-    line-height: 50px;
+    line-height: var(--navbar-height);
-    height: 50px;
+    height: var(--navbar-height);
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;

src/components/emoji_picker/emoji_picker.scss

@@ -7,7 +7,7 @@
   right: 0;
   left: 0;
   margin: 0 !important;
-  z-index: 1;
+  z-index: 100;
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--link;

src/components/media_modal/media_modal.vue

@@ -234,7 +234,7 @@ $modal-view-button-icon-margin: 0.5em;
       position: absolute;
       height: $modal-view-button-icon-height;
       width: $modal-view-button-icon-width;
-      font-size: 14px;
+      font-size: 1rem;
       line-height: $modal-view-button-icon-height;
       color: #FFF;
       text-align: center;

src/components/popover/popover.vue

@@ -65,7 +65,7 @@
 .dropdown-menu {
   display: block;
   padding: .5rem 0;
-  font-size: 1rem;
+  font-size: 1em;
   text-align: left;
   list-style: none;
   max-width: 100vw;

src/components/post_status_form/post_status_form.vue

@@ -509,6 +509,7 @@
     flex-direction: column;
     padding: 0.25em 0.5em 0.5em;
     line-height:24px;
+    z-index: 50;
   }
 
   form textarea.form-cw {

src/components/user_panel/user_panel.vue

@@ -24,5 +24,6 @@
 <style lang="scss">
 .user-panel .signed-in {
   overflow: visible;
+  z-index: 10;
 }
 </style>

src/hocs/with_load_more/with_load_more.scss

@@ -10,7 +10,7 @@
     border-top-color: var(--border, $fallback--border);
 
     .error {
-      font-size: 14px;
+      font-size: 1rem;
     }
 
     a {

src/hocs/with_subscription/with_subscription.scss

@@ -4,7 +4,7 @@
     text-align: center;
 
     .error {
-      font-size: 14px;
+      font-size: 1rem;
     }
   }
 }

src/panel.scss

@@ -28,11 +28,16 @@
 
 .panel-body:empty::before {
   content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
-  display: block; margin: 1em;
+  display: block;
+  margin: 1em;
   text-align: center;
 }
 
 .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;
@@ -42,18 +47,16 @@
   background-size: cover;
   padding: 0.6em 0.6em;
   text-align: left;
-  line-height: 28px;
+  line-height: var(--__panel-heading-height-inner);
   color: var(--panelText);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
   align-items: baseline;
-  height: var(--panelHeadingHeight);
+  height: var(--panel-heading-height);
   z-index: -2;
 
-  --panelHeadingHeight: 45px;
-
   &.-flexible-height {
-    --panelHeadingHeight: auto;
+    --panel-heading-height: auto;
 
     &::after,
     &::before {
@@ -92,7 +95,7 @@
     z-index: -1;
     border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
     border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
-    mask: linear-gradient(to bottom, white var(--panelHeadingHeight), transparent var(--panelHeadingHeight));
+    mask: linear-gradient(to bottom, white var(--panel-heading-height), transparent var(--panel-heading-height));
   }
 
   .title {
@@ -119,14 +122,12 @@
 
   .button-default,
   .alert {
-    // height: 100%;
+    height: var(--__panel-heading-height-inner);
-    line-height: 21px;
     min-height: 0;
     box-sizing: border-box;
     margin: 0;
     margin-left: 0.5em;
     min-width: 1px;
-    align-self: stretch;
   }
 
   .button-default {