fix scrollbars in main section

Author: nemozak1

components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElConainer: typeof import('element-plus/es')['ElConainer']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']

src/App.vue

@@ -39,10 +39,17 @@ const isChatbotEnabled = import.meta.env.VITE_CHATBOT_ENABLED === 'true'
         <!--Header-->
         <HeaderNav />
       </el-header>
-      <RouterView />
+      <el-main>
+
+        <RouterView />
+      </el-main>
       <ChatWidget v-if="isChatbotEnabled"/>
     </el-container>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+  .common-layout {
+    overflow: hidden;
+  }
+</style>

src/views/BodyView.vue

@@ -49,14 +49,14 @@ import { inject } from 'vue'
         </el-header>
         <el-container class="middle">
           <el-aside class="summary" width="50%">
-            <!--Middle -->
             <RouterView name="body" />
           </el-aside>
-          <el-aside class="preview" width="50%">
+          <el-main class="preview">
             <!--right -->
             <RouterView class="preview" name="preview" />
-          </el-aside>
+          </el-main>
         </el-container>
+
         <!--<el-footer> -->
         <!--Bottom -->
         <!--Footer
@@ -68,19 +68,24 @@ import { inject } from 'vue'
 
 <style>
 .root {
-  min-height: 100vh;
-  overflow: unset;
-}
-.middle {
-  max-height: 95vh;
+  height: 100%;
+  /* min-height: 100vh; */
 }
 .summary {
-  max-height: 95vh;
+  max-height: 100%;
+}
+.main {
+  height: 100%;
+  overflow: hidden;
+}
+.middle {
+  height: 100%;
+  overflow: hidden;
 }
 .preview {
   color: white;
   background-color: #151d30;
-  max-height: 100vh;
+  max-height: 100%;
 }
 .collections {
   margin-left: -20px;