fix(app-layout): body overflow (#77)

* fix(app-layout): overflow main container * fix(app-layout): stylelint * chore: remove placeholder div
Kong · Jan 31, 2023 · 35448bf · 35448bf
1 parent 6a8a828
commit 35448bf
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/core/app-layout/src/components/AppLayout.vue b/packages/core/app-layout/src/components/AppLayout.vue
@@ -242,12 +242,16 @@ onBeforeUnmount(() => {
 
 .kong-ui-app-layout {
   background-color: $sidebar-background-gradient-start;
+  bottom: 0;
   display: flex;
   flex-direction: column;
   font-family: $font-family-base;
   height: 100%;
+  left: 0;
   overflow: hidden;
-  position: relative;
+  position: fixed;
+  right: 0;
+  top: 0;
   width: 100%;
 
   :deep(.kong-ui-app-navbar) {
@@ -277,8 +281,9 @@ onBeforeUnmount(() => {
     flex-grow: 1;
     height: 100%;
     margin-top: v-bind('layoutMainMarginTop');
-    width: 100%;
     // border-top-left-radius: 16px; // TODO: Enable when Neon layout is enabled
+    overflow: auto;
+    width: 100%;
 
     @media (min-width: $viewport-md) {
       margin-left: $sidebar-width;

diff --git a/packages/core/app-layout/src/styles/_base.scss b/packages/core/app-layout/src/styles/_base.scss
@@ -19,10 +19,10 @@ html.kong-ui-app-layout-html {
 
 html.kong-ui-app-layout-html,
 body.kong-ui-app-layout-body {
+  height: 100%; // Reenable these rules to move the scrollbar under the AppNavbar
+  height: 100vh; // Reenable these rules to move the scrollbar under the AppNavbar
   margin: 0;
-  // height: 100%; // Reenable these rules to move the scrollbar under the AppNavbar
-  // height: 100vh; // Reenable these rules to move the scrollbar under the AppNavbar
-  // overflow: hidden; // Reenable these rules to move the scrollbar under the AppNavbar
+  overflow: hidden; // Reenable these rules to move the scrollbar under the AppNavbar
   overscroll-behavior-y: none; // Disable elastic overflow scrolling in Chrome and Safari
   padding: 0;
   width: 100%;