Limit color input width

Rian8337 · Sep 7, 2023 · dda0ebd · dda0ebd
1 parent f327776
commit dda0ebd
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/components/editors/ColorEditor.css b/src/components/editors/ColorEditor.css
@@ -4,3 +4,7 @@
     text-align: center;
     font: 0.85em Exo-Bold;
 }
+
+.color-editor-picker-display {
+    width: 10%;
+}
diff --git a/src/components/editors/ColorEditor.tsx b/src/components/editors/ColorEditor.tsx
@@ -49,7 +49,11 @@ export default function ColorEditor(props: Props) {
                 ) : null}
 
                 <input
-                    className="json-item-editor-input"
+                    className={`json-item-editor-input${
+                        !acceptMultipleColors
+                            ? " color-editor-picker-display"
+                            : ""
+                    }`}
                     type="text"
                     value={resettable.value}
                     maxLength={acceptMultipleColors ? undefined : 7}
@@ -80,7 +84,7 @@ export default function ColorEditor(props: Props) {
                 />
 
                 <input
-                    className="json-item-editor-input"
+                    className="json-item-editor-input color-editor-picker-display"
                     type="text"
                     disabled
                     value={hexCode}