feat: reorganize list tag positioning

src/components/FilteredList.vue

@@ -50,20 +50,27 @@ const toLabel = (rating: number) => {
       <template v-if="filterOptions.length > 0">
         <ul class="filter-list__list">
           <li v-for="(item, idx) in filteredItems" :key="idx" class="filter-list__item">
-            <span class="filter-list__item-name">
-              {{ item.name }}
             <span
               v-if="filterOptions.length > 1"
-                class="filter-list__tag"
+              class="filter-list__tag category"
               :class="toLabel(item.rating)?.toLowerCase()"
             >
+              <span>
                 {{ toLabel(item.rating) }}
               </span>
             </span>
-            <span class="filter-list__tag-list">
+            <span class="filter-list__item-name">
-              <span v-if="item.receive" class="filter-list__tag receive">receive</span>
+              <span>
-              <span v-if="item.give" class="filter-list__tag give">give</span>
+                {{ item.name }}
               </span>
+            </span>
+            <span class="filter-list__tag receive">
+              <span v-if="item.receive">receive</span>
+            </span>
+            <span class="filter-list__tag give">
+              <span v-if="item.give">give</span>
+            </span>
+            <!-- <span class="filter-list__tag-list"> </span> -->
           </li>
         </ul>
       </template>
@@ -80,6 +87,7 @@ const toLabel = (rating: number) => {
   background: var(--quickfacts-background);
   border-radius: 1rem;
   box-shadow: var(--container-box-shadow);
+  overflow: hidden;
 
   &__options {
     display: flex;
@@ -209,7 +217,7 @@ const toLabel = (rating: number) => {
   }
 
   &__intro-msg {
-    font-size: 3rem;
+    font-size: 2rem;
     font-weight: bold;
     font-style: italic;
     text-align: center;
@@ -233,6 +241,7 @@ const toLabel = (rating: number) => {
     flex-flow: row nowrap;
     justify-content: space-between;
     align-items: center;
+    gap: 0.5rem;
 
     padding: 0.25rem 0.875rem;
 
@@ -242,6 +251,7 @@ const toLabel = (rating: number) => {
   }
 
   &__item-name {
+    flex: 1 0 0;
     line-height: 2;
   }
 
@@ -254,42 +264,63 @@ const toLabel = (rating: number) => {
   }
 
   &__tag {
+    flex: 0 0 0;
+
+    span {
+      display: block;
+
       font-size: 0.75rem;
       font-weight: bold;
+      text-align: center;
+
       background: rgba(#f5f5f5, 0.7);
+
       border: 1px solid #f5f5f5;
       border-radius: 1em;
       padding: 0 0.5em;
+    }
 
-    &.love {
+    &.love span {
       background: var(--theme-c-love);
       border: 1px solid var(--theme-c-love-dark);
     }
 
-    &.yes {
+    &.yes span {
       background: var(--theme-c-yes);
       border: 1px solid var(--theme-c-yes-dark);
     }
 
-    &.maybe {
+    &.maybe span {
       background: var(--theme-c-maybe);
       border: 1px solid var(--theme-c-maybe-dark);
     }
 
-    &.no {
+    &.no span {
       background: var(--theme-c-no);
       border: 1px solid var(--theme-c-no-dark);
     }
 
+    &.category {
+      flex: 0 0 3rem;
+    }
+
     &.receive {
+      flex: 0 0 3.125rem;
+
+      span {
         background: var(--theme-c-receive);
         border: 1px solid var(--theme-c-receive);
       }
+    }
 
     &.give {
+      flex: 0 0 2.125rem;
+
+      span {
         background: var(--theme-c-give);
         border: 1px solid var(--theme-c-give);
       }
     }
   }
+}
 </style>