Aesthetic patch.

Changelog excerpt:
- Some sticky elements now have their own scroll context.

Author: Maikuolan

Changelog.md

@@ -216,3 +216,4 @@ __*Why "v3.0.0" instead of "v1.0.0?"*__ Prior to phpMussel v3, the "phpMussel Co
 - [2025.08.31]: Slightly reworked the logs page and the configuration page.
 - [2025.09.03]: Slightly improved the code for traversal detection.
 - [2025.10.03]: Optimised some iterators.
+- [2025.10.22]: Some sticky elements now have their own scroll context.

assets/bluemetal/frontend.css

@@ -171,7 +171,7 @@ input[type=hidden],script{display:none}
 .duo{display:grid;gap:2px;grid-template-columns:1fr 1fr;justify-content:stretch;justify-items:stretch}
 .col+.col,.col+.quad,.col+.duo,.quad+.col,.quad+.quad,.quad+.duo,.duo+.col,.duo+.quad,.duo+.duo{margin-top:2px}
 .reverse{text-align:{FE_Align_Reverse}}
-.stickybox{position:sticky;top:2px}
+.stickybox{position:sticky;top:2px;max-height:calc(100vh - 13px);overflow:visible auto}
 .gridboxitem,.gridboxcheckcell,.gridboxstretch,.va{align-content:center}
 @media only all and (max-width:968px) {
   .quad:not(.accquad){grid-template-columns:1fr 1fr}

assets/default/_config.html

@@ -1,9 +1,9 @@
 <div class="mainbox">
   <nav class="big">
-{nav}  <div class="ng1 idx stickybox" translate="no">
-    <div class="subNav">{link.Configuration}</div>
-    {Indexes}
-  </div>
+{nav}    <div class="ng1 idx stickybox" translate="no">
+      <div class="subNav">{link.Configuration}</div>
+      {Indexes}
+    </div>
   </nav>
   <main class="extend">
     <form action="?phpmussel-page=config" method="POST">

assets/default/frontend.css

@@ -174,7 +174,7 @@ input[type=hidden],script{display:none}
 .duo{display:grid;gap:2px;grid-template-columns:1fr 1fr;justify-content:stretch;justify-items:stretch}
 .col+.col,.col+.quad,.col+.duo,.quad+.col,.quad+.quad,.quad+.duo,.duo+.col,.duo+.quad,.duo+.duo{margin-top:2px}
 .reverse{text-align:{FE_Align_Reverse}}
-.stickybox{position:sticky;top:2px}
+.stickybox{position:sticky;top:2px;max-height:calc(100vh - 13px);overflow:visible auto}
 .gridboxitem,.gridboxcheckcell,.gridboxstretch,.va{align-content:center}
 @media only all and (max-width:968px) {
   .quad:not(.accquad){grid-template-columns:1fr 1fr}

assets/moss/frontend.css

@@ -173,7 +173,7 @@ input[type=hidden],script{display:none}
 .duo{display:grid;gap:2px;grid-template-columns:1fr 1fr;justify-content:stretch;justify-items:stretch}
 .col+.col,.col+.quad,.col+.duo,.quad+.col,.quad+.quad,.quad+.duo,.duo+.col,.duo+.quad,.duo+.duo{margin-top:2px}
 .reverse{text-align:{FE_Align_Reverse}}
-.stickybox{position:sticky;top:2px}
+.stickybox{position:sticky;top:2px;max-height:calc(100vh - 13px);overflow:visible auto}
 .gridboxitem,.gridboxcheckcell,.gridboxstretch,.va{align-content:center}
 @media only all and (max-width:968px) {
   .quad:not(.accquad){grid-template-columns:1fr 1fr}

assets/primer/frontend.css

@@ -175,7 +175,7 @@ input[type=hidden],script{display:none}
 .duo{display:grid;gap:2px;grid-template-columns:1fr 1fr;justify-content:stretch;justify-items:stretch}
 .col+.col,.col+.quad,.col+.duo,.quad+.col,.quad+.quad,.quad+.duo,.duo+.col,.duo+.quad,.duo+.duo{margin-top:2px}
 .reverse{text-align:{FE_Align_Reverse}}
-.stickybox{position:sticky;top:2px}
+.stickybox{position:sticky;top:2px;max-height:calc(100vh - 13px);overflow:visible auto}
 .gridboxitem,.gridboxcheckcell,.gridboxstretch,.va{align-content:center}
 @media only all and (max-width:968px) {
   .quad:not(.accquad){grid-template-columns:1fr 1fr}

assets/primerdark/frontend.css

@@ -178,7 +178,7 @@ input[type=hidden],script{display:none}
 .duo{display:grid;gap:2px;grid-template-columns:1fr 1fr;justify-content:stretch;justify-items:stretch}
 .col+.col,.col+.quad,.col+.duo,.quad+.col,.quad+.quad,.quad+.duo,.duo+.col,.duo+.quad,.duo+.duo{margin-top:2px}
 .reverse{text-align:{FE_Align_Reverse}}
-.stickybox{position:sticky;top:2px}
+.stickybox{position:sticky;top:2px;max-height:calc(100vh - 13px);overflow:visible auto}
 .gridboxitem,.gridboxcheckcell,.gridboxstretch,.va{align-content:center}
 @media only all and (max-width:968px) {
   .quad:not(.accquad){grid-template-columns:1fr 1fr}

assets/rbi/frontend.css

@@ -174,7 +174,7 @@ input[type=hidden],script{display:none}
 .duo{display:grid;gap:2px;grid-template-columns:1fr 1fr;justify-content:stretch;justify-items:stretch}
 .col+.col,.col+.quad,.col+.duo,.quad+.col,.quad+.quad,.quad+.duo,.duo+.col,.duo+.quad,.duo+.duo{margin-top:2px}
 .reverse{text-align:{FE_Align_Reverse}}
-.stickybox{position:sticky;top:2px}
+.stickybox{position:sticky;top:2px;max-height:calc(100vh - 13px);overflow:visible auto}
 .gridboxitem,.gridboxcheckcell,.gridboxstretch,.va{align-content:center}
 @media only all and (max-width:968px) {
   .quad:not(.accquad){grid-template-columns:1fr 1fr}

assets/slate/frontend.css

@@ -177,7 +177,7 @@ input[type=hidden],script{display:none}
 .duo{display:grid;gap:2px;grid-template-columns:1fr 1fr;justify-content:stretch;justify-items:stretch}
 .col+.col,.col+.quad,.col+.duo,.quad+.col,.quad+.quad,.quad+.duo,.duo+.col,.duo+.quad,.duo+.duo{margin-top:2px}
 .reverse{text-align:{FE_Align_Reverse}}
-.stickybox{position:sticky;top:2px}
+.stickybox{position:sticky;top:2px;max-height:calc(100vh - 13px);overflow:visible auto}
 .gridboxitem,.gridboxcheckcell,.gridboxstretch,.va{align-content:center}
 @media only all and (max-width:968px) {
   .quad:not(.accquad){grid-template-columns:1fr 1fr}