add overflow style

oceanbase · Sep 25, 2023 · 12c999f · 12c999f
1 parent 452f03b
commit 12c999f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/src/page/Workspace/SideBar/ResourceTree/Datasource/index.less b/src/page/Workspace/SideBar/ResourceTree/Datasource/index.less
@@ -31,15 +31,20 @@
     .ant-tree-list {
       .ant-tree-treenode {
         .ant-tree-node-content-wrapper {
+          .ant-dropdown-trigger {
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
           &:hover {
             :local(.actions) {
-              display: block;
+              display: flex;
+              justify-content: center;
             }
           }
           :local(.actions) {
             display: none;
             flex: 0;
-            flex-basis: 20px;
+            flex-basis: 25px;
           }
           display: flex;
           .ant-tree-iconEle {

diff --git a/src/page/Workspace/SideBar/ResourceTree/Datasource/index.tsx b/src/page/Workspace/SideBar/ResourceTree/Datasource/index.tsx
@@ -259,7 +259,7 @@ export default forwardRef(function DatasourceTree(props, ref) {
                           <Popover
                             showArrow={false}
                             overlayClassName={styles.connectionPopover}
-                            placement="rightBottom"
+                            placement="right"
                             content={
                               <ConnectionPopover
                                 connection={datasourceMap.get(toNumber(node.key))}

diff --git a/src/page/Workspace/SideBar/ResourceTree/index.less b/src/page/Workspace/SideBar/ResourceTree/index.less
@@ -15,6 +15,13 @@
     padding: 0px 12px;
     .label {
       font-weight: 600;
+      flex-shrink: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .titleAction {
+      flex-shrink: 0;
+      flex-grow: 0;
     }
   }
   .search {

diff --git a/src/page/Workspace/SideBar/ResourceTree/index.tsx b/src/page/Workspace/SideBar/ResourceTree/index.tsx
@@ -155,7 +155,7 @@ const ResourceTree: React.FC<IProps> = function ({
     <div className={styles.resourceTree}>
       <div className={styles.title}>
         <span className={styles.label}>{title}</span>
-        <span>
+        <span className={styles.titleAction}>
           <Action.Group size={0} ellipsisIcon="vertical">
             <Action.Link
               key={'reload'}