Fix header sizing and drawer border

Author: n-lark

frontend/src/components/drawers/RightDrawer.vue

@@ -10,7 +10,7 @@
             class="resize-bar"
             @mousedown="startResize"
         />
-        <div v-if="rightDrawer?.header" class="header flex items-center justify-between p-4 border-b gap-2">
+        <div v-if="rightDrawer?.header" class="header flex items-center justify-between p-4 border-b border-gray-200 gap-2">
             <div class="title clipped-overflow" data-el="right-drawer-header-title">
                 <h1 class="text-xl font-semibold mb-0" :title="rightDrawer.header.title">{{ rightDrawer.header.title }}</h1>
             </div>

frontend/src/stylesheets/common.scss

@@ -24,8 +24,10 @@ html, body, #app {
     flex: 1;
 }
 
-h1, h2, h3 {
-    font-weight: 500;
+@layer base {
+    h1, h2, h3 {
+        font-weight: 500;
+    }
 }
 
 #ff-app {

frontend/src/ui-components/stylesheets/ff-core.scss

@@ -28,32 +28,34 @@ body {
     overflow: hidden;
 }
 
-h1 {
-    font-weight: bold;
-    font-size: $ff-funit-xl;
-    line-height: 1.45 * $ff-funit-xl;
-    margin-bottom: $ff-unit-lg;
-}
+@layer base {
+    h1 {
+        font-weight: bold;
+        font-size: $ff-funit-xl;
+        line-height: 1.45 * $ff-funit-xl;
+        margin-bottom: $ff-unit-lg;
+    }
 
-h2 {
-    font-weight: bold;
-    font-size: $ff-funit-lg;
-    line-height: 1.45 * $ff-funit-lg;
-    margin-bottom: $ff-unit-sm;
-}
+    h2 {
+        font-weight: bold;
+        font-size: $ff-funit-lg;
+        line-height: 1.45 * $ff-funit-lg;
+        margin-bottom: $ff-unit-sm;
+    }
 
-h3 {
-    font-size: $ff-funit-md;
-    line-height: 1.45 * $ff-funit-md;
-    margin-bottom: $ff-unit-sm;
-    font-weight: bold;
-}
+    h3 {
+        font-size: $ff-funit-md;
+        line-height: 1.45 * $ff-funit-md;
+        margin-bottom: $ff-unit-sm;
+        font-weight: bold;
+    }
 
-h4 {
-    font-size: $ff-funit-md;
-    line-height: 1.45 * $ff-funit-sm;
-    margin-bottom: $ff-unit-sm;
-    font-weight: 500;
+    h4 {
+        font-size: $ff-funit-md;
+        line-height: 1.45 * $ff-funit-sm;
+        margin-bottom: $ff-unit-sm;
+        font-weight: 500;
+    }
 }
 
 code {
@@ -70,3 +72,7 @@ p code {
     font-size: $ff-funit-sm;
     color: $ff-grey-400;
 }
+
+hr {
+    color: $ff-grey-200;
+}