tidy up search page slightly

I need a designer in my life

ui/src/components/SearchResult.vue

@@ -5,7 +5,9 @@
   >
     <div class="search-result-container">
       <div class="search-result-attribute">{{ result.attribute }}</div>
-      <div class="search-result-value">{{ result.value.c }}</div>
+      <div class="search-result-value">
+        <Marquee>{{ result.value.c }}</Marquee>
+      </div>
     </div>
   </router-link>
 </template>
@@ -13,8 +15,10 @@
 <script lang="ts">
 import { IEntry } from "@/types/base";
 import { defineComponent, PropType } from "vue";
+import Marquee from "./Marquee.vue";
 
 export default defineComponent({
+  components: { Marquee },
   name: "SearchResult",
   props: {
     result: {
@@ -27,20 +31,18 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .search-result {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  border: 1px solid var(--foreground);
+  border-radius: 1rem;
+
   .search-result-container {
-    display: flex;
+    padding: 1em;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    border: 1px solid var(--foreground);
-    border-radius: 1rem;
-    
-    margin: 0.5rem;
-    padding: 1rem;
-
-    width: 100%;
-    height: 100%;
   }
 
   text-align: center;

ui/src/views/Search.vue

@@ -51,15 +51,18 @@ export default defineComponent({
 }
 
 .search-results {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 0.5rem;
+  grid-auto-rows: minmax(100px, auto);
 
   list-style: none;
 
   li {
     display: block;
     width: calc(100vw / 7);
-    height: calc(100vw / 7);
+    height: calc(100vh / 6);
+    margin: 1rem;
   }
 }
 </style>