From 9ed0121fd0763bc026e43eef7664872aec37e24b Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Tue, 13 Sep 2022 16:31:30 +0800
Subject: [PATCH] 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 1fbc2e99..06d3cfc4 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 44392bc4..e05e9af5 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 e4072d0b..dec6cefa 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 {