diff --git a/ostp-gui/src/index.html b/ostp-gui/src/index.html
index a86b760..6660b91 100644
--- a/ostp-gui/src/index.html
+++ b/ostp-gui/src/index.html
@@ -360,8 +360,6 @@
         </div>
       </div>
     </div>
-      </div>
-    </div>
 
     <!-- DNS Prober Modal -->
     <div id="dns-prober-modal" class="modal-overlay hidden">
diff --git a/ostp-gui/src/styles.css b/ostp-gui/src/styles.css
index 0b7ccf6..e14b4f0 100644
--- a/ostp-gui/src/styles.css
+++ b/ostp-gui/src/styles.css
@@ -634,6 +634,7 @@ html[data-theme="light"] .watermark {
 /* ── Settings screen layout ───────────────────────────────────────────────── */
 .settings-body {
   flex: 1;
+  min-height: 0; /* allow this flex child to shrink so its scrollable child can scroll */
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -696,12 +697,17 @@ html[data-theme="light"] .watermark {
 
 .card.scrollable {
   flex: 1;
+  min-height: 0; /* required so overflow-y:auto actually scrolls inside the flex column */
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: thin;
   scrollbar-color: rgba(255,255,255,0.08) transparent;
 }
 
+.card.scrollable > * {
+  flex-shrink: 0;
+}
+
 .card.scrollable::-webkit-scrollbar { width: 3px; }
 .card.scrollable::-webkit-scrollbar-track { background: transparent; }
 .card.scrollable::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }