fix(frontend): slightly improve mobile sizing

Author: asleepyskye

frontend/src/components/Clusters.svelte

@@ -172,6 +172,11 @@
         --cluster-item-size: 4.2rem;
         --cluster-gap-size: calc(2*var(--spacing));
     }
+    @media (max-width: 768px) {
+        :root {
+            --cluster-item-size: 3.8rem;
+        }
+    }
     .cluster
     {
         width: var(--cluster-item-size);

frontend/src/components/Incident.svelte

@@ -13,10 +13,10 @@
 {#if incident != undefined}
 {#if full}
 <a class="card bg-base-200 w-full shadow-sm {incident_class}" href={!full ? `/i/${incident.id}` : undefined}>
-    <div class="card-body m-auto w-3/4 items-center">
+    <div class="card-body m-auto lg:w-3/4 w-full items-center">
         <h2 class="card-title py-4">
             <div class="flex flex-col w-full items-center">
-                <span class="text-2xl">{incident.name} {#if incident.impact != "none"}<div class="badge {impact_class}">{incident.impact}</div>{/if}</span>
+                <span class="lg:text-2xl text-xl">{incident.name} {#if incident.impact != "none"}<div class="badge {impact_class}">{incident.impact}</div>{/if}</span>
                 <span class="text-sm italic">{dateAgo(incident.timestamp.getTime())}</span>
             </div>
         </h2>

frontend/src/components/Status.svelte

@@ -31,7 +31,7 @@
 </script>
 
 <div class="card">
-    <div role="alert" class="alert {statusClass} flex flex-col items-start gap-1 h-28">
+    <div role="alert" class="alert {statusClass} flex flex-col items-start gap-1 h-1/8">
         {#if status}
         <span class="text-lg font-bold">{statusText}</span>
         <span class="text-md">{statusInfoText}</span>