unify the height of HorizontalMultiButtonSelect components

DSPCalculator · Dec 12, 2023 · 7a7a24c · 7a7a24c
1 parent f9f3223
commit 7a7a24c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/css/App.css b/css/App.css
@@ -14,7 +14,14 @@
 }
 
 .raw-text-selection {
-    font-size: 1.15em !important;
+    font-size: 1.1em !important;
+}
+
+/* 32px is the height of the image icon */
+.raw-text-selection div::after {
+    content: '';
+    display: block;
+    height: 32px;
 }
 
 .pro-mode-speedup:hover,

diff --git a/src/batch_setting.jsx b/src/batch_setting.jsx
@@ -101,8 +101,8 @@ export function BatchSetting() {
         { value: 2, label: "增产", className: pro_mode_class[2] },
     ];
 
-    return <div className="mt-3 d-inline-flex flex-wrap column-gap-3 row-gap-2 align-items-stretch">
-        <small className="fw-bold align-self-center">批量预设</small>
+    return <div className="mt-3 d-inline-flex flex-wrap column-gap-3 row-gap-2 align-items-center">
+        <small className="fw-bold">批量预设</small>
         {factory_doms}
         <HorizontalMultiButtonSelect choice={pro_num} options={proliferate_options}
             onChange={change_pro_num} no_gap={true} className={"raw-text-selection"} />

diff --git a/src/result.jsx b/src/result.jsx
@@ -73,7 +73,7 @@ export function ProModeSelect({ recipe_id, choice, onChange }) {
         { value: value, label: label, className: pro_mode_class[value] }
     ));
 
-    return <HorizontalMultiButtonSelect choice={choice} options={options} onChange={onChange} />;
+    return <HorizontalMultiButtonSelect choice={choice} options={options} onChange={onChange} className={"raw-text-selection"} />;
 }
 
 export function FactorySelect({ recipe_id, choice, onChange, no_gap }) {