From b9a6d48ef982abf2ead04791bfbd965f8e2138cc Mon Sep 17 00:00:00 2001
From: Alexey Bagno <alexey.bagno@gmail.com>
Date: Wed, 2 Sep 2026 19:59:58 +0500
Subject: [PATCH] fix: Mobile Dashboard appearance

---
 web/src/App.tsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 4d8e235..a616279 100644
--- a/web/src/App.tsx
+++ b/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>
       )}