diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts
index b3991e000..322cc68ad 100644
--- a/src/client/HostLobbyModal.ts
+++ b/src/client/HostLobbyModal.ts
@@ -289,7 +289,9 @@ export class HostLobbyModal extends BaseModal {
 
     return html`
       <div class="flex flex-col h-full">
-        <div class="flex-1 p-6 mx-auto w-full max-w-5xl">
+        <div
+          class="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-6 mr-1 mx-auto w-full max-w-5xl"
+        >
           <game-config-settings
             class="block"
             .sectionGapClass=${"space-y-10"}
diff --git a/src/client/SinglePlayerModal.ts b/src/client/SinglePlayerModal.ts
index 10df43b81..994996ddd 100644
--- a/src/client/SinglePlayerModal.ts
+++ b/src/client/SinglePlayerModal.ts
@@ -254,7 +254,10 @@ export class SinglePlayerModal extends BaseModal {
     ];
 
     return html`
-      <div class="px-6 pt-4 pb-6 mx-auto w-full max-w-5xl">
+      <div class="flex flex-col h-full">
+        <div
+          class="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-6 pt-4 pb-6 mr-1 mx-auto w-full max-w-5xl"
+        >
           <game-config-settings
             class="block"
             .sectionGapClass=${"space-y-6"}
@@ -338,18 +341,14 @@ export class SinglePlayerModal extends BaseModal {
         </div>
 
         <!-- Footer Action -->
-        <div class="p-6 border-t border-white/10 bg-black/20">
-          ${
-            hasLinkedAccount(this.userMeResponse) && this.hasOptionsChanged()
-              ? html`<div
-                  class="mb-4 px-4 py-3 rounded-xl bg-yellow-500/20 border border-yellow-500/30 text-yellow-400 text-xs font-bold uppercase tracking-wider text-center"
-                >
-                  ${translateText(
-                    "single_modal.options_changed_no_achievements",
-                  )}
-                </div>`
-              : null
-          }
+        <div class="p-6 border-t border-white/10 bg-black/20 shrink-0">
+          ${hasLinkedAccount(this.userMeResponse) && this.hasOptionsChanged()
+            ? html`<div
+                class="mb-4 px-4 py-3 rounded-xl bg-yellow-500/20 border border-yellow-500/30 text-yellow-400 text-xs font-bold uppercase tracking-wider text-center"
+              >
+                ${translateText("single_modal.options_changed_no_achievements")}
+              </div>`
+            : null}
           <o-button
             variant="primary"
             width="block"