Aligning spacing controls (#3691)

pixiebrix · Jun 13, 2022 · bd04892 · bd04892
1 parent 6434944
commit bd04892
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 13 deletions.
diff --git a/src/components/fields/schemaFields/widgets/CssClassWidget.module.scss b/src/components/fields/schemaFields/widgets/CssClassWidget.module.scss
@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2022 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+.spacingControlContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+}
diff --git a/src/components/fields/schemaFields/widgets/CssClassWidget.tsx b/src/components/fields/schemaFields/widgets/CssClassWidget.tsx
@@ -46,6 +46,7 @@ import { isTemplateExpression, isVarExpression } from "@/runtime/mapArgs";
 import { compact, partition, uniq } from "lodash";
 import TemplateToggleWidget from "@/components/fields/schemaFields/widgets/TemplateToggleWidget";
 import { InputModeOption } from "@/components/fields/schemaFields/widgets/templateToggleWidgetTypes";
+import styles from "./CssClassWidget.module.scss";
 
 /**
  * An independent class name
@@ -356,7 +357,7 @@ const SpacingControl: React.VFC<{
 
   return (
     <div className={className}>
-      <div className="d-flex align-items-center">
+      <div className={styles.spacingControlContainer}>
         <div
           role="button"
           tabIndex={0}
@@ -370,7 +371,7 @@ const SpacingControl: React.VFC<{
           {label}&nbsp;
           <FontAwesomeIcon icon={expand ? faCaretDown : faCaretRight} />
         </div>
-        <div>
+        <div className="ml-1">
           <Form.Control
             type="number"
             min="0"
@@ -386,16 +387,16 @@ const SpacingControl: React.VFC<{
         </div>
       </div>
       {expand && (
-        <div>
+        <div className="pl-2">
           {spacingSides.map((direction) => (
             <div
               key={direction.side}
-              className="ml-4 d-flex align-items-center"
+              className={styles.spacingControlContainer}
             >
               <div>
                 {label} {direction.label}
               </div>
-              <div>
+              <div className="ml-1">
                 <Form.Control
                   type="number"
                   min="0"

diff --git a/src/components/fields/schemaFields/widgets/__snapshots__/ClassClassWidget.test.tsx.snap b/src/components/fields/schemaFields/widgets/__snapshots__/ClassClassWidget.test.tsx.snap
@@ -269,7 +269,7 @@ Object {
             class="mr-2"
           >
             <div
-              class="d-flex align-items-center"
+              class="spacingControlContainer"
             >
               <div
                 role="button"
@@ -293,7 +293,9 @@ Object {
                   />
                 </svg>
               </div>
-              <div>
+              <div
+                class="ml-1"
+              >
                 <input
                   class="form-control"
                   max="5"
@@ -308,7 +310,7 @@ Object {
             class="mx-2"
           >
             <div
-              class="d-flex align-items-center"
+              class="spacingControlContainer"
             >
               <div
                 role="button"
@@ -332,7 +334,9 @@ Object {
                   />
                 </svg>
               </div>
-              <div>
+              <div
+                class="ml-1"
+              >
                 <input
                   class="form-control"
                   max="5"
@@ -660,7 +664,7 @@ Object {
           class="mr-2"
         >
           <div
-            class="d-flex align-items-center"
+            class="spacingControlContainer"
           >
             <div
               role="button"
@@ -684,7 +688,9 @@ Object {
                 />
               </svg>
             </div>
-            <div>
+            <div
+              class="ml-1"
+            >
               <input
                 class="form-control"
                 max="5"
@@ -699,7 +705,7 @@ Object {
           class="mx-2"
         >
           <div
-            class="d-flex align-items-center"
+            class="spacingControlContainer"
           >
             <div
               role="button"
@@ -723,7 +729,9 @@ Object {
                 />
               </svg>
             </div>
-            <div>
+            <div
+              class="ml-1"
+            >
               <input
                 class="form-control"
                 max="5"