Display: Adjust sidebar and container styles for consistent overflow handling and responsive layout improvements

Author: AngelFQC

assets/css/scss/layout/_main_container.scss

@@ -1,5 +1,12 @@
+#app {
+  @apply overflow-hidden
+    sm:overflow-auto;
+}
+
 .app-main {
-  @apply flex flex-col h-screen md:pb-8 md:px-8 transition-[margin-left] duration-150;
+  @apply flex flex-col h-screen transition-[margin-left] duration-150 pb-4 px-4
+    sm:min-h-screen
+    md:h-auto md:pb-8 md:px-8;
   padding-top: calc(4.5rem + 1rem + 1px);
 
   &:not(.app-main--no-sidebar) {
@@ -8,6 +15,12 @@
 }
 
 #app.app--sidebar-inactive {
+  @apply overflow-auto;
+
+  .app-main {
+    @apply h-auto;
+  }
+
   .app-main:not(.app-main--no-sidebar) {
     @apply sm:ml-[88px];
   }

assets/css/scss/layout/_topbar.scss

@@ -22,7 +22,7 @@
 
       .p-menubar-root-list {
         @apply pt-8;
-        height: calc(100vh - 3.5rem - 1px);
+        height: calc(100vh - 4.5rem - 1px);
 
         > .p-menubar-item {
           @apply w-full px-6 pb-2 text-gray-50;

assets/css/scss/organisms/_sidebar.scss

@@ -187,10 +187,6 @@
 }
 
 #app {
-  .app-main {
-     // @apply overflow-hidden;
-  }
-
   &.app--sidebar-inactive {
     .app-sidebar {
       @apply hidden
@@ -234,7 +230,7 @@
     }
 
     .app-main {
-      @apply overflow-auto;
+      // @apply overflow-auto;
     }
   }
 }