diff --git a/index.css b/index.css
index 6b09d2e3..72c73f88 100644
--- a/index.css
+++ b/index.css
@@ -415,7 +415,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 	border: 0;
 	text-align: right;
 	background-color: transparent;
-	width: 30px;
+	width: 3.3em;
 	-moz-appearance: textfield;
 }
 
diff --git a/modules/ui/options.js b/modules/ui/options.js
index fc3f2b41..99aa7116 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -678,7 +678,7 @@ optionsContent.addEventListener("input", function(event) {
   else if (id === "neutralOutput") neutralInput.value = value;
   else if (id === "manorsInput") changeBurgsNumberSlider(value);
   else if (id === "religionsInput") religionsOutput.value = value;
-  else if (id === "uiSizeInput" || id === "uiSizeOutput") changeUIsize(value);
+  else if (id === "uiSizeInput") uiSizeOutput.value = value;
   else if (id === "tooltipSizeInput" || id === "tooltipSizeOutput") changeTooltipSize(value);
   else if (id === "transparencyInput") changeDialogsTransparency(value);
   else if (id === "pngResolutionInput") pngResolutionOutput.value = value;
@@ -690,6 +690,7 @@ optionsContent.addEventListener("change", function(event) {
   const id = event.target.id, value = event.target.value;
   if (id === "zoomExtentMin" || id === "zoomExtentMax") changeZoomExtent(value);
   else if (id === "optionsSeed") generateMapWithSeed();
+  else if (id === "uiSizeInput" || id === "uiSizeOutput") changeUIsize(value);
 });
 
 optionsContent.addEventListener("click", function(event) {