filter on top

src/components/IssueFilter.vue

@@ -30,11 +30,11 @@ function onStatusChanged(alias: string) {
 </script>
 
 <template>
-  <div class="filter-grid ga-4 align-center">
+  <div class="filter-grid ga-2 align-center">
     <text-filter :model-value="text" @update:model-value="emit('update:text', $event)" />
     <status-filter :status="status" @changed="onStatusChanged" />
     <assignee-filter :selected="selectedAssignees" @changed="onAssigneeChanged" />
-    <v-btn prepend-icon="mdi-close" variant="tonal" @click="emit('update:clear')">Clear Filters</v-btn>
+    <v-btn density="compact" variant="text" @click="emit('update:clear')">Clear Filters</v-btn>
   </div>
 </template>
 

src/components/StatusFilter.vue

@@ -11,6 +11,7 @@ const emit = defineEmits<{ changed: [value: string] }>()
 const statusStore = useStatusStore()
 const selected = ref(status)
 const onUpdate = (val: unknown) => emit('changed', val as string)
+
 watch(
   () => status,
   (val) => {
@@ -24,11 +25,20 @@ watch(
     v-model="selected"
     divided
     size="default"
-    density="compact"
-    variant="text"
+    density="comfortable"
+    variant="flat"
     @update:model-value="onUpdate"
   >
-    <v-btn slim v-for="el in statusStore.statuses" :color="el.color" :value="el.alias" :key="el.alias" rounded="0">
+    <v-btn
+      border
+      slim
+      v-for="el in statusStore.statuses"
+      :color="el.color"
+      :value="el.alias"
+      :key="el.alias"
+      rounded="0"
+    >
+      <!--      <v-icon :icon="icons.get(el.alias)" class="mr-1" />-->
       <div class="text-default">{{ el.name }}</div>
     </v-btn>
   </v-btn-toggle>

src/views/Issues/IssuesListView.vue

@@ -188,10 +188,7 @@ async function onDeleteBatch() {
 
 <template>
   <div class="d-flex flex-column ga-2 h-100">
-    <div ref="splitContainer" class="u-grid">
-      <div class="u-height">
     <issue-filter
-          class="mb-2"
       :text="text"
       :assignee-id="assigneeId"
       :status="status"
@@ -200,6 +197,8 @@ async function onDeleteBatch() {
       @update:status="onStatusChanged"
       @update:clear="onClear"
     />
+    <div ref="splitContainer" class="u-grid">
+      <div class="u-height">
         <v-list class="pa-0" density="compact" v-model:selected="selected" mandatory>
           <v-list-item>
             <template #prepend>