[skywalking-booster-ui] branch main updated: fix: update styles for an adaptive height (#157)

[qiuxiafan]

This is an automated email from the ASF dual-hosted git repository.

qiuxiafan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git


The following commit(s) were added to refs/heads/main by this push:
     new 9ed0121  fix: update styles for an adaptive height (#157)
9ed0121 is described below

commit 9ed0121fd0763bc026e43eef7664872aec37e24b
Author: Fine0830 <fanxue0...@gmail.com>
AuthorDate: Tue Sep 13 16:31:30 2022 +0800

    fix: update styles for an adaptive height (#157)
---
 src/App.vue                       | 2 +-
 src/layout/components/SideBar.vue | 5 +++--
 src/views/dashboard/List.vue      | 9 +++++----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1fbc2e9..06d3cfc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,7 +19,7 @@ limitations under the License. -->
 #app {
   color: #2c3e50;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
   min-width: 1024px;
 }
 </style>
diff --git a/src/layout/components/SideBar.vue 
b/src/layout/components/SideBar.vue
index 44392bc..e05e9af 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -141,13 +141,14 @@ const filterMenus = (menus: any[]) => {
 .side-bar {
   background: #252a2f;
   height: 100%;
-  min-height: 700px;
   position: relative;
   margin-bottom: 100px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .el-menu-vertical:not(.el-menu--collapse) {
-  width: 200px;
+  width: 220px;
   font-size: 16px;
 }
 
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index e4072d0..dec6cef 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -46,7 +46,7 @@ limitations under the License. -->
         ref="multipleTableRef"
         :default-sort="{ prop: 'name', order: 'ascending' }"
         @selection-change="handleSelectionChange"
-        height="637px"
+        height="calc(100% - 60px)"
         size="small"
       >
         <el-table-column type="selection" width="55" />
@@ -156,7 +156,7 @@ import { isEmptyObject } from "@/utils/is";
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
 const dashboardStore = useDashboardStore();
-const pageSize = 18;
+const pageSize = 20;
 const dashboards = ref<DashboardItem[]>([]);
 const searchText = ref<string>("");
 const loading = ref<boolean>(false);
@@ -500,12 +500,13 @@ function changePage(pageIndex: number) {
 }
 
 .table {
-  padding: 20px;
+  padding: 20px 10px;
   background-color: #fff;
   box-shadow: 0px 1px 4px 0px #00000029;
   border-radius: 5px;
   width: 100%;
-  overflow: hidden;
+  height: 100%;
+  overflow: auto;
 }
 
 .toggle-selection {