From b136325206f87238f7a93f8daf770d6666a39474 Mon Sep 17 00:00:00 2001
From: Jannik ZANDER <jzander@grundfos.com>
Date: Mon, 6 Oct 2025 21:03:21 +0200
Subject: [PATCH] Fix for mobile phone

---
 site/_data/services.json |  2 +-
 site/assets/styles.css   | 95 +++++++++++++++++++++-------------------
 2 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/site/_data/services.json b/site/_data/services.json
index 60ff7db..0355b38 100644
--- a/site/_data/services.json
+++ b/site/_data/services.json
@@ -53,7 +53,7 @@
     "href": "https://dns.zndr.dk",
     "desc": "DNS-level ad/tracker blocking.",
     "tag": "LAN",
-    "icon": "circle-x",
+    "icon": "ban",
     "lan": true
   },
   {
diff --git a/site/assets/styles.css b/site/assets/styles.css
index 3ae3d1b..d9e2485 100644
--- a/site/assets/styles.css
+++ b/site/assets/styles.css
@@ -109,27 +109,69 @@ header{
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));  /* was 240px */
   gap: 16px;  /* a bit more space */
 }
-
-/* Lichess-like plate + glyph left, text right */
-.card{
+/* Keep icon + text on one row */
+/* Keep icon + text on one row, restore tile visuals */
+.card {
   position: relative;
   display: flex;
-  align-items: center;      /* center icon + text vertically */
+  align-items: center;
+  flex-wrap: nowrap;          /* no wrapping on mobile */
+  min-width: 0;               /* allow text to shrink */
   gap: 14px;
   padding: 12px 16px;
-  height: var(--tile-h);
+  height: var(--tile-h);      /* fixed, uniform tile height */
   text-align: left;
+  overflow: hidden;
 
   border-radius: 10px;
   background: var(--panel);
   border: 1px solid var(--ring);
-  text-decoration: none;
   color: inherit;
-  box-shadow: none;
-  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
-  overflow: hidden;         /* clip overflow if text is long */
+  text-decoration: none;
+
+  transition:
+    transform .12s ease,
+    box-shadow .12s ease,
+    border-color .12s ease;
+}
+/* Icon block: same height as the card */
+.tile-icon {
+  flex: 0 0 clamp(56px, 22vw, var(--tile-h));  /* shrinks on small screens */
+  height: 100%;                                 /* match .card height */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* SVG stays as tall as the icon block */
+.tile-glyph {
+  height: 100%;
+  width: auto;
+  stroke-width: 2.4;
+}
+
+/* Let text shrink instead of forcing a wrap */
+.tile-body {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+/* Prevent heading/desc from pushing icon to a new line on tight widths */
+.tile-body h3,
+.tile-body p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Make the grid a bit more forgiving on narrow screens */
+@media (max-width: 420px) {
+  :root { --tile-h: 84px; }
+  .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
+  .card { gap: 10px; padding: 10px 12px; }
 }
 
+
 /* Hover accent (optional) */
 .card:hover{
   transform: translateY(-1px);
@@ -155,41 +197,6 @@ header{
 .card.is-lan {
   display: none;
 }
-
-/* Icon box with no plate */
-.tile-icon{
-  flex: 0 0 auto;
-  height: 100%;             /* match card height */
-  aspect-ratio: 1 / 1;      /* keep square footprint */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;         /* no grey plate */
-}
-
-/* SVG scales inside, same color as text */
-.tile-glyph{
-  height: 100%;              /* size relative to tile; tweak 58–70% */
-  width: auto;
-  stroke-width: 2.4;
-  color: inherit;           /* follow text color */
-}
-
-.tile-body h3 {
-  margin: 0 0 .15rem 0;
-  font-size: 1rem
-  font-weight: 600;         /* was 700 */
-  color: var(--fg);
-  line-height: 1.3;
-}
-
-.tile-body p {
-  margin: 0;
-  font-size: 0.95rem
-  color: var(--muted);
-  opacity: .9;
-}
-
 /* =================
    Footer
    ================= */
-- 
2.50.1