From 3d7b649cba6a3f74a80cac5aefe7bdd3ccd302e8 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 23:55:35 +0200
Subject: [PATCH] fix(ui): prevent long relay URLs from causing horizontal
 overflow on mobile

- Add relay-url className to relay URL elements
- Override inline nowrap styles on mobile with word-break: break-all
- Allow relay URLs to wrap across multiple lines on mobile
- Prevent horizontal overflow from long relay names like proxy URLs
---
 src/components/Settings/RelaySettings.tsx | 17 ++++++++++-------
 src/styles/components/settings.css        | 22 ++++++++++++++++++++++
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/Settings/RelaySettings.tsx b/src/components/Settings/RelaySettings.tsx
index 49a40325..2f0eb776 100644
--- a/src/components/Settings/RelaySettings.tsx
+++ b/src/components/Settings/RelaySettings.tsx
@@ -100,13 +100,16 @@ const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses }) => {
                     }} 
                   />
                   <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{ 
-                      fontSize: '0.9rem',
-                      fontFamily: 'var(--font-mono, monospace)',
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis'
-                    }}>
+                    <div 
+                      className="relay-url"
+                      style={{ 
+                        fontSize: '0.9rem',
+                        fontFamily: 'var(--font-mono, monospace)',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis'
+                      }}
+                    >
                       {formatRelayUrl(relay.url)}
                     </div>
                   </div>
diff --git a/src/styles/components/settings.css b/src/styles/components/settings.css
index 4039e075..a74f5d50 100644
--- a/src/styles/components/settings.css
+++ b/src/styles/components/settings.css
@@ -96,6 +96,15 @@
   color: rgb(161 161 170); /* zinc-400 */
 }
 
+/* Relay items */
+.relay-item {
+  max-width: 100%;
+}
+
+.relay-url {
+  max-width: 100%;
+}
+
 /* Mobile responsive styles */
 @media (max-width: 768px) {
   .settings-view {
@@ -122,6 +131,19 @@
     flex: 1 1 auto;
     min-width: 70px;
   }
+  
+  .relay-item {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+  
+  .relay-url {
+    white-space: normal !important;
+    word-break: break-all !important;
+    overflow: visible !important;
+    text-overflow: unset !important;
+    line-height: 1.4;
+  }
 }