Improve remote overlay responsiveness

packages/ui/src/components/remote-access-overlay.tsx

@@ -126,7 +126,7 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                 <p class="remote-subtitle">Use the addresses below to open CodeNomad from another device.</p>
               </div>
               <button type="button" class="remote-close" onClick={props.onClose} aria-label="Close remote access">
-                Close
+                ×
               </button>
             </header>
 
@@ -142,7 +142,7 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                   </div>
                   <button class="remote-refresh" type="button" onClick={() => void refreshMeta()} disabled={loading()}>
                     <RefreshCw class={`remote-icon ${loading() ? "remote-spin" : ""}`} />
-                    Refresh
+                    <span class="remote-refresh-label">Refresh</span>
                   </button>
                 </div>
 

packages/ui/src/styles/components/remote-access.css

@@ -55,9 +55,11 @@
   border: 1px solid var(--border-base);
   background: var(--surface-secondary);
   color: var(--text-primary);
-  border-radius: 10px;
-  padding: 8px 12px;
+  border-radius: 999px;
+  padding: 6px 10px;
   cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
 }
 
 .remote-body {
@@ -118,6 +120,16 @@
   cursor: pointer;
 }
 
+.remote-refresh-label {
+  display: inline-block;
+}
+
+@media (max-width: 640px) {
+  .remote-refresh-label {
+    display: none;
+  }
+}
+
 .remote-toggle {
   position: relative;
   display: flex;
@@ -150,6 +162,7 @@
 
 .remote-toggle-state {
   pointer-events: none;
+  white-space: nowrap;
 }
 
 .remote-toggle-thumb {