fix ui height

src-tauri/Cargo.toml

@@ -1,8 +1,8 @@
 [package]
 name = "gemmatrans-client"
 version = "0.1.2"
-description = "A Tauri App"
+description = "A translategemma client"
-authors = ["you"]
+authors = ["Julian"]
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

src/App.vue

@@ -199,7 +199,7 @@ const translate = async () => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-100 dark:selection:bg-blue-900 flex flex-col">
+  <div class="h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-100 dark:selection:bg-blue-900 flex flex-col overflow-hidden">
     <!-- Header -->
     <header class="h-14 border-b dark:border-slate-800 bg-white dark:bg-slate-900 flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm">
       <div class="flex items-center gap-2 cursor-pointer group" @click="view = 'translate'">
@@ -232,12 +232,12 @@ const translate = async () => {
       </div>
     </header>
 
-    <main class="flex-1 flex overflow-hidden">
+    <main class="flex-1 flex overflow-hidden min-h-0 relative">
       <!-- Translation View -->
-      <div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white dark:bg-slate-900 overflow-hidden">
+      <div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white dark:bg-slate-900 overflow-hidden h-full">
         <!-- Source Pane -->
-        <div class="flex-1 flex flex-col min-h-0 relative">
+        <div class="flex-1 flex flex-col min-h-0 relative h-full">
-          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40">
+          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40 shrink-0">
             <!-- Custom Source Dropdown -->
             <div class="relative lang-dropdown min-w-30">
               <button 
@@ -289,9 +289,9 @@ const translate = async () => {
           <textarea
             v-model="sourceText"
             placeholder="请输入待翻译内容..."
-            class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300 dark:placeholder:text-slate-600 bg-transparent"
+            class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300 dark:placeholder:text-slate-600 bg-transparent min-h-0"
           ></textarea>
-          <div class="p-4 border-t dark:border-slate-800 flex justify-end">
+          <div class="p-4 border-t dark:border-slate-800 flex justify-end shrink-0">
             <button 
               @click="translate"
               :disabled="isTranslating || !sourceText.trim()"
@@ -305,8 +305,8 @@ const translate = async () => {
         </div>
 
         <!-- Target Pane -->
-        <div class="flex-1 flex flex-col min-h-0 bg-slate-50/30 dark:bg-slate-900/50 relative">
+        <div class="flex-1 flex flex-col min-h-0 bg-slate-50/30 dark:bg-slate-900/50 relative h-full">
-          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40">
+          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40 shrink-0">
             <!-- Custom Target Dropdown -->
             <div class="relative lang-dropdown min-w-30">
               <button 
@@ -352,7 +352,7 @@ const translate = async () => {
               </button>
             </div>
           </div>
-          <div class="flex-1 p-6 overflow-y-auto text-lg leading-relaxed whitespace-pre-wrap">
+          <div class="flex-1 p-6 overflow-y-auto text-lg leading-relaxed whitespace-pre-wrap min-h-0">
             <template v-if="targetText">
               {{ targetText }}
             </template>
@@ -362,7 +362,7 @@ const translate = async () => {
       </div>
 
       <!-- Settings View -->
-      <div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10">
+      <div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
         <div class="max-w-2xl mx-auto space-y-8">
           <section>
             <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">API 配置</h2>
@@ -429,7 +429,7 @@ const translate = async () => {
       </div>
 
       <!-- Logs View -->
-      <div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10">
+      <div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
         <div class="max-w-3xl mx-auto space-y-6">
           <div class="flex items-center justify-between">
             <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">调试日志</h2>