fix(ui): mesh/web5/apps layout, modal, and search UX fixes

- Mesh: fix 920-1280px bottom margin (phantom mobile-nav reservation
  leaking into the desktop-sidebar range), let the mesh view scale to
  full width on wide screens instead of capping at 1600px, and make the
  Device panel collapsible on desktop (previously mobile-only)
- Search/controller-nav: a global gamepad/keyboard-nav feature was
  auto-clicking "the next button in the DOM" on Enter in any text input,
  which cleared the mesh peer search and popped the sideload modal from
  the App Store/My Apps search boxes. Opt out via data-controller-no-submit
  on all filter inputs; bump the mesh clear button's touch target
- Modals: several (sideload, credential, Lightning channel open, identity
  create) used ad-hoc blue buttons and non-fullscreen backdrops that only
  covered the main content area, not the sidebar. Teleport them to body,
  unify backdrop/button theming to the dark+orange convention, fix the
  sideload modal's square bottom corners on desktop, and standardize
  close buttons to the ghost-icon style
- Web5: remove the redundant/dead "Messages" tab from Connected Nodes
  (its deep-link was unreachable dead code); fix the "view message" toast
  to actually open the Archipelago channel instead of silently failing to
  match a LoRa peer; make identity rows responsive via a container query
  (viewport-based breakpoints don't work in the page's 2-column grid) and
  right-justify their action icons; collapse DID/DHT/Wallet/Nostr/Connected
  Nodes by default on mobile
- Apps/App Store: match the search bar and sideload button's height,
  padding, and background to the mode-switcher tabs beside them
- Mesh chat: keep the compose input focused after sending

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

neode-ui/src/views/apps/AppIconGrid.vue

@@ -91,6 +91,7 @@
       ></button>
     </div>
 
+    <Teleport to="body">
     <Transition name="fade">
       <div v-if="credentialModal.show" class="credential-modal-overlay fixed inset-0 z-[2700] flex items-center justify-center bg-black/80 backdrop-blur-md p-4" @click.self="closeCredentialModal">
         <div class="credential-modal-panel">
@@ -99,7 +100,11 @@
               <h2 class="text-lg font-semibold text-white">{{ credentialModal.title }}</h2>
               <p class="text-sm text-white/55 mt-1">{{ credentialModal.description }}</p>
             </div>
-            <button type="button" class="sideload-close-btn" aria-label="Close" @click="closeCredentialModal">&times;</button>
+            <button type="button" class="sideload-close-btn" aria-label="Close" @click="closeCredentialModal">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
           </div>
           <div class="credential-modal-body space-y-3">
             <div v-for="cred in credentialModal.credentials" :key="cred.label" class="rounded-lg border border-white/10 bg-white/[0.04] p-3">
@@ -117,6 +122,7 @@
         </div>
       </div>
     </Transition>
+    </Teleport>
   </div>
 </template>
 
@@ -344,27 +350,22 @@ function scrollToPage(index: number) {
   transform: scale(0.88);
 }
 
-.sideload-modal {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 34rem;
-  max-height: calc(100dvh - var(--safe-area-top, env(safe-area-inset-top, 0px)) - 12px);
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  border-radius: 1.5rem 1.5rem 0 0;
-  background: rgba(8, 10, 18, 0.94);
-  padding: 1.25rem;
-  padding-bottom: calc(1.25rem + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
-  box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.55);
-}
 .sideload-close-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 2.25rem;
   height: 2.25rem;
   flex-shrink: 0;
   border-radius: 0.75rem;
-  color: rgba(255, 255, 255, 0.55);
-  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.7);
+  background: transparent;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.sideload-close-btn:hover,
+.sideload-close-btn:focus-visible {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
 }
 .credential-modal-body {
   flex: 1 1 auto;

neode-ui/src/views/apps/LightningChannels.vue

@@ -129,6 +129,7 @@
     </Transition>
 
     <!-- Open Channel Modal -->
+    <Teleport to="body">
     <div v-if="showOpenModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="showOpenModal = false">
       <div class="glass-card p-6 w-full max-w-md mx-4">
         <h2 class="text-lg font-bold text-white mb-4">Open Channel</h2>
@@ -166,15 +167,17 @@
           <button
             @click="openChannel"
             :disabled="openingChannel"
-            class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-blue-500/20 border-blue-500/30"
+            class="flex-1 glass-button glass-button-warning px-4 py-2 rounded-lg text-sm font-medium"
           >
             {{ openingChannel ? 'Opening...' : 'Open Channel' }}
           </button>
         </div>
       </div>
     </div>
+    </Teleport>
 
     <!-- Close Confirmation Modal -->
+    <Teleport to="body">
     <div v-if="closeTarget" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="closeTarget = null">
       <div class="glass-card p-6 w-full max-w-sm mx-4">
         <h2 class="text-lg font-bold text-white mb-2">Close Channel?</h2>
@@ -194,6 +197,7 @@
         </div>
       </div>
     </div>
+    </Teleport>
   </div>
 </template>
 

neode-ui/src/views/apps/__tests__/AppIconGrid.test.ts

@@ -78,6 +78,10 @@ describe('AppIconGrid', () => {
       props: { apps: [['filebrowser', makePkg('filebrowser')]] },
       global: {
         plugins: [pinia],
+        // The credential modal is <Teleport to="body">'d (so its full-screen
+        // backdrop isn't clipped by the dashboard's transformed layout) —
+        // stub it to render inline so wrapper.text() still sees it.
+        stubs: { teleport: true },
       },
     })