fix: improve extra small screen styles

pedrokohler · Feb 4, 2025 · fe08919 · fe08919
1 parent 82e5e19
commit fe08919
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 36 deletions.
diff --git a/frontend/src/Components/NumberInput.tsx b/frontend/src/Components/NumberInput.tsx
@@ -14,7 +14,7 @@ export function NumberInput({
 }) {
   return (
     <Form.Control
-      style={{ maxWidth: "48px", minWidth: "20px" }}
+      style={{ maxWidth: "42px", minWidth: "42px", textAlign: "center" }}
       type="number"
       id={id}
       placeholder={placeholder}

diff --git a/frontend/src/Components/Sections/RSVP/RSVPForm.tsx b/frontend/src/Components/Sections/RSVP/RSVPForm.tsx
@@ -32,47 +32,57 @@ const ChildrenInput = ({
     <div
       style={{
         display: "flex",
-        flexDirection: "row",
-        justifyContent: "start",
+        flexDirection: isAbove400w ? "row" : "column",
+        justifyContent: isAbove400w ? "space-between" : "start",
         alignItems: "center",
         color: "black",
       }}
     >
-      <span>Crianças acima de 12 anos:</span>
-      <IconButton
+      <span>Dependentes (12+ anos):</span>
+      <div
         style={{
-          padding: isAbove400w ? "0 16px" : "0 4px",
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "start",
+          alignItems: "center",
+          color: "black",
         }}
-        icon={DashCircle}
-        onClick={() => {
-          const newValue = value - 1;
-          if (isValidValue(newValue)) {
-            setValue(newValue);
-          }
-        }}
-      />
-      <NumberInput
-        id="children"
-        placeholder="0"
-        value={value}
-        onChange={(e) => {
-          if (isValidValue(Number(e.target.value))) {
-            onChange(e);
-          }
-        }}
-      />
-      <IconButton
-        style={{
-          padding: isAbove400w ? "0 16px" : "0 4px",
-        }}
-        icon={PlusCircle}
-        onClick={() => {
-          const newValue = value + 1;
-          if (isValidValue(newValue)) {
-            setValue(newValue);
-          }
-        }}
-      />
+      >
+        <IconButton
+          style={{
+            padding: "0 8px",
+          }}
+          icon={DashCircle}
+          onClick={() => {
+            const newValue = value - 1;
+            if (isValidValue(newValue)) {
+              setValue(newValue);
+            }
+          }}
+        />
+        <NumberInput
+          id="children"
+          placeholder="0"
+          value={value}
+          onChange={(e) => {
+            if (isValidValue(Number(e.target.value))) {
+              onChange(e);
+            }
+          }}
+        />
+        <IconButton
+          style={{
+            padding: "0 8px",
+          }}
+          icon={PlusCircle}
+          onClick={() => {
+            const newValue = value + 1;
+            if (isValidValue(newValue)) {
+              setValue(newValue);
+            }
+          }}
+        />
+      </div>
     </div>
   );
 };