Fix sizing of number inputs in Chrome

mxcube · Oct 3, 2024 · 8251797 · 8251797
1 parent d61921a
commit 8251797
Show file tree

Hide file tree

Showing 4 changed files with 2 additions and 2 deletions.
diff --git a/ui/src/components/BeamlineAttribute/BeamlineAttribute.module.css b/ui/src/components/BeamlineAttribute/BeamlineAttribute.module.css
@@ -21,6 +21,7 @@
 }
 
 .input {
+  width: 9em;
   height: 36px;
   appearance: auto !important;
 }
diff --git a/ui/src/components/BeamlineAttribute/BeamlineAttributeForm.jsx b/ui/src/components/BeamlineAttribute/BeamlineAttributeForm.jsx
@@ -41,7 +41,6 @@ function BeamlineAttributeForm(props) {
         name="value"
         aria-label="Value"
         step={step}
-        size={10}
         defaultValue={value.toFixed(precision)}
         disabled={isBusy}
       />

diff --git a/ui/src/components/MotorInput/MotorInput.jsx b/ui/src/components/MotorInput/MotorInput.jsx
@@ -144,7 +144,6 @@ export default class MotorInput extends React.Component {
                 <input
                   className={styles.stepInput}
                   type="number"
-                  size={3}
                   defaultValue={step}
                   disabled={this.props.disabled}
                   onChange={(evt) =>

diff --git a/ui/src/components/MotorInput/MotorInput.module.css b/ui/src/components/MotorInput/MotorInput.module.css
@@ -1,4 +1,5 @@
 .stepInput {
+  width: 3em;
   background-color: #f5f5f5;
   border: 1px solid #ccc;
   font-size: 12px;