(style) improve appearance of <FilterBar>

assets/dark.scss

@@ -11,6 +11,8 @@ body[data-theme="dark"] {
     background-color: $dark !important;
     color: $light;
 
+    --bs-border-color: rgba(66, 70, 73, 0.5);
+
     a { color: $primary-dark; }
     a:hover { color: lighten($primary-dark, 10%); }
     .text-primary { color: $primary-dark !important; }
@@ -147,14 +149,6 @@ body[data-theme="dark"] {
     .bg-warning.text-dark,
     .bg-info.text-dark { color: #212529 !important; }
 
-    /* BORDERS */
-
-    .border,
-    .border-top,
-    .border-end,
-    .border-bottom,
-    .border-start { border-color: rgba(66, 70, 73, 0.5) !important; }
-
     /* BREADCRUMB */
 
     .breadcrumb.border { border-color: #333 !important; }

assets/style.scss

@@ -181,8 +181,14 @@ form[inert] {
         margin-left: calc(-50vw + 50% + 3rem);
         margin-right: calc(-50vw + 50% + 3rem);
     }
+}
+
+@include media-breakpoint-up('lg', $grid-breakpoints) {
+    .body {
+        margin-top: $header-margin;
+    }
     .sticky-top {
-        top: 83px;
+        top: $header-height + 3px;
     }
 }
 

components/FilterBar.vue

@@ -24,8 +24,8 @@ defineExpose({
 </script>
 
 <template>
-    <section class="sticky-top pt-md-2">
-        <div class="input-group bg-white">
+    <section class="sticky-top bg-white rounded">
+        <div class="input-group">
             <span class="input-group-text">
                 <Icon v="filter" />
             </span>
@@ -48,14 +48,17 @@ defineExpose({
                 <T>nouns.submit.action</T>
             </button>
         </div>
-        <div v-if="categories && categories.length > 0" class="btn-group d-flex flex-wrap flex-md-nowrap pt-1 bg-white">
+        <div
+            v-if="categories && categories.length > 0"
+            class="d-flex flex-wrap mt-1 border border-primary rounded overflow-hidden"
+        >
             <button
                 v-for="category of [allCategory, ...categories]"
                 :key="category.text"
                 :class="[
-                    'btn btn-sm',
+                    'btn btn-sm btn-wrapped',
                     filterCategory === category.key ? 'btn-primary' : 'btn-outline-primary',
-                    'd-flex justify-content-center align-items-center gap-1',
+                    'flex-grow-1 d-flex justify-content-center align-items-center gap-1 rounded-0',
                 ]"
                 @click="filterCategory = category.key"
             >
@@ -65,3 +68,12 @@ defineExpose({
         </div>
     </section>
 </template>
+
+<style lang="scss" scoped>
+.btn-wrapped {
+    margin-block-start: calc(-1 * var(--bs-btn-border-width));
+    margin-inline-start: calc(-1 * var(--bs-btn-border-width));
+    border-block-end: none;
+    border-inline-end: none;
+}
+</style>

layouts/default.vue

@@ -170,15 +170,6 @@ export default defineComponent({
     @import "assets/variables";
     @import "~avris-sorter/dist/Sorter.min.css";
 
-    @include media-breakpoint-up('lg', $grid-breakpoints) {
-        .body {
-            margin-top: $header-margin;
-        }
-        .sticky-top {
-            top: $header-height - 1px;
-        }
-    }
-
     .vh {
         min-height: calc(100vh - #{$header-height});
     }