From a0a250e38cd9d6e18c7160226bc3b358ef57ef56 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Tue, 27 May 2025 23:28:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=88=86=E5=89=B2=E7=BA=BF=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/LayoutRenderer.vue         | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/LayoutRenderer.vue b/packages/frontend/src/components/LayoutRenderer.vue
index 74f4c1f..462b737 100644
--- a/packages/frontend/src/components/LayoutRenderer.vue
+++ b/packages/frontend/src/components/LayoutRenderer.vue
@@ -617,17 +617,26 @@ onMounted(() => {
   /* Ensure handle lines remain hidden */
   /* background-color: transparent !important; */
 /* } */
+.splitpanes.default-theme .splitpanes__splitter {
+  background-image: none !important; /* Ensure no background image in normal state */
+}
 .splitpanes.default-theme .splitpanes__splitter:hover { /* Apply hover style to the pseudo-element */
-  background-color: var(--primary-color-light); /* Highlight on hover */
-    border: none !important; /* Ensure no extra borders */
+  background-color: transparent !important; /* Make splitter transparent on hover */
+  background-image: none !important; /* Ensure no background image on hover */
   /* Ensure it still occupies space and has cursor */
   position: relative;
   box-sizing: border-box;
-  transition: background-color 0.1s ease-in-out;
+  /* transition: background-color 0.1s ease-in-out; */ /* Transition handled by ::before */
 }
 
+.splitpanes.default-theme .splitpanes__splitter:hover::before {
+  background-color: var(--primary-color-light) !important; /* Highlight on hover */
+}
 .splitpanes__splitter:before {
-  /* Use background color as the visible line */
+  content: ""; /* Ensure content for pseudo-element */
+  display: block; /* Ensure it takes space */
+  width: 100%; /* Fill splitter width */
+  height: 100%; /* Fill splitter height */
   background-color: var(--border-color); /* Set background to border color */
   border: none !important; /* Ensure no extra borders */
   /* Ensure it still occupies space and has cursor */
@@ -635,6 +644,12 @@ onMounted(() => {
   box-sizing: border-box;
   transition: background-color 0.1s ease-in-out;
 }
+
+/* Ensure ::after pseudo-element doesn't interfere */
+.splitpanes.default-theme .splitpanes__splitter::after {
+  display: none !important;
+}
+
 /* Vertical splitter width */
 .splitpanes--vertical > .splitpanes__splitter {
   border-color: var(--border-color) !important;