Style checkboxes

guardian · Jul 14, 2022 · ea710e2 · ea710e2
1 parent ad0108c
commit ea710e2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/css/Controls.scss b/src/css/Controls.scss
@@ -10,10 +10,14 @@
   padding-bottom: calc($gutter-width / 2);
 }
 
+.Controls__input-group {
+  display: flex;
+}
+
 .Controls__label {
+  margin-left: calc($gutter-width / 2);
   font-weight: normal;
   cursor: pointer;
-  width: 100%;
 }
 
 .Controls__error-message {

diff --git a/src/ts/components/Controls.tsx b/src/ts/components/Controls.tsx
@@ -188,23 +188,29 @@ const Controls = <TPluginState extends IPluginState>({
         {enableDevMode && (
           <div>
             <hr />
-            <div>
+            <div className="Controls__input-group">
               <input
                 type="checkbox"
+                id="real-time-checks"
                 checked={requestMatchesOnDocModified}
                 onChange={() =>
                   setRequestOnDocModified(!requestMatchesOnDocModified)
                 }
               ></input>
-              <label>Enable real-time checking</label>
+              <label htmlFor="real-time-checks" className="Controls__label">
+                Enable real-time checking
+              </label>
             </div>
-            <div>
+            <div className="Controls__input-group">
               <input
                 type="checkbox"
+                id="debug"
                 checked={debug}
                 onChange={() => setDebugState(!debug)}
               ></input>
-              <label>Show pending and inflight checks</label>
+              <label htmlFor="debug" className="Controls__label">
+                Show pending and inflight checks
+              </label>
             </div>
           </div>
         )}