From f8cb66fd923b8af58aba5719c0da98d6bc365a65 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 1 Dec 2025 12:56:51 +0000
Subject: [PATCH 1/2] Initial plan


From a4d273b9b4400f5e32da4d4f0bbc74c76bb2a142 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 1 Dec 2025 13:05:21 +0000
Subject: [PATCH 2/2] Fix Tor browser rendering issues for multiple choice and
 stepper components

Co-authored-by: sidprasad <6439400+sidprasad@users.noreply.github.com>
---
 src/static/css/common.css   | 21 +++++++++++++++++++++
 src/templates/exercise.html |  6 +++---
 src/templates/stepper.html  | 15 +++++++++++----
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/static/css/common.css b/src/static/css/common.css
index 48ccb68..cd2c266 100644
--- a/src/static/css/common.css
+++ b/src/static/css/common.css
@@ -2,6 +2,27 @@
     background-color: rgba(0, 0, 0, 0.05); /* Change this color as needed */
 }
 
+/* Ensure list group items display correctly and don't overlap
+   Using high specificity to override Bootstrap's flexbox styles */
+ul.list-group > li.list-group-item {
+    display: block;
+    position: relative;
+    clear: both;
+}
+
+/* Ensure labels take full width in list items */
+ul.list-group > li.list-group-item .form-check-label {
+    display: block;
+    width: 100%;
+}
+
+/* Ensure form-check elements don't use problematic flexbox */
+ul.list-group > li.list-group-item .form-check {
+    display: block;
+    position: relative;
+    padding-left: 1.25rem;
+}
+
 .footer {
     background-color: white;
 }
diff --git a/src/templates/exercise.html b/src/templates/exercise.html
index 721472b..470d7b1 100644
--- a/src/templates/exercise.html
+++ b/src/templates/exercise.html
@@ -120,9 +120,9 @@ <h5 id="{{ qindex }}question_text" class="card-title mb-2">
 
                     <ul class="list-group">
                         {% for option in q.options %}
-                        <li class="list-group-item mb-2 d-flex">
-                            <label class="form-check-label" for="{{ qindex }}option{{ loop.index }}">
-                                <div class="form-check flex-grow-1">
+                        <li class="list-group-item mb-2">
+                            <label class="form-check-label w-100 d-block" for="{{ qindex }}option{{ loop.index }}">
+                                <div class="form-check">
                                     <input class="form-check-input" type="radio" name="{{ qindex }}option"
                                         id="{{ qindex }}option{{ loop.index }}" class="option"
                                         value="{{ option.option }}" data-misconceptions="{{ option.misconceptions }}"
diff --git a/src/templates/stepper.html b/src/templates/stepper.html
index 8e00e92..e2eca1e 100644
--- a/src/templates/stepper.html
+++ b/src/templates/stepper.html
@@ -31,14 +31,20 @@
 
     <style>
         #statecontainer {
-            display: flex;
-            justify-content: center;
-            flex-wrap: wrap;
+            display: block;
+            text-align: center;
+        }
+
+        .stepper-container {
+            width: 100%;
+            max-width: 100%;
+            box-sizing: border-box;
         }
 
         .formula-tree-container,
         .trace-container {
-            justify-content: center;
+            display: block;
+            text-align: center;
         }
 
         /* Center align .mermaid divs */
@@ -47,6 +53,7 @@
             /* Centers the div within its flex container */
             display: block;
             /* Ensures the div is treated as a block-level element */
+            overflow-x: auto;
         }
 
         .cycle-state-col {