Color Chooser: Put color buttons in a flow box

src/preferences/ColorChooser.js

@@ -35,7 +35,7 @@ export class ColorChooser extends Gtk.Widget {
   }
 
   constructor({ ...params } = {}) {
-    super({ layoutManager: new Gtk.BoxLayout({ spacing: 6 }), ...params });
+    super({ layoutManager: new Gtk.BinLayout(), ...params });
 
     const colors = [
       { accentColor: AccentColor.BLUE, name: _("Blue") },
@@ -49,8 +49,16 @@ export class ColorChooser extends Gtk.Widget {
       { accentColor: AccentColor.SLATE, name: _("Slate") },
     ];
 
+    const flowBox = new Gtk.FlowBox({
+      maxChildrenPerLine: colors.length,
+      halign: Gtk.Align.END,
+      selectionMode: Gtk.SelectionMode.NONE,
+    });
+    flowBox.set_parent(this);
+
     let toggleGroup;
     for (const color of colors) {
+      const flowBoxChild = new Gtk.FlowBoxChild({ focusable: false });
       const button = new Gtk.ToggleButton({
         tooltipText: color.name,
         cssClasses: ["circular", color.accentColor],
@@ -67,7 +75,8 @@ export class ColorChooser extends Gtk.Widget {
 
       this.#buttons.push(button);
 
-      button.set_parent(this);
+      flowBoxChild.set_child(button);
+      flowBox.append(flowBoxChild);
     }
   }
 

src/prefs.js

@@ -35,7 +35,6 @@ export default class NightThemeSwitcherPreferences extends ExtensionPreferences
     iconTheme.add_resource_path("/org/gnome/Shell/Extensions/nightthemeswitcher/preferences/icons");
 
     // Set window properties
-    window.set_size_request(420, 320);
     window.set_default_size(500, 630);
 
     // Dynamically import all classes