diff --git a/web/src/App.tsx b/web/src/App.tsx
index 92a62f6e..043b668c 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -49,7 +49,7 @@ export const App: React.FC = React.memo(() => {
   return (
     <div
       id="tailchat-app"
-      className={clsx('h-screen w-screen min-h-screen select-none', {
+      className={clsx('absolute inset-0 select-none', {
         dark: darkMode,
       })}
     >
diff --git a/web/src/components/ChatBox/index.tsx b/web/src/components/ChatBox/index.tsx
index e65225d8..1ba671c0 100644
--- a/web/src/components/ChatBox/index.tsx
+++ b/web/src/components/ChatBox/index.tsx
@@ -50,7 +50,7 @@ export const ChatBox: React.FC<ChatBoxProps> = React.memo((props) => {
   }
 
   return (
-    <div className="w-full h-screen flex flex-col select-text">
+    <div className="w-full h-full flex flex-col select-text">
       <ChatMessageList messages={messages} />
 
       <ChatInputBox
diff --git a/web/src/routes/Main/Provider.tsx b/web/src/routes/Main/Provider.tsx
index 077522f9..2d5dd7bc 100644
--- a/web/src/routes/Main/Provider.tsx
+++ b/web/src/routes/Main/Provider.tsx
@@ -68,7 +68,7 @@ export const MainProvider: React.FC = React.memo((props) => {
 
   if (loading) {
     return (
-      <div className="w-screen h-screen flex items-center justify-center bg-gray-700 text-white text-xl">
+      <div className="fixed inset-0 flex items-center justify-center bg-gray-700 text-white text-xl">
         <LoadingSpinner tip="正在连接到聊天服务器..." />
       </div>
     );