Update styles.module.cssto fix terminal input on mobile

Author: razorblade23

src/components/InteractivePython/styles.module.css

@@ -131,6 +131,7 @@
   gap: 8px;
   border-top: 1px solid rgba(0, 0, 0, 0.06);
   background-color: rgba(0, 0, 0, 0.02);
+  width: 100%;
 }
 
 [data-theme="dark"] .inputForm {
@@ -144,24 +145,32 @@
   color: var(--ifm-color-primary);
   font-weight: 600;
   flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .terminalInput {
   flex: 1;
-  min-width: 0; /* Prevents input from overflowing flex container on mobile */
-  background: transparent;
-  border: none;
+  min-width: 80px; /* Prevents flexbox from collapsing input to 0px width */
+  background: rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(0, 0, 0, 0.12);
   outline: none;
-  color: #f8fafc;
+  color: #0f172a;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-size: 0.9rem;
   caret-color: var(--ifm-color-primary);
-  padding: 4px 6px;
+  padding: 6px 8px;
   border-radius: 4px;
+  transition: border-color 0.15s ease;
 }
 
-[data-theme="light"] .terminalInput {
-  color: #0f172a;
+[data-theme="dark"] .terminalInput {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.12);
+  color: #f8fafc;
+}
+
+.terminalInput:focus {
+  border-color: var(--ifm-color-primary);
 }
 
 /* Accessible and clean action button */
@@ -173,7 +182,7 @@
   font-weight: 600;
   font-size: 0.8rem;
   letter-spacing: 0.02rem;
-  padding: 6px 14px;
+  padding: 6px 12px;
   cursor: pointer;
   border-radius: 4px;
   transition: background-color 0.15s ease;
@@ -200,8 +209,13 @@
   }
 
   .inputForm {
-    padding: 0.6rem 0.8rem;
-    flex-wrap: wrap; /* Allows wrap on tight screens to keep button visible */
+    padding: 0.5rem 0.75rem;
+    gap: 6px; /* Tightens gaps so prompt, input, and button fit cleanly on one line */
+  }
+
+  .submitInputBtn {
+    padding: 6px 10px;
+    font-size: 0.75rem;
   }
 }