fix: selected element info overflow

codematrixer · codematrixer · commit 2908f339505a · 2024-10-09T13:54:09.000+08:00
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 [![pypi version](https://img.shields.io/pypi/v/uiviewer.svg)](https://pypi.python.org/pypi/uiviewer)
 ![python](https://img.shields.io/pypi/pyversions/uiviewer.svg)
 
-UI hierarchy visualization tool, supporting Android, iOS, HarmonyOS NEXT.
+UI hierarchy inspector, supporting Android, iOS, HarmonyOS NEXT.
 
 This project is developed using FastAPI and Vue. It starts the service locally and displays UI hierarchy tree through web browser.
 
diff --git a/uiviewer/static/css/style.css b/uiviewer/static/css/style.css
@@ -81,7 +81,23 @@ body, html {
 .center {
     width: 30%;
     background-color: #212933;
+}
+
+.right {
+    flex: 1;
+    background-color: #212933;
+}
 
+.divider {
+    width: 1.5px;
+    background-color: #333844;
+    cursor: ew-resize;
+    height: 100%;
+    transition: background-color 0.3s;
+}
+.divider-hover, .divider-dragging {
+    background-color: #3679E3;
+    width: 3px;
 }
 
 .region-title {
@@ -90,72 +106,55 @@ body, html {
     margin-bottom: 10px;
 }
 
-.right {
-    flex: 1;
-    background-color: #212933;
+.custom-table {
+    width: 100%;
+    border-bottom: none !important;
     overflow: auto;
 }
 
-.custom-table {
-    width: 100%;
-    height: 100%;
+.custom-tree {
+    overflow: auto;
 }
 
-.custom-table .el-table__body-wrapper {
-    border: none; /* 移除外边框 */
-  }
-  
-  .custom-table .el-table__row {
-    margin-bottom: 0; /* 移除行间距 */
-  }
-  
-  .custom-table .el-table__cell {
-    padding: 5px; /* 减小单元格内边距 */
-    border-right: 1px solid #333844; /* 添加竖向内边框 */
-    border-bottom: 1px solid #333844; /* 添加横向内边框 */
-  }
-  
-  .custom-table .el-table__cell:last-child {
-    border-right: none; /* 移除最后一列的右边框 */
-  }
-  
-  .custom-table .el-table__row:last-child .el-table__cell {
-    border-bottom: none; /* 移除最后一行的下边框 */
-  }
-  
-  .custom-table .el-table__header-wrapper,
-  .custom-table .el-table__body-wrapper {
-    width: 100% !important; /* 确保表格填满父元素 */
-  }
+.custom-table .el-table__row {
+    margin-bottom: 0;
+}
   
-  .custom-table .el-table__header,
-  .custom-table .el-table__body {
-    width: 100% !important; /* 确保表格填满父元素 */
-  }
+.custom-table .el-table__cell {
+    padding: 5px;
+    border-right: 1px solid #333844;
+    border-bottom: 1px solid #333844;
+}
+
+.custom-table .el-table__body-wrapper {
+    border-bottom: none !important;
+}
+
+.custom-table .el-table__row:last-child .el-table__cell {
+    border-bottom: none !important;
+}
+
+.custom-table .el-table__header-wrapper,
+.custom-table .el-table__body-wrapper {
+    width: 100% !important;
+}
+
+.custom-table .el-table__header,
+.custom-table .el-table__body {
+    width: 100% !important;
+}
   
-  .attr-button {
+.attr-button {
     font-size: 12px;
     padding: 2px 3px;
     margin-left: 5px;
-  }
-
-  code {
-  background-color: #2D3740;
-  padding: 3px 5px;
-  border-radius: 4px;
-  font-family: monospace;
 }
 
-.divider {
-    width: 1.5px;
-    background-color: #333844;
-    cursor: ew-resize;
-    height: 100%;
-    transition: background-color 0.3s;
-}
-.divider-hover, .divider-dragging {
-    background-color: #3679E3;
-    width: 3px;
+code {
+    background-color: #2D3740;
+    padding: 3px 5px;
+    border-radius: 4px;
+    font-family: monospace;
 }
 
 .custom-link {
diff --git a/uiviewer/static/index.html b/uiviewer/static/index.html
@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FastAPI + Vue</title>
     <link rel="stylesheet" href="https://unpkg.com/element-theme-dark@1.0.2/lib/index.css">
-    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
+    <link rel="stylesheet" type="text/css" href="/static/css/style.css?v=1.0">
+
 </head>
 <body>
     <div
