diff --git a/stylesheets/components/ChatColorPicker.scss b/stylesheets/components/ChatColorPicker.scss
index 0680f8c5ca58..589b5b342261 100644
--- a/stylesheets/components/ChatColorPicker.scss
+++ b/stylesheets/components/ChatColorPicker.scss
@@ -20,6 +20,10 @@
     }
   }
 
+  &__modal__body.module-Modal__body {
+    overflow-x: hidden;
+  }
+
   &__bubbles {
     align-items: center;
     display: grid;
diff --git a/ts/components/GradientDial.tsx b/ts/components/GradientDial.tsx
index 56b250e5fb2a..445504ee9cc1 100644
--- a/ts/components/GradientDial.tsx
+++ b/ts/components/GradientDial.tsx
@@ -244,17 +244,21 @@ export function GradientDial({
   };
 
   const handleKeyDown = (ev: KeyboardEvent) => {
-    let add = 1;
-
     if (ev.key === 'ArrowDown' || ev.key === arrow('start')) {
-      add = 1;
+      onChange(Math.min(360, Math.max(0, deg + 1)));
     }
 
     if (ev.key === 'ArrowUp' || ev.key === arrow('end')) {
-      add = -1;
+      onChange(Math.min(360, Math.max(0, deg - 1)));
     }
 
-    onChange(Math.min(360, Math.max(0, deg + add)));
+    if (ev.key === 'Enter' && ev.target instanceof HTMLElement) {
+      if (ev.target.ariaLabel === '0') {
+        onClick(KnobType.start);
+      } else if (ev.target.ariaLabel === '1') {
+        onClick(KnobType.end);
+      }
+    }
   };
 
   useEffect(() => {