From 0bf9eff0ab540f0b4859cca222b8062b9d1f2d04 Mon Sep 17 00:00:00 2001
From: Jianhui Zhao <zhaojh329@gmail.com>
Date: Fri, 25 Jul 2025 23:49:18 +0800
Subject: [PATCH] ui: Optimize terminal display effect

Signed-off-by: Jianhui Zhao <zhaojh329@gmail.com>
---
 ui/src/components/RttyTerm.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/RttyTerm.vue b/ui/src/components/RttyTerm.vue
index 4e6014b..a6e981f 100644
--- a/ui/src/components/RttyTerm.vue
+++ b/ui/src/components/RttyTerm.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="terminal-container">
-    <div ref="terminal" class="terminal" @contextmenu.prevent="showContextmenu"></div>
+    <div ref="terminal" class="rtty-terminal" @contextmenu.prevent="showContextmenu"></div>
     <el-button v-show="isConnected && !showKeyboard" @click="toggleKeyboard" type="primary" size="small" circle class="keyboard-toggle-btn">⌨</el-button>
     <RttyKeyboard v-show="showKeyboard" @keypress="handleKeypress" @close="hideKeyboard" class="floating-keyboard"/>
     <el-dialog v-model="fileCtx.modal" :title="$t('Upload file to device')" @close="onUploadDialogClosed" :width="400">
@@ -403,9 +403,17 @@ onUnmounted(() => {
     overflow: hidden;
   }
 
-  .terminal {
-    margin: 5px;
+  .rtty-terminal {
     height: 100%;
+    background-color: black;
+  }
+
+  :deep(.terminal) {
+    padding: 5px;
+  }
+
+  :deep(.xterm .xterm-viewport) {
+    overflow-y: auto;
   }
 
   .floating-keyboard {
@@ -435,8 +443,4 @@ onUnmounted(() => {
   .keyboard-toggle-btn:hover {
     opacity: 1;
   }
-
-  :deep(.xterm .xterm-viewport) {
-    overflow-y: auto;
-  }
 </style>