improved UI

web/src/components/MainPage.vue

@@ -52,7 +52,7 @@
             <div class="flex flex-column">
               <div class="flex justify-content-between flex-wrap">
                 <div class="flex align-items-center justify-content-center">
-                  <Tag severity="success" :value="item.data[1].toFixed(4)" class="mr-2"></Tag>
+                  <Tag :severity="tag_colour(item.data[1])" :value="item.data[1].toFixed(4)" class="mr-2"></Tag>
                   <span>
                     <b>{{ item.data[3].title }}</b>
                      {{ item.data[3].source }}
@@ -105,6 +105,11 @@ const confirm_delete = (item_id) => {
         },
     });
 };
+const tag_colour = (dist) => {
+  if (dist < 0.30) return 'success';
+  if (dist < 0.35) return 'warning';
+  return 'danger';
+}
 
 const edit_item = (item) => {
     confirm.require({
@@ -159,7 +164,7 @@ async function onAdd() {
 }
 .card-container .p-card {
   width: calc(50vw - 2em);
-  min-width: 600px;
+  min-width: calc(min(600px, 100vw));
   margin: 0.5em 0.5em 0.5em 0.5em;
 
 }

web/vue.config.js

@@ -2,6 +2,6 @@ const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   // transpileDependencies: true,
   devServer: {
-    proxy: {'/api': { target: "http://192.168.1.10:8182" }},
+    proxy: {'/api': { target: "http://127.0.0.1:8182" }},
   },
 })