From 5d2eb5a26007b08c13388d5941a3b26cd4cec070 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Mon, 1 Jun 2026 15:09:10 +0800
Subject: [PATCH] fix: prevent home screen horizontal scroll

---
 apps/desktop/src/App.vue                           |  4 ++--
 .../src/components/layout/WelcomeScreen.vue        | 14 ++++++++------
 apps/desktop/src/styles/globals.css                |  8 ++++++++
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/apps/desktop/src/App.vue b/apps/desktop/src/App.vue
index ee5de99627..28a6b03279 100644
--- a/apps/desktop/src/App.vue
+++ b/apps/desktop/src/App.vue
@@ -948,10 +948,10 @@ onUnmounted(() => {
     :setup-mode="setupRequired"
     @authenticated="onLoginSuccess"
   />
-  <div v-show="!setupRequired && (!needsAuth || authenticated)">
+  <div v-show="!setupRequired && (!needsAuth || authenticated)" class="h-screen w-screen overflow-hidden">
     <TooltipProvider :delay-duration="300">
       <div
-        class="h-screen w-screen min-w-[760px] min-h-[600px] flex flex-col bg-background text-foreground overflow-hidden"
+        class="h-screen w-screen max-w-full min-w-[760px] min-h-[600px] flex flex-col bg-background text-foreground overflow-hidden"
       >
         <AppToolbar
           :is-dark="isDark"
diff --git a/apps/desktop/src/components/layout/WelcomeScreen.vue b/apps/desktop/src/components/layout/WelcomeScreen.vue
index a7f602c3a5..ac3bd0faf4 100644
--- a/apps/desktop/src/components/layout/WelcomeScreen.vue
+++ b/apps/desktop/src/components/layout/WelcomeScreen.vue
@@ -26,9 +26,9 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="flex-1 overflow-auto bg-background">
-    <div class="mx-auto flex min-h-full w-full max-w-5xl flex-col justify-center gap-6 px-8 py-10">
-      <div class="grid grid-cols-3 gap-3">
+  <div class="min-w-0 flex-1 overflow-x-hidden overflow-y-auto bg-background">
+    <div class="mx-auto flex min-h-full w-full min-w-0 max-w-5xl flex-col justify-center gap-6 px-8 py-10">
+      <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
         <div class="rounded-lg border bg-muted/20 px-4 py-3">
           <div class="flex items-center gap-2 text-xs text-muted-foreground">
             <Database class="h-3.5 w-3.5" /> {{ t("welcome.connections") }}
@@ -49,7 +49,7 @@ const { t } = useI18n();
         </div>
       </div>
 
-      <div class="grid grid-cols-[1.2fr_0.8fr] gap-4">
+      <div class="grid grid-cols-1 gap-4 lg:grid-cols-[1.2fr_0.8fr]">
         <div class="rounded-lg border">
           <div class="flex items-center justify-between border-b px-4 py-3">
             <div class="text-sm font-medium">{{ t("welcome.quickConnections") }}</div>
@@ -124,8 +124,10 @@ const { t } = useI18n();
             <p class="mt-1 text-xs leading-5 text-muted-foreground">
               {{ t("welcome.mcpDescription") }}
             </p>
-            <div class="mt-2 flex items-center gap-2">
-              <code class="rounded bg-muted px-2 py-0.5 text-[11px] select-all">npx @dbx-app/mcp-server</code>
+            <div class="mt-2 flex flex-wrap items-center gap-2">
+              <code class="max-w-full break-all rounded bg-muted px-2 py-0.5 text-[11px] select-all"
+                >npx @dbx-app/mcp-server</code
+              >
               <a href="#" class="text-xs text-primary hover:underline" @click.prevent="emit('open-mcp-guide')">{{
                 t("welcome.mcpLearnMore")
               }}</a>
diff --git a/apps/desktop/src/styles/globals.css b/apps/desktop/src/styles/globals.css
index 2a00a7eeab..ba3178d3b2 100644
--- a/apps/desktop/src/styles/globals.css
+++ b/apps/desktop/src/styles/globals.css
@@ -157,6 +157,14 @@ body.dbx-table-reference-dragging * {
   * {
     @apply border-border outline-ring/50;
   }
+  html,
+  body,
+  #root {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    overscroll-behavior: none;
+  }
   body {
     @apply bg-background text-foreground;
     @apply font-sans;