From 58dfb9cdd3763e0124498895ef8482e21474b19f Mon Sep 17 00:00:00 2001
From: llama <gh@siid.sh>
Date: Sun, 29 Jun 2025 15:42:52 +0800
Subject: [PATCH] fix deck options page being scrollable while simulator modal
 is open (#4133)

---
 ts/routes/deck-options/FsrsOptions.svelte    |  7 ++++---
 ts/routes/deck-options/SimulatorModal.svelte | 18 +++++++++++++++---
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/ts/routes/deck-options/FsrsOptions.svelte b/ts/routes/deck-options/FsrsOptions.svelte
index 2f7858209..fadaeba67 100644
--- a/ts/routes/deck-options/FsrsOptions.svelte
+++ b/ts/routes/deck-options/FsrsOptions.svelte
@@ -35,6 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         GetRetentionWorkloadRequest,
         UpdateDeckConfigsMode,
     } from "@generated/anki/deck_config_pb";
+    import type Modal from "bootstrap/js/dist/modal";
 
     export let state: DeckOptionsState;
     export let openHelpModal: (String) => void;
@@ -308,7 +309,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         state.save(UpdateDeckConfigsMode.COMPUTE_ALL_PARAMS);
     }
 
-    let showSimulator = false;
+    let simulatorModal: Modal;
 </script>
 
 <SpinBoxFloatRow
@@ -406,13 +407,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <hr />
 
 <div class="m-1">
-    <button class="btn btn-primary" on:click={() => (showSimulator = true)}>
+    <button class="btn btn-primary" on:click={() => simulatorModal?.show()}>
         {tr.deckConfigFsrsSimulatorExperimental()}
     </button>
 </div>
 
 <SimulatorModal
-    bind:shown={showSimulator}
+    bind:modal={simulatorModal}
     {state}
     {simulateFsrsRequest}
     {computing}
diff --git a/ts/routes/deck-options/SimulatorModal.svelte b/ts/routes/deck-options/SimulatorModal.svelte
index 0fb9c2ab7..ef61054fd 100644
--- a/ts/routes/deck-options/SimulatorModal.svelte
+++ b/ts/routes/deck-options/SimulatorModal.svelte
@@ -42,8 +42,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Warning from "./Warning.svelte";
     import type { ComputeRetentionProgress } from "@generated/anki/collection_pb";
     import Item from "$lib/components/Item.svelte";
+    import Modal from "bootstrap/js/dist/modal";
 
-    export let shown = false;
     export let state: DeckOptionsState;
     export let simulateFsrsRequest: SimulateFsrsReviewRequest;
     export let computing: boolean;
@@ -282,9 +282,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     $: easyDayPercentages = [...$config.easyDaysPercentages];
+
+    export let modal: Modal | null = null;
+
+    function setupModal(node: Element) {
+        modal = new Modal(node);
+        return {
+            destroy() {
+                modal?.dispose();
+                modal = null;
+            },
+        };
+    }
 </script>
 
-<div class="modal" class:show={shown} class:d-block={shown} tabindex="-1">
+<div class="modal" tabindex="-1" use:setupModal>
     <div class="modal-dialog modal-xl">
         <div class="modal-content">
             <div class="modal-header">
@@ -293,7 +305,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     type="button"
                     class="btn-close"
                     aria-label="Close"
-                    on:click={() => (shown = false)}
+                    on:click={() => modal?.hide()}
                 ></button>
             </div>
             <div class="modal-body">