fix(client): handle sidebar overflow items properly, fix #708

koishijs · Jun 10, 2022 · fb553c8 · fb553c8
1 parent f8577db
commit fb553c8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/plugins/frontend/client/client/components/layout/card-aside.vue b/plugins/frontend/client/client/components/layout/card-aside.vue
@@ -21,11 +21,11 @@
   box-shadow: var(--card-shadow);
   transition: background-color 0.3s ease;
 
-  --aside-width: 16rem; 
   > aside {
     overflow-x: hidden;
     overflow-y: auto;
-    width: var(--aside-width);
+    min-width: 16rem;
+    max-width: 18rem;
     flex-shrink: 0;
     border-right: 1px solid var(--border);
     transition: border-color 0.3s ease;

diff --git a/plugins/frontend/client/client/components/layout/tab-item.vue b/plugins/frontend/client/client/components/layout/tab-item.vue
@@ -23,7 +23,7 @@ defineProps<{
   line-height: 2.25rem;
   padding: 0 2rem 0 4rem;
   white-space: nowrap;
-  overflow: auto;
+  overflow: hidden;
   text-overflow: ellipsis;
 
   &.active {

diff --git a/plugins/frontend/manager/client/settings/tree.vue b/plugins/frontend/manager/client/settings/tree.vue
@@ -23,7 +23,9 @@
       @node-expand="handleExpand"
       @node-collapse="handleCollapse"
       #="{ node }">
-      {{ node.label || '待添加' }}
+      <div class="item">
+        <div class="label">{{ node.label || '待添加' }}</div>
+      </div>
     </el-tree>
   </el-scrollbar>
 </template>
@@ -122,7 +124,7 @@ onActivated(async () => {
 <style lang="scss">
 
 .plugin-select {
-  width: 16rem;
+  width: 100%;
   height: 100%;
   border-right: 1px solid var(--border);
   overflow: auto;
@@ -197,6 +199,19 @@ onActivated(async () => {
   .el-tree-node__content {
     line-height: 2.25rem;
     height: 2.25rem;
+
+    .item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      overflow: hidden;
+    }
+
+    .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   .el-tree-node__label {