From 90837f6e3bdc6ca50c81e9db963378c586221be2 Mon Sep 17 00:00:00 2001
From: Gronod <gordon@i3omb.com>
Date: Sun, 24 May 2026 23:18:59 +0100
Subject: [PATCH] fix: mobile overflow on Requests tab cards

- Remove white-space: nowrap from .request-title so long titles
  truncate/wrap instead of forcing cards beyond the viewport width
- Add overflow-x: hidden to .requests-list as a safety net
- Add @media (max-width: 768px) rules for the requests section:
  reduce .requests-container padding from 20px to 12px, tighten
  .request-card and .request-meta gaps on mobile

Fixes #49
---
 public/style.css | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/public/style.css b/public/style.css
index 76888c0..9f64d48 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1888,6 +1888,18 @@ body {
 
 /* ===== Mobile ===== */
 @media (max-width: 768px) {
+  .requests-container {
+    padding: 12px;
+  }
+
+  .request-card {
+    gap: 8px;
+  }
+
+  .request-meta {
+    gap: 4px;
+  }
+
   .app {
     padding: 10px;
   }
@@ -2234,6 +2246,7 @@ body {
 .requests-list {
   display: grid;
   gap: 12px;
+  overflow-x: hidden;
 }
 
 .request-card {
@@ -2273,7 +2286,6 @@ body {
   font-weight: 600;
   color: var(--text-primary);
   margin-bottom: 4px;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }