Browse Source

fix(css): fix sticky footer with layout-fixed and prevent sidebar scroll chaining (#5805, #5864)

- Fixed footer: add min-height: 0 on app-main when layout-fixed is used
  so the grid row correctly constrains the main area while keeping the
  footer pinned at bottom.
- Sidebar: add overscroll-behavior: contain to sidebar-wrapper to prevent
  scroll events from propagating to the body on mobile, which could
  trigger viewport resizes and unintended sidebar collapse.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Aigars Silkalns 18 hours ago
parent
commit
b4edb2707e

+ 4 - 0
dist/css/adminlte.css

@@ -12953,6 +12953,7 @@ textarea.form-control-lg {
   padding-right: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 0.5rem;
+  overscroll-behavior: contain;
   scrollbar-color: var(--bs-secondary-bg) transparent;
 }
 .sidebar-wrapper::-webkit-scrollbar-thumb {
@@ -13862,6 +13863,9 @@ body:not(.app-loaded) .app-footer {
   bottom: 0;
   z-index: 1030;
 }
+.fixed-footer.layout-fixed .app-main {
+  min-height: 0;
+}
 
 .dropdown-menu {
   overflow: hidden;

File diff suppressed because it is too large
+ 0 - 0
dist/css/adminlte.css.map


File diff suppressed because it is too large
+ 0 - 0
dist/css/adminlte.min.css


File diff suppressed because it is too large
+ 0 - 0
dist/css/adminlte.min.css.map


+ 4 - 0
dist/css/adminlte.rtl.css

@@ -12927,6 +12927,7 @@ textarea.form-control-lg {
   padding-left: 0.5rem;
   padding-bottom: 0.5rem;
   padding-right: 0.5rem;
+  overscroll-behavior: contain;
   scrollbar-color: var(--bs-secondary-bg) transparent;
 }
 .sidebar-wrapper::-webkit-scrollbar-thumb {
@@ -13836,6 +13837,9 @@ body:not(.app-loaded) .app-footer {
   bottom: 0;
   z-index: 1030;
 }
+.fixed-footer.layout-fixed .app-main {
+  min-height: 0;
+}
 
 .dropdown-menu {
   overflow: hidden;

File diff suppressed because it is too large
+ 0 - 0
dist/css/adminlte.rtl.css.map


File diff suppressed because it is too large
+ 0 - 0
dist/css/adminlte.rtl.min.css


File diff suppressed because it is too large
+ 0 - 0
dist/css/adminlte.rtl.min.css.map


+ 9 - 0
src/scss/_app-footer.scss

@@ -20,4 +20,13 @@
     bottom: 0;
     z-index: $lte-zindex-fixed-footer;
   }
+
+  // When layout-fixed is used, app-main has overflow: auto which prevents
+  // position: sticky from working on the footer. Ensure the grid keeps the
+  // footer pinned at the bottom while app-main scrolls independently.
+  &.layout-fixed {
+    .app-main {
+      min-height: 0;
+    }
+  }
 }

+ 1 - 0
src/scss/_app-sidebar.scss

@@ -78,6 +78,7 @@
   padding-right: $lte-sidebar-padding-x;
   padding-bottom: $lte-sidebar-padding-y;
   padding-left: $lte-sidebar-padding-x;
+  overscroll-behavior: contain;
   @include scrollbar-color-gray();
   @include scrollbar-width-thin();
 

Some files were not shown because too many files changed in this diff