better defaults, fonts scale with panel scale

src/components/settings_modal/tabs/appearance_tab.vue

@@ -62,7 +62,7 @@
             path="navbarSize"
             step="0.1"
             :units="['px', 'rem']"
-            :reset-default="{ 'px': 64, 'rem': 3.5 }"
+            :reset-default="{ 'px': 55, 'rem': 3.5 }"
           >
             {{ $t('settings.navbar_size') }}
           </UnitSetting>
@@ -73,7 +73,7 @@
             path="panelHeaderSize"
             step="0.1"
             :units="['px', 'rem']"
-            :reset-default="{ 'px': 64, 'rem': 3.2 }"
+            :reset-default="{ 'px': 52, 'rem': 3.2 }"
             timed-apply-mode
           >
             {{ $t('settings.panel_header_size') }}

src/modules/instance.js

@@ -98,11 +98,11 @@ const defaultState = {
   sidebarRight: false,
   subjectLineBehavior: 'email',
   theme: 'pleroma-dark',
-  emojiReactionsScale: 1.0,
+  emojiReactionsScale: 0.5,
   textSize: '14px',
-  emojiSize: '2.2em',
+  emojiSize: '2.2rem',
-  navbarSize: '3.5em',
+  navbarSize: '3.5rem',
-  panelHeaderSize: '3.2em',
+  panelHeaderSize: '3.2rem',
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'linear',

src/panel.scss

@@ -60,11 +60,12 @@
 
 .panel-heading,
 .panel-footer {
-  --panel-heading-height-padding: calc(var(--panelHeaderSize) * 0.15);
+  --panel-heading-height-padding: calc(var(--panelHeaderSize) * 0.2);
   --__panel-heading-gap: calc(var(--panelHeaderSize) * 0.1);
   --__panel-heading-height: var(--panelHeaderSize, 3.2em);
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
+  font-size: calc(var(--panelHeaderSize) / 3.2);
   backdrop-filter: var(--__panel-backdrop-filter);
   position: relative;
   box-sizing: border-box;