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

@@ -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>

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;
+  }
 }