From f1b73ec8286ba574a68f7355ffdae12379a93ea0 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Tue, 29 Sep 2026 12:08:01 +0200
Subject: [PATCH] Move the Colorpicker clear and close buttons to their own row

---
 core/js/src/colorpicker.ts             | 15 +++++++++++----
 core/js/tests/unit/colorpicker.spec.ts |  2 ++
 core/scss/ui/forms/_colorpicker.scss   | 11 +++++++++++
 docs/content/ui/forms/color-picker.mdx |  4 +++-
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/core/js/src/colorpicker.ts b/core/js/src/colorpicker.ts
index 1ddc664cb..5a5b9de04 100644
--- a/core/js/src/colorpicker.ts
+++ b/core/js/src/colorpicker.ts
@@ -105,6 +105,7 @@ const CLASS_NAME_ALPHA = `${NAME}-alpha`
 const CLASS_NAME_SWATCHES = `${NAME}-swatches`
 const CLASS_NAME_SWATCH = `${NAME}-swatch`
 const CLASS_NAME_FOOTER = `${NAME}-footer`
+const CLASS_NAME_ACTIONS = `${NAME}-actions`
 const CLASS_NAME_INPUT = `${NAME}-input`
 const CLASS_NAME_FORMAT = `${NAME}-format`
 const CLASS_NAME_CLEAR = `${NAME}-clear`
@@ -523,22 +524,28 @@ class Colorpicker extends BaseComponent {
       footer.append(this._formatSelect)
     }
 
+    // The buttons get a row of their own: next to the value field they would
+    // squeeze it out of the panel
+    const actions = create('div', CLASS_NAME_ACTIONS)
+
     if (clearButton) {
       const button = create('button', `btn btn-sm ${CLASS_NAME_CLEAR}`, { type: 'button' })
       button.textContent = labels.clear
       EventHandler.on(button, EVENT_CLICK, () => this._clear())
-      footer.append(button)
+      actions.append(button)
     }
 
     if (closeButton) {
       const button = create('button', `btn btn-sm btn-primary ${CLASS_NAME_CLOSE}`, { type: 'button' })
       button.textContent = labels.close
       EventHandler.on(button, EVENT_CLICK, () => this.hide())
-      footer.append(button)
+      actions.append(button)
     }
 
-    if (footer.childElementCount > 0) {
-      panel.append(footer)
+    for (const row of [footer, actions]) {
+      if (row.childElementCount > 0) {
+        panel.append(row)
+      }
     }
 
     EventHandler.on(panel, EVENT_KEYDOWN, (event: KeyboardEvent) => this._handlePanelKeydown(event))
diff --git a/core/js/tests/unit/colorpicker.spec.ts b/core/js/tests/unit/colorpicker.spec.ts
index 362504242..073babae1 100644
--- a/core/js/tests/unit/colorpicker.spec.ts
+++ b/core/js/tests/unit/colorpicker.spec.ts
@@ -376,6 +376,8 @@ describe('Colorpicker', () => {
       const instance = new Colorpicker(input)
 
       await instance.show()
+      expect(panels()[0]!.querySelectorAll('.colorpicker-actions > button')).toHaveLength(2)
+      expect(panels()[0]!.querySelector('.colorpicker-footer button')).toBeNull()
       panels()[0]!.querySelector<HTMLElement>('.colorpicker-clear')!.click()
       expect(input.value).toBe('')
 
diff --git a/core/scss/ui/forms/_colorpicker.scss b/core/scss/ui/forms/_colorpicker.scss
index 9fef666fd..0533e159d 100644
--- a/core/scss/ui/forms/_colorpicker.scss
+++ b/core/scss/ui/forms/_colorpicker.scss
@@ -256,3 +256,14 @@ Color picker
     width: auto;
   }
 }
+
+// Clear at the start, close at the end
+.colorpicker-actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+
+  > :only-child {
+    margin-inline-start: auto;
+  }
+}
diff --git a/docs/content/ui/forms/color-picker.mdx b/docs/content/ui/forms/color-picker.mdx
index e9385cf99..bcda9fb8d 100644
--- a/docs/content/ui/forms/color-picker.mdx
+++ b/docs/content/ui/forms/color-picker.mdx
@@ -29,7 +29,9 @@ classnames:
     - class: colorpicker-swatch
       desc: One preset color
     - class: colorpicker-footer
-      desc: Value input, format select and the buttons
+      desc: Value input and format select
+    - class: colorpicker-actions
+      desc: Row with the clear and close buttons
   modifier:
     - class: colorpicker-panel-inline
       desc: Panel rendered in place, without the popup surface