Update app.py

app.py

@@ -20,22 +20,29 @@ with open("mtdna_tool_explainer_updated.html", "r", encoding="utf-8") as f:
     flow_chart = f.read()
 
 # css = """
+# /* NPS container for a unified background */
 # #nps-container {
 #     background-color: #333;
 #     padding: 20px;
 #     border-radius: 8px;
 #     display: flex;
 #     flex-direction: column;
-#     width: 100%; /* Ensures the container takes up full width */
+#     width: 100%;
+# }
+
+# /* Question markdown styling */
+# #nps-container .gr-markdown h3 {
+#     margin-bottom: 20px; /* Adds space between the question and the numbers */
 # }
 
 # /* The container for the radio buttons */
 # #nps-radio-container .gr-radio-group {
 #     display: flex;
 #     flex-direction: row;
-#     justify-content: space-between; /* Spreads buttons evenly across the container */
+#     justify-content: space-between;
+#     gap: 5px; 
 #     flex-wrap: nowrap;
-#     width: 100%; /* Important: Makes the radio group fill its parent container */
+#     width: 100%;
 # }
 
 # /* Styling for each individual button */
@@ -69,29 +76,36 @@ with open("mtdna_tool_explainer_updated.html", "r", encoding="utf-8") as f:
 # #nps-labels-row {
 #     display: flex;
 #     justify-content: space-between;
-#     margin-top: 10px;
+#     margin-top: 15px; /* Adds more space below the numbers */
 #     color: #ccc;
-#     width: 100%; /* Important: Makes the label row fill its parent container */
+#     width: 100%;
 # }
 
 # #nps-labels-row p {
 #     margin: 0;
 #     font-size: 1.0em;
-#     white-space: nowrap; /* Prevents text from wrapping */
+#     white-space: nowrap;
+#     width: 50%; /* Ensures each label takes up half the row */
+# }
+# #nps-labels-row p:first-child {
+#     text-align: left;
+# }
+# #nps-labels-row p:last-child {
+#     text-align: right;
 # }
 
 # #nps-submit-button {
-#     margin-top: 20px;
+#     margin-top: 25px; /* Adds a larger space above the submit button */
 #     width: 100%;
 # }
 
 # #nps-submit-button:active {
 #     border-color: white !important;
 #     box-shadow: 0 0 5px white inset;
-# }
-# """
+# }"""
+
 css = """
-/* NPS container for a unified background */
+/* The main container for the entire NPS section */
 #nps-container {
     background-color: #333;
     padding: 20px;
@@ -101,19 +115,17 @@ css = """
     width: 100%;
 }
 
-/* Question markdown styling */
-#nps-container .gr-markdown h3 {
-    margin-bottom: 20px; /* Adds space between the question and the numbers */
+/* Ensure the question text is properly spaced */
+#nps-container h3 {
+    color: #fff;
+    margin-bottom: 20px; /* Space between question and buttons */
 }
 
-/* The container for the radio buttons */
-#nps-radio-container .gr-radio-group {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 5px; 
-    flex-wrap: nowrap;
-    width: 100%;
+/* This is the key change: Target the radio group directly and force its layout */
+#nps-container > .gr-row > div > div {
+    display: flex !important;
+    justify-content: space-between !important;
+    width: 100% !important;
 }
 
 /* Styling for each individual button */
@@ -135,45 +147,51 @@ css = """
 #nps-radio-container .gr-radio-label:hover {
     background-color: #777;
 }
+
 #nps-radio-container input[type="radio"]:checked + .gr-radio-label {
     background-color: #999;
     border: 2px solid white;
 }
+
 #nps-radio-container .gr-radio-input {
     display: none;
 }
 
-/* Adjusting the text labels for "Not likely" and "Extremely likely" */
+/* The row for the "Not likely" and "Extremely likely" labels */
 #nps-labels-row {
     display: flex;
     justify-content: space-between;
-    margin-top: 15px; /* Adds more space below the numbers */
-    color: #ccc;
-    width: 100%;
+    margin-top: 15px; /* Adds space below the number buttons */
+    width: 100%; /* Force labels row to take full width */
 }
 
-#nps-labels-row p {
+#nps-labels-row .gr-markdown p {
     margin: 0;
     font-size: 1.0em;
+    color: #ccc;
     white-space: nowrap;
-    width: 50%; /* Ensures each label takes up half the row */
+    width: 50%;
 }
-#nps-labels-row p:first-child {
+
+#nps-labels-row .gr-markdown:first-child p {
     text-align: left;
 }
-#nps-labels-row p:last-child {
+
+#nps-labels-row .gr-markdown:last-child p {
     text-align: right;
 }
 
+/* Submit button styling */
 #nps-submit-button {
-    margin-top: 25px; /* Adds a larger space above the submit button */
+    margin-top: 25px; /* Adds space above the submit button */
     width: 100%;
 }
 
 #nps-submit-button:active {
     border-color: white !important;
     box-shadow: 0 0 5px white inset;
-}"""
+}
+"""
 
 with gr.Blocks() as interface:
     # with gr.Tab("CURIOUS ABOUT THIS PRODUCT?"):