fix: responsive header for mobile viewports, remove skip-to-search

- Hide Clearnet/Tor/Local labels on mobile (icon-only, visible on sm+)
- Tighten header gap on small screens (gap-2 mobile, gap-3 desktop)
- Remove skip-to-search link that was rendering visibly
- Add local API (Umbrel) connection badge and network priority

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Copexit

src/app/layout.tsx

@@ -101,12 +101,6 @@ export default function RootLayout({
         <I18nProvider>
           <LangAttributeSync />
           <NetworkProvider>
-            <a
-              href="#main-input"
-              className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:bg-bitcoin focus:text-black focus:px-4 focus:py-2 focus:rounded-lg focus:text-sm focus:font-semibold"
-            >
-              Skip to search
-            </a>
             <Header />
             <PrivacyNotice />
             <main className="flex-1 flex flex-col">{children}</main>

src/components/ConnectionBadge.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
-import { Shield, ShieldAlert, ShieldQuestion } from "lucide-react";
+import { Shield, ShieldAlert, ShieldCheck, ShieldQuestion } from "lucide-react";
 import { useNetwork } from "@/context/NetworkContext";
 import { useTranslation } from "react-i18next";
 
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
  */
 export function ConnectionBadge() {
   const { t } = useTranslation();
-  const { torStatus: status } = useNetwork();
+  const { torStatus, localApiStatus } = useNetwork();
   const [showTip, setShowTip] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -27,28 +27,37 @@ export function ConnectionBadge() {
     return () => document.removeEventListener("click", handleClick, true);
   }, [showTip]);
 
-  const config = {
-    checking: {
-      icon: <Shield size={16} className="text-muted animate-pulse" />,
-      label: null,
-      tip: t("common.connectionChecking", { defaultValue: "Checking connection type..." }),
-    },
-    tor: {
-      icon: <Shield size={16} className="text-success" />,
-      label: <span className="text-success text-xs hidden sm:inline">{t("common.tor", { defaultValue: "Tor" })}</span>,
-      tip: t("common.connectionTor", { defaultValue: "Connected via Tor - your IP is hidden from API providers" }),
-    },
-    unknown: {
-      icon: <ShieldQuestion size={16} className="text-muted" />,
-      label: null,
-      tip: t("common.connectionUnknown", { defaultValue: "Connection privacy status could not be determined" }),
-    },
-    clearnet: {
-      icon: <ShieldAlert size={16} className="text-warning" />,
-      label: <span className="text-warning text-xs hidden sm:inline">{t("common.clearnet", { defaultValue: "Clearnet" })}</span>,
-      tip: t("common.connectionClearnet", { defaultValue: "Not using Tor - mempool.space can see your IP address" }),
-    },
-  }[status];
+  // Local API (Umbrel) takes display priority - it's the most private option
+  const isLocal = localApiStatus === "available";
+
+  const config = isLocal
+    ? {
+        icon: <ShieldCheck size={16} className="text-success" />,
+        label: <span className="text-success text-xs hidden sm:inline">{t("common.local", { defaultValue: "Local" })}</span>,
+        tip: t("common.connectionLocal", { defaultValue: "Connected to local mempool instance - all queries stay on your network" }),
+      }
+    : {
+        checking: {
+          icon: <Shield size={16} className="text-muted animate-pulse" />,
+          label: null,
+          tip: t("common.connectionChecking", { defaultValue: "Checking connection type..." }),
+        },
+        tor: {
+          icon: <Shield size={16} className="text-success" />,
+          label: <span className="text-success text-xs hidden sm:inline">{t("common.tor", { defaultValue: "Tor" })}</span>,
+          tip: t("common.connectionTor", { defaultValue: "Connected via Tor - your IP is hidden from API providers" }),
+        },
+        unknown: {
+          icon: <ShieldQuestion size={16} className="text-muted" />,
+          label: null,
+          tip: t("common.connectionUnknown", { defaultValue: "Connection privacy status could not be determined" }),
+        },
+        clearnet: {
+          icon: <ShieldAlert size={16} className="text-warning" />,
+          label: <span className="text-warning text-xs hidden sm:inline">{t("common.clearnet", { defaultValue: "Clearnet" })}</span>,
+          tip: t("common.connectionClearnet", { defaultValue: "Not using Tor - mempool.space can see your IP address" }),
+        },
+      }[torStatus];
 
   return (
     <div ref={ref} className="relative">

src/components/Header.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import { NetworkSelector } from "./NetworkSelector";
 import { ConnectionBadge } from "./ConnectionBadge";
 import { ApiSettings } from "./ApiSettings";
@@ -19,14 +18,7 @@ export function Header() {
           aria-label="am-i.exposed home"
           className="flex items-center gap-2 group hover:opacity-80 transition-opacity cursor-pointer"
         >
-          <Image
-            src="/logo-256.svg"
-            alt=""
-            width={28}
-            height={28}
-            className="rounded-md"
-          />
-          <span className="hidden sm:inline text-xl sm:text-2xl font-bold tracking-tight text-foreground select-none whitespace-nowrap">
+          <span className="text-xl sm:text-2xl font-bold tracking-tight text-foreground select-none whitespace-nowrap">
             am-i.<span className="text-danger">exposed</span>
           </span>
         </button>

src/context/NetworkContext.tsx

@@ -15,6 +15,7 @@ import {
 import { useUrlState } from "@/hooks/useUrlState";
 import { useCustomApi } from "@/hooks/useCustomApi";
 import { useTorDetection, type TorStatus } from "@/hooks/useTorDetection";
+import { useLocalApi, type LocalApiStatus } from "@/hooks/useLocalApi";
 
 interface NetworkContextValue {
   network: BitcoinNetwork;
@@ -23,6 +24,7 @@ interface NetworkContextValue {
   customApiUrl: string | null;
   setCustomApiUrl: (url: string | null) => void;
   torStatus: TorStatus;
+  localApiStatus: LocalApiStatus;
 }
 
 const NetworkContext = createContext<NetworkContextValue>({
@@ -32,16 +34,18 @@ const NetworkContext = createContext<NetworkContextValue>({
   customApiUrl: null,
   setCustomApiUrl: () => {},
   torStatus: "checking",
+  localApiStatus: "checking",
 });
 
 export function NetworkProvider({ children }: { children: ReactNode }) {
   const { network, setNetwork } = useUrlState();
   const { customUrl, setCustomUrl } = useCustomApi();
   const torStatus = useTorDetection();
+  const localApiStatus = useLocalApi();
   const baseConfig = NETWORK_CONFIG[network];
 
   const config = useMemo(() => {
-    // Custom API URL takes priority over everything
+    // Priority 1: Custom API URL takes priority over everything
     if (customUrl) {
       return {
         ...baseConfig,
@@ -50,7 +54,15 @@ export function NetworkProvider({ children }: { children: ReactNode }) {
         explorerUrl: customUrl.replace(/\/api\/?$/, ""),
       };
     }
-    // When Tor detected and onion URL available, use it as primary
+    // Priority 2: Same-origin API proxy detected (Umbrel mode)
+    if (localApiStatus === "available") {
+      return {
+        ...baseConfig,
+        mempoolBaseUrl: "/api",
+        esploraBaseUrl: "/api", // Disable external fallback
+      };
+    }
+    // Priority 3: Tor detected and onion URL available - use it as primary
     // with clearnet mempool as fallback (still routed through Tor exit nodes)
     if (torStatus === "tor" && baseConfig.mempoolOnionUrl) {
       return {
@@ -60,8 +72,9 @@ export function NetworkProvider({ children }: { children: ReactNode }) {
         explorerUrl: baseConfig.mempoolOnionUrl.replace(/\/api\/?$/, ""),
       };
     }
+    // Priority 4: Hardcoded defaults
     return baseConfig;
-  }, [baseConfig, customUrl, torStatus]);
+  }, [baseConfig, customUrl, localApiStatus, torStatus]);
 
   const value = useMemo(
     () => ({
@@ -71,8 +84,9 @@ export function NetworkProvider({ children }: { children: ReactNode }) {
       customApiUrl: customUrl,
       setCustomApiUrl: setCustomUrl,
       torStatus,
+      localApiStatus,
     }),
-    [network, setNetwork, config, customUrl, setCustomUrl, torStatus],
+    [network, setNetwork, config, customUrl, setCustomUrl, torStatus, localApiStatus],
   );
 
   return (