From ce84d1f27f28630608641154c9d360278c4d0551 Mon Sep 17 00:00:00 2001
From: Justin John <34035011+justinjohn0306@users.noreply.github.com>
Date: Wed, 14 Oct 2026 09:01:46 +0530
Subject: [PATCH] fix(ui): keep wrapped colour picker swatches inside the
 picker (#180) (#237)

add_space(16) only indented the first row of a horizontal_wrapped, so with
many colours on a page the later rows started at the picker's edge and ran
past its right side. The swatch rows now sit in a frame inset 16 points on
both sides.

Co-authored-by: Justin John <babyjjbabyjj549@gmail.com>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
---
 crates/ui-egui/src/colorpicker.rs | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/crates/ui-egui/src/colorpicker.rs b/crates/ui-egui/src/colorpicker.rs
index e0b4bcf..9a11236 100644
--- a/crates/ui-egui/src/colorpicker.rs
+++ b/crates/ui-egui/src/colorpicker.rs
@@ -782,8 +782,8 @@ pub fn show(app: &mut FigApp, ctx: &egui::Context) {
                     ui.add_space(16.0);
                     widgets::label(ui, tr("On this page"), t.text_secondary);
                 });
-                ui.horizontal_wrapped(|ui| {
-                    ui.add_space(16.0);
+                // Inset on both sides: `add_space` would only indent the first row of a wrap.
+                inset(ui, |ui| {
                     for c in &doc_colors {
                         if widgets::swatch(ui, &Paint::solid(*c), 14.0).on_hover_text(c.to_hex()).clicked() {
                             set_color(app, &target, &mut paint, *c, sel_stop_id, ui);
@@ -798,8 +798,7 @@ pub fn show(app: &mut FigApp, ctx: &egui::Context) {
                     ui.add_space(16.0);
                     widgets::label(ui, tr("Recent"), t.text_secondary);
                 });
-                ui.horizontal_wrapped(|ui| {
-                    ui.add_space(16.0);
+                inset(ui, |ui| {
                     for c in recent.iter().take(14) {
                         if widgets::swatch(ui, &Paint::solid(*c), 14.0).clicked() {
                             set_color(app, &target, &mut paint, *c, sel_stop_id, ui);
@@ -816,6 +815,11 @@ pub fn show(app: &mut FigApp, ctx: &egui::Context) {
     let _ = Pos2::ZERO;
 }
 
+/// Swatches wrapped in rows inset 16 points from both sides of the picker.
+fn inset(ui: &mut Ui, add: impl FnOnce(&mut Ui)) {
+    egui::Frame::NONE.inner_margin(egui::Margin::symmetric(16, 0)).show(ui, |ui| ui.horizontal_wrapped(add));
+}
+
 /// The colour picker's note under the fields for a colour outside sRGB.
 fn gamut_warning(ui: &mut Ui, t: &Tokens) {
     use crate::a11y::Tip;