style: refine layout and styling of LiveDemo component for improved usability

Author: peterbenoit

docs/src/components/LiveDemo.astro

@@ -24,7 +24,7 @@
         </select>
       </div>
       <div class="control-item">
-        <label for="demo-exclude">Exclude Repos (comma-separated)</label>
+        <label for="demo-exclude">Exclude Repos</label>
         <input type="text" id="demo-exclude" placeholder="repo-one, repo-two" />
       </div>
     </div>
@@ -139,16 +139,22 @@
 </script>
 
 <style>
+  /* Override Starlight's .sl-markdown-content spacing rules */
+  .demo-wrapper,
+  .demo-wrapper * {
+    margin-top: 0 !important;
+  }
+
   .demo-wrapper {
-    margin: 2rem 0;
+    margin: 2rem 0 !important;
   }
 
   .demo-controls {
     background: var(--sl-color-bg-sidebar);
     border: 1px solid var(--sl-color-gray-5);
     border-radius: 0.75rem;
     padding: 2rem;
-    margin-bottom: 1.5rem;
+    margin-bottom: 1.5rem !important;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
@@ -162,7 +168,7 @@
 
   .control-row {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
   }
 
@@ -218,14 +224,20 @@
   }
 
   .control-group .control-row {
-    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media (max-width: 768px) {
+    .control-group .control-row {
+      grid-template-columns: 1fr;
+    }
   }
 
   .control-group-label {
     font-size: 0.9rem;
     font-weight: 700;
     color: var(--sl-color-text);
-    margin-bottom: 0.25rem;
+    margin-bottom: 0.25rem !important;
   }
 
   .demo-btn {
@@ -254,11 +266,11 @@
     background: transparent;
     border: 1px solid var(--sl-color-text-accent);
     color: var(--sl-color-text-accent);
-    margin-top: 0.75rem;
+    margin-top: 0.75rem !important;
   }
 
   #demo-container {
-    margin: 2rem 0;
+    margin: 2rem 0 !important;
     padding: 1.5rem;
     background: var(--sl-color-bg);
     border: 1px solid var(--sl-color-gray-5);
@@ -267,14 +279,14 @@
   }
 
   .demo-output {
-    margin-top: 2rem;
+    margin-top: 2rem !important;
   }
 
   .demo-output-label {
     font-size: 1rem;
     font-weight: 600;
     color: var(--sl-color-text);
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.75rem !important;
   }
 
   #demo-code {