fix: update styles for an adaptive height (#157)

src/App.vue

@@ -19,7 +19,7 @@ limitations under the License. -->
 #app {
   color: #2c3e50;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
   min-width: 1024px;
 }
 </style>

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;
 }
 

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 {