fix: Mobile Dashboard appearance

web/src/App.tsx

@@ -24,6 +24,14 @@ const CATEGORIES = [
 
 type Category = (typeof CATEGORIES)[number]["id"];
 
+function DashboardCatName({ name }: { name: string }) {
+  return (
+    <div class="flex flex-col gap-2 ml-1 md:ml-0">
+      <span class="text-lg font-bold">{name}</span>
+    </div>
+  );
+}
+
 function LinkList({ links }: { links: Link[] }) {
   if (links.length === 0)
     return <div class="alert mt-4">No links in config</div>;
@@ -190,12 +198,18 @@ function MainScreen({
       }`}
     >
       {category === "dashboard" && (
-        <div class="flex flex-row gap-2 justify-center mt-4">
-          <LinkList links={content.links} />
-          <div class="flex flex-col gap-2">
-            {content.monitors.map((it) => (
-              <MonitorCard s={it} />
-            ))}
+        <div class="flex flex-col md:flex-row gap-2 justify-center mt-4">
+          <div>
+            <DashboardCatName name="Links" />
+            <LinkList links={content.links} />
+          </div>
+          <div>
+            <DashboardCatName name="Monitors" />
+            <div class="flex flex-col gap-2">
+              {content.monitors.map((it) => (
+                <MonitorCard s={it} />
+              ))}
+            </div>
           </div>
         </div>
       )}