refactor: style improve

packages/core/client/src/schema-component/antd/gantt/components/gantt/gantt.tsx

@@ -505,7 +505,6 @@ export const Gantt: any = (props: any) => {
             scrollX={scrollX}
             ref={verticalGanttContainerRef}
           />
-
           {ganttEvent.changedTask && (
             <Tooltip
               arrowIndent={arrowIndent}
@@ -532,15 +531,15 @@ export const Gantt: any = (props: any) => {
             onScroll={handleScrollY}
             rtl={rtl}
           />
+          <HorizontalScroll
+            svgWidth={svgWidth}
+            taskListWidth={taskListWidth}
+            scroll={scrollX}
+            rtl={rtl}
+            onScroll={handleScrollX}
+          />
         </div>
       </div>
-      <HorizontalScroll
-        svgWidth={svgWidth}
-        taskListWidth={taskListWidth}
-        scroll={scrollX}
-        rtl={rtl}
-        onScroll={handleScrollX}
-      />
     </div>
   );
 };

packages/core/client/src/schema-component/antd/gantt/components/gantt/style.tsx

@@ -1,26 +1,33 @@
-
 import { css } from '@emotion/css';
 
-export const ganttVerticalContainer=css `
+export const ganttVerticalContainer = css`
   overflow: hidden;
   font-size: 0;
   margin: 0;
   padding: 0;
-  width:100%;
-  border-left:2px solid #f4f2f2
-`
+  // width:100%;
+  border-left: 2px solid #f4f2f2;
+`;
 
-export const horizontalContainer=css `
+export const horizontalContainer = css`
   margin: 0;
   padding: 0;
   overflow: hidden;
-`
+`;
 
-export const wrapper =css`
+export const wrapper = css`
   display: flex;
   padding: 0;
   margin: 0;
   list-style: none;
   outline: none;
   position: relative;
-`
+  .gantt-horizontal-scoll {
+    display: none;
+  }
+  &:hover {
+    .gantt-horizontal-scoll {
+      display: block;
+    }
+  }
+`;

packages/core/client/src/schema-component/antd/gantt/components/other/horizontal-scroll.tsx

@@ -25,7 +25,7 @@ export const HorizontalScroll: React.FC<{
           ? `0px ${taskListWidth}px 0px 0px`
           : `0px 0px 0px ${taskListWidth}px`,
       }}
-      className={cx(scrollWrapper)}
+      className={`${cx(scrollWrapper)} gantt-horizontal-scoll` }
       onScroll={onScroll}
       ref={scrollRef}
     >

packages/core/client/src/schema-component/antd/gantt/components/other/style.tsx

@@ -2,8 +2,8 @@ import { css } from '@emotion/css';
 
 export const scrollWrapper = css`
   overflow: auto;
-  position: relative;
-  top: -14px;
+  position: absolute;
+  bottom: -4px;
   max-width: 100%;
   /*firefox*/
   scrollbar-width: thin;
@@ -17,16 +17,14 @@ export const scrollWrapper = css`
     background: transparent;
   }
   &::-webkit-scrollbar-thumb {
-    border: 6px solid transparent;
-    background: rgba(0, 0, 0, 0.2);
-    background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
+    border: 5px solid transparent;
+    background:  #5c5858cc;
     border-radius: 10px;
     background-clip: padding-box;
   }
   &::-webkit-scrollbar-thumb:hover {
-    border: 4px solid transparent;
-    background: rgba(0, 0, 0, 0.3);
-    background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
+    border: 3px solid transparent;
+    background: #5c5858bd;
     background-clip: padding-box;
   }
 `;