From d784f1c75f77671d566a3525973a5de8d979ed5e Mon Sep 17 00:00:00 2001
From: Ivan <ivan@quad4.io>
Date: Tue, 14 Apr 2026 19:34:11 -0500
Subject: [PATCH] refactor(ui): update background styles and padding for
 consistency across multiple page components

---
 .../components/page-nodes/PageNodesPage.vue   |  8 +-
 .../src/frontend/components/ping/PingPage.vue |  8 +-
 .../src/frontend/components/rncp/RNCPPage.vue | 83 +++++++++--------
 .../components/rnprobe/RNProbePage.vue        |  8 +-
 .../components/rnstatus/RNStatusPage.vue      |  8 +-
 .../components/settings/SettingsPage.vue      | 89 +++++++++++++++++++
 .../frontend/components/tools/BotsPage.vue    |  6 +-
 .../components/tools/PaperMessagePage.vue     |  6 +-
 .../frontend/components/tools/RNPathPage.vue  |  8 +-
 .../components/tools/RNPathTracePage.vue      | 12 +--
 .../components/tools/RNodeFlasherPage.vue     |  8 +-
 .../frontend/components/tools/ToolsPage.vue   |  4 +-
 .../components/translator/TranslatorPage.vue  |  8 +-
 13 files changed, 180 insertions(+), 76 deletions(-)

diff --git a/meshchatx/src/frontend/components/page-nodes/PageNodesPage.vue b/meshchatx/src/frontend/components/page-nodes/PageNodesPage.vue
index 8b8575f..ce153a1 100644
--- a/meshchatx/src/frontend/components/page-nodes/PageNodesPage.vue
+++ b/meshchatx/src/frontend/components/page-nodes/PageNodesPage.vue
@@ -1,8 +1,8 @@
 <template>
-    <div
-        class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
-    >
-        <div class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
+        <div
+            class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+        >
             <div class="space-y-4 w-full max-w-5xl mx-auto">
                 <div class="glass-card space-y-5">
                     <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
diff --git a/meshchatx/src/frontend/components/ping/PingPage.vue b/meshchatx/src/frontend/components/ping/PingPage.vue
index 0df68d7..02ad9de 100644
--- a/meshchatx/src/frontend/components/ping/PingPage.vue
+++ b/meshchatx/src/frontend/components/ping/PingPage.vue
@@ -1,9 +1,9 @@
 <template>
     <!-- eslint-disable vue/no-v-html -->
-    <div
-        class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
-    >
-        <div class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
+        <div
+            class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+        >
             <div class="space-y-4 w-full max-w-4xl mx-auto">
                 <div class="glass-card space-y-5">
                     <div class="space-y-2">
diff --git a/meshchatx/src/frontend/components/rncp/RNCPPage.vue b/meshchatx/src/frontend/components/rncp/RNCPPage.vue
index 6589cbe..dc46f0d 100644
--- a/meshchatx/src/frontend/components/rncp/RNCPPage.vue
+++ b/meshchatx/src/frontend/components/rncp/RNCPPage.vue
@@ -1,8 +1,8 @@
 <template>
-    <div
-        class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
-    >
-        <div class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
+        <div
+            class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+        >
             <div class="space-y-4 w-full max-w-4xl mx-auto">
                 <div class="glass-card space-y-5">
                     <div class="space-y-2">
@@ -46,40 +46,47 @@
                         </div>
                     </div>
 
-                    <div class="flex gap-2 border-b border-gray-200 dark:border-zinc-700">
-                        <button
-                            :class="[
-                                activeTab === 'send'
-                                    ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
-                                    : 'text-gray-600 dark:text-gray-400',
-                                'px-4 py-2 font-semibold transition',
-                            ]"
-                            @click="activeTab = 'send'"
-                        >
-                            {{ $t("rncp.send_file") }}
-                        </button>
-                        <button
-                            :class="[
-                                activeTab === 'fetch'
-                                    ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
-                                    : 'text-gray-600 dark:text-gray-400',
-                                'px-4 py-2 font-semibold transition',
-                            ]"
-                            @click="activeTab = 'fetch'"
-                        >
-                            {{ $t("rncp.fetch_file") }}
-                        </button>
-                        <button
-                            :class="[
-                                activeTab === 'listen'
-                                    ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
-                                    : 'text-gray-600 dark:text-gray-400',
-                                'px-4 py-2 font-semibold transition',
-                            ]"
-                            @click="activeTab = 'listen'"
-                        >
-                            {{ $t("rncp.listen") }}
-                        </button>
+                    <div
+                        class="border-b border-gray-200 dark:border-zinc-700 overflow-x-auto overscroll-x-contain -mx-4 px-4 sm:mx-0 sm:px-0"
+                    >
+                        <div class="flex w-max min-w-full sm:w-auto gap-1 sm:gap-2">
+                            <button
+                                type="button"
+                                :class="[
+                                    activeTab === 'send'
+                                        ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
+                                        : 'text-gray-600 dark:text-gray-400',
+                                    'shrink-0 px-3 sm:px-4 py-2 text-sm font-semibold transition',
+                                ]"
+                                @click="activeTab = 'send'"
+                            >
+                                {{ $t("rncp.send_file") }}
+                            </button>
+                            <button
+                                type="button"
+                                :class="[
+                                    activeTab === 'fetch'
+                                        ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
+                                        : 'text-gray-600 dark:text-gray-400',
+                                    'shrink-0 px-3 sm:px-4 py-2 text-sm font-semibold transition',
+                                ]"
+                                @click="activeTab = 'fetch'"
+                            >
+                                {{ $t("rncp.fetch_file") }}
+                            </button>
+                            <button
+                                type="button"
+                                :class="[
+                                    activeTab === 'listen'
+                                        ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
+                                        : 'text-gray-600 dark:text-gray-400',
+                                    'shrink-0 px-3 sm:px-4 py-2 text-sm font-semibold transition',
+                                ]"
+                                @click="activeTab = 'listen'"
+                            >
+                                {{ $t("rncp.listen") }}
+                            </button>
+                        </div>
                     </div>
 
                     <div v-if="activeTab === 'send'" class="space-y-4">
diff --git a/meshchatx/src/frontend/components/rnprobe/RNProbePage.vue b/meshchatx/src/frontend/components/rnprobe/RNProbePage.vue
index e78baef..0aa8a50 100644
--- a/meshchatx/src/frontend/components/rnprobe/RNProbePage.vue
+++ b/meshchatx/src/frontend/components/rnprobe/RNProbePage.vue
@@ -1,8 +1,8 @@
 <template>
-    <div
-        class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
-    >
-        <div class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
+        <div
+            class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+        >
             <div class="space-y-4 w-full max-w-4xl mx-auto">
                 <div class="glass-card space-y-5">
                     <div class="space-y-2">
diff --git a/meshchatx/src/frontend/components/rnstatus/RNStatusPage.vue b/meshchatx/src/frontend/components/rnstatus/RNStatusPage.vue
index 3ed41bd..abe2892 100644
--- a/meshchatx/src/frontend/components/rnstatus/RNStatusPage.vue
+++ b/meshchatx/src/frontend/components/rnstatus/RNStatusPage.vue
@@ -1,8 +1,8 @@
 <template>
-    <div
-        class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
-    >
-        <div class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
+        <div
+            class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+        >
             <div class="space-y-4 w-full max-w-6xl mx-auto">
                 <div class="glass-card space-y-5 rounded-2xl border border-slate-200/70 p-5 dark:border-zinc-700/80">
                     <div class="space-y-2">
diff --git a/meshchatx/src/frontend/components/settings/SettingsPage.vue b/meshchatx/src/frontend/components/settings/SettingsPage.vue
index 59dc180..72bc17d 100644
--- a/meshchatx/src/frontend/components/settings/SettingsPage.vue
+++ b/meshchatx/src/frontend/components/settings/SettingsPage.vue
@@ -1063,6 +1063,46 @@
                         </div>
                     </section>
 
+                    <!-- Network Visualiser -->
+                    <section
+                        v-show="matchesSearch(...sectionKeywords.visualiser)"
+                        class="settings-section break-inside-avoid"
+                    >
+                        <header class="settings-section__header">
+                            <div>
+                                <div class="settings-section__eyebrow">Visualiser</div>
+                                <h2>{{ $t("visualiser.title") }}</h2>
+                                <p>{{ $t("visualiser.description") }}</p>
+                            </div>
+                        </header>
+                        <div class="settings-section__body space-y-4">
+                            <label class="setting-toggle">
+                                <Toggle
+                                    id="settings-visualiser-offline"
+                                    v-model="visualiserShowDisabledInterfaces"
+                                    @update:model-value="onVisualiserShowDisabledChange"
+                                />
+                                <span class="setting-toggle__label">
+                                    <span class="setting-toggle__title">{{
+                                        $t("visualiser.show_disabled_interfaces")
+                                    }}</span>
+                                </span>
+                            </label>
+                            <label class="setting-toggle">
+                                <Toggle
+                                    id="settings-visualiser-discovered"
+                                    v-model="visualiserShowDiscoveredInterfaces"
+                                    @update:model-value="onVisualiserShowDiscoveredChange"
+                                />
+                                <span class="setting-toggle__label">
+                                    <span class="setting-toggle__title">{{
+                                        $t("visualiser.show_discovered_interfaces")
+                                    }}</span>
+                                </span>
+                            </label>
+                        </div>
+                    </section>
+
                     <!-- Location -->
                     <section
                         v-show="matchesSearch(...sectionKeywords.location)"
@@ -2023,6 +2063,7 @@ import KeyboardShortcuts from "../../js/KeyboardShortcuts";
 import ElectronUtils from "../../js/ElectronUtils";
 import LxmfUserIcon from "../LxmfUserIcon.vue";
 import GlobalState from "../../js/GlobalState";
+import GlobalEmitter from "../../js/GlobalEmitter";
 
 export default {
     name: "SettingsPage",
@@ -2100,7 +2141,20 @@ export default {
             trustedTelemetryPeers: [],
             stickerCount: 0,
             stickerImportReplaceDuplicates: false,
+            visualiserShowDisabledInterfaces: false,
+            visualiserShowDiscoveredInterfaces: false,
             sectionKeywords: {
+                visualiser: [
+                    "Visualiser",
+                    "Network Visualiser",
+                    "visualiser",
+                    "graph",
+                    "mesh",
+                    "visualiser.show_disabled_interfaces",
+                    "visualiser.show_discovered_interfaces",
+                    "offline",
+                    "discovered",
+                ],
                 banishment: [
                     "Visuals",
                     "app.banishment",
@@ -2331,8 +2385,43 @@ export default {
         this.getConfig();
         this.getTrustedTelemetryPeers();
         this.loadStickerCount();
+        this.loadVisualiserDisplayPrefsFromStorage();
     },
     methods: {
+        loadVisualiserDisplayPrefsFromStorage() {
+            try {
+                if (typeof localStorage !== "undefined") {
+                    this.visualiserShowDisabledInterfaces =
+                        localStorage.getItem("meshchatx.visualiser.showDisabledInterfaces") === "true";
+                    this.visualiserShowDiscoveredInterfaces =
+                        localStorage.getItem("meshchatx.visualiser.showDiscoveredInterfaces") === "true";
+                }
+            } catch {
+                /* localStorage unavailable */
+            }
+        },
+        onVisualiserShowDisabledChange(val) {
+            this.visualiserShowDisabledInterfaces = val;
+            try {
+                if (typeof localStorage !== "undefined") {
+                    localStorage.setItem("meshchatx.visualiser.showDisabledInterfaces", val ? "true" : "false");
+                }
+            } catch {
+                /* localStorage unavailable */
+            }
+            GlobalEmitter.emit("visualiser-display-prefs-changed");
+        },
+        onVisualiserShowDiscoveredChange(val) {
+            this.visualiserShowDiscoveredInterfaces = val;
+            try {
+                if (typeof localStorage !== "undefined") {
+                    localStorage.setItem("meshchatx.visualiser.showDiscoveredInterfaces", val ? "true" : "false");
+                }
+            } catch {
+                /* localStorage unavailable */
+            }
+            GlobalEmitter.emit("visualiser-display-prefs-changed");
+        },
         async getTrustedTelemetryPeers() {
             try {
                 const response = await window.api.get("/api/v1/telemetry/trusted-peers");
diff --git a/meshchatx/src/frontend/components/tools/BotsPage.vue b/meshchatx/src/frontend/components/tools/BotsPage.vue
index de1e013..08f3555 100644
--- a/meshchatx/src/frontend/components/tools/BotsPage.vue
+++ b/meshchatx/src/frontend/components/tools/BotsPage.vue
@@ -1,6 +1,8 @@
 <template>
-    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-white dark:bg-zinc-950">
-        <div class="flex-1 overflow-y-auto w-full px-3 sm:px-4 md:px-5 lg:px-8 py-4 sm:py-6">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
+        <div
+            class="flex-1 overflow-y-auto w-full px-3 sm:px-4 md:px-5 lg:px-8 py-4 sm:py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+        >
             <div class="space-y-8 w-full max-w-4xl mx-auto">
                 <div class="space-y-2 border-b border-gray-200 dark:border-zinc-800 pb-6">
                     <div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
diff --git a/meshchatx/src/frontend/components/tools/PaperMessagePage.vue b/meshchatx/src/frontend/components/tools/PaperMessagePage.vue
index 66b00a4..0881bf5 100644
--- a/meshchatx/src/frontend/components/tools/PaperMessagePage.vue
+++ b/meshchatx/src/frontend/components/tools/PaperMessagePage.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-white dark:bg-zinc-950">
-        <div class="flex-1 overflow-y-auto w-full">
-            <div class="p-3 sm:p-4 max-w-5xl mx-auto w-full space-y-4">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
+        <div class="flex-1 overflow-y-auto w-full pb-[max(1rem,env(safe-area-inset-bottom))]">
+            <div class="p-3 sm:p-4 md:p-6 max-w-5xl mx-auto w-full space-y-4 min-w-0">
                 <!-- header -->
                 <div class="border-b border-gray-200 dark:border-zinc-800 pb-4">
                     <div class="flex items-start gap-3 min-w-0">
diff --git a/meshchatx/src/frontend/components/tools/RNPathPage.vue b/meshchatx/src/frontend/components/tools/RNPathPage.vue
index 469840c..1056495 100644
--- a/meshchatx/src/frontend/components/tools/RNPathPage.vue
+++ b/meshchatx/src/frontend/components/tools/RNPathPage.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="flex flex-col flex-1 h-full overflow-hidden bg-white dark:bg-zinc-950">
+    <div class="flex flex-col flex-1 h-full min-w-0 overflow-hidden bg-slate-50 dark:bg-zinc-950">
         <!-- header -->
         <div
-            class="flex flex-wrap items-center gap-2 px-3 sm:px-4 py-3 sm:py-4 bg-white dark:bg-zinc-950 border-b border-gray-200 dark:border-zinc-800"
+            class="flex flex-wrap items-center gap-2 px-3 sm:px-4 md:px-6 py-3 sm:py-4 bg-slate-50 dark:bg-zinc-950 border-b border-gray-200 dark:border-zinc-800"
         >
             <div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
                 <div class="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg shrink-0">
@@ -34,7 +34,9 @@
             </div>
         </div>
 
-        <div class="flex-1 overflow-y-auto p-3 sm:p-4 md:p-6 space-y-4 sm:space-y-6">
+        <div
+            class="flex-1 overflow-y-auto min-w-0 p-3 sm:p-4 md:p-6 space-y-4 sm:space-y-6 pb-[max(1rem,env(safe-area-inset-bottom))]"
+        >
             <!-- tabs -->
             <div class="-mx-3 sm:mx-0 overflow-x-auto border-b border-gray-200 dark:border-zinc-800">
                 <div class="flex min-w-0 px-3 sm:px-0">
diff --git a/meshchatx/src/frontend/components/tools/RNPathTracePage.vue b/meshchatx/src/frontend/components/tools/RNPathTracePage.vue
index b380308..4f0263b 100644
--- a/meshchatx/src/frontend/components/tools/RNPathTracePage.vue
+++ b/meshchatx/src/frontend/components/tools/RNPathTracePage.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="flex flex-col flex-1 h-full overflow-hidden bg-white dark:bg-zinc-950">
+    <div class="flex flex-col flex-1 h-full min-w-0 overflow-hidden bg-slate-50 dark:bg-zinc-950">
         <!-- header -->
-        <div class="bg-white dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-800 shadow-sm z-10">
-            <div class="px-4 py-3 md:px-6 md:py-4 flex items-center justify-between gap-4">
+        <div class="bg-slate-50 dark:bg-zinc-950 border-b border-gray-200 dark:border-zinc-800 shadow-sm z-10">
+            <div class="px-4 py-3 md:px-6 md:py-4 flex flex-wrap items-center justify-between gap-3 md:gap-4 min-w-0">
                 <div class="flex items-center gap-3">
                     <div class="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl shrink-0">
                         <MaterialDesignIcon
@@ -33,8 +33,10 @@
             </div>
         </div>
 
-        <div class="flex-1 overflow-y-auto">
-            <div class="p-3 sm:p-4 md:p-6 max-w-5xl mx-auto space-y-4 sm:space-y-6">
+        <div class="flex-1 overflow-y-auto min-w-0">
+            <div
+                class="p-3 sm:p-4 md:p-6 max-w-5xl mx-auto space-y-4 sm:space-y-6 pb-[max(1rem,env(safe-area-inset-bottom))]"
+            >
                 <!-- main input card -->
                 <div
                     class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-3 sm:p-4 md:p-6"
diff --git a/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue b/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue
index 46c611f..2eae4f6 100644
--- a/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue
+++ b/meshchatx/src/frontend/components/tools/RNodeFlasherPage.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="flex flex-col h-full w-full bg-white dark:bg-zinc-950 overflow-hidden min-w-0">
+    <div class="flex flex-col h-full w-full bg-slate-50 dark:bg-zinc-950 overflow-hidden min-w-0">
         <!-- header -->
         <div
-            class="flex flex-wrap items-center gap-2 px-3 sm:px-4 py-2 border-b border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 z-10 relative"
+            class="flex flex-wrap items-center gap-2 px-3 sm:px-4 md:px-6 py-2 sm:py-3 border-b border-gray-200 dark:border-zinc-800 bg-slate-50 dark:bg-zinc-950 z-10 relative"
         >
             <div class="flex items-center gap-2 min-w-0 flex-1">
                 <v-icon icon="mdi-chip" color="purple" size="24" class="shrink-0"></v-icon>
@@ -38,7 +38,9 @@
         </div>
 
         <!-- content -->
-        <div class="flex-1 min-h-0 overflow-y-auto p-3 sm:p-6 space-y-4 sm:space-y-6">
+        <div
+            class="flex-1 min-h-0 min-w-0 overflow-y-auto p-3 sm:p-6 space-y-4 sm:space-y-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+        >
             <!-- setup card: Select device & Firmware -->
             <div
                 class="border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 rounded-lg overflow-hidden"
diff --git a/meshchatx/src/frontend/components/tools/ToolsPage.vue b/meshchatx/src/frontend/components/tools/ToolsPage.vue
index 8946ea6..17da812 100644
--- a/meshchatx/src/frontend/components/tools/ToolsPage.vue
+++ b/meshchatx/src/frontend/components/tools/ToolsPage.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-white dark:bg-zinc-950">
-        <div class="flex-1 overflow-y-auto w-full">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
+        <div class="flex-1 overflow-y-auto w-full pb-[max(1rem,env(safe-area-inset-bottom))]">
             <div class="border-b border-gray-200 dark:border-zinc-800 px-4 py-4 md:px-6 md:py-5">
                 <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between lg:gap-6">
                     <div class="space-y-2 min-w-0 flex-1">
diff --git a/meshchatx/src/frontend/components/translator/TranslatorPage.vue b/meshchatx/src/frontend/components/translator/TranslatorPage.vue
index fa1f943..31db6f4 100644
--- a/meshchatx/src/frontend/components/translator/TranslatorPage.vue
+++ b/meshchatx/src/frontend/components/translator/TranslatorPage.vue
@@ -1,8 +1,8 @@
 <template>
-    <div
-        class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
-    >
-        <div class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6">
+    <div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
+        <div
+            class="flex-1 overflow-y-auto w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+        >
             <div class="space-y-4 w-full max-w-4xl mx-auto">
                 <div class="glass-card space-y-5">
                     <div class="space-y-2">