Fix preset-grid orphan row for 5/6-item preset sets

PresetButtonGrid rendered every preset set into a fixed 4-column
.preset-grid, so 5-item sets (RADIUS_PRESETS, SPACING_PRESETS,
IMAGE_RADIUS_PRESETS, FONT_WEIGHTS, NavStylePanel's GAP_PRESETS)
wrapped a single lone button onto its own row, and the 6-item
TEXT_SIZES split unevenly (4+2).

PresetButtonGrid now derives a column count from presets.length via
defaultPresetGridColumns() -- 5-item sets get a single row of 5,
6-item sets split into two even rows of 3, and anything else keeps
the classic 4-column grid -- with an optional `columns` prop for
explicit overrides. This fixes every existing call site automatically
rather than threading an explicit count through each one.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

craft/src/panels/right/styles/shared.tsx

@@ -84,20 +84,42 @@ interface PresetButtonGridProps {
   presets: { label: string; value: string }[];
   activeValue: string | undefined;
   onSelect: (value: string) => void;
+  /** Explicit column count. When omitted, a column count is derived from
+   *  `presets.length` (see `defaultPresetGridColumns`) so odd-sized preset
+   *  sets (5, 6, ...) don't leave a lone orphan button dangling on its own
+   *  row under the fixed 4-column grid. */
+  columns?: number;
 }
-export const PresetButtonGrid: React.FC<PresetButtonGridProps> = ({ presets, activeValue, onSelect }) => (
-  <div className="preset-grid">
-    {presets.map((p) => (
-      <button
-        key={p.value}
-        className={`preset-btn ${String(activeValue) === p.value ? 'active' : ''}`}
-        onClick={() => onSelect(p.value)}
-      >
-        {p.label}
-      </button>
-    ))}
-  </div>
-);
+
+/** Picks a column count that avoids a single orphan on the last row.
+ *  4-or-fewer presets keep the classic single row of 4. 5 gets its own
+ *  row (5 cols). 6 splits into two even rows of 3. Anything else falls
+ *  back to a 4- or 3-column grid depending on which divides evenly. */
+export function defaultPresetGridColumns(count: number): number {
+  if (count <= 4) return 4;
+  if (count === 5) return 5;
+  if (count === 6) return 3;
+  if (count % 4 === 0) return 4;
+  if (count % 3 === 0) return 3;
+  return 4;
+}
+
+export const PresetButtonGrid: React.FC<PresetButtonGridProps> = ({ presets, activeValue, onSelect, columns }) => {
+  const cols = columns ?? defaultPresetGridColumns(presets.length);
+  return (
+    <div className="preset-grid" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
+      {presets.map((p) => (
+        <button
+          key={p.value}
+          className={`preset-btn ${String(activeValue) === p.value ? 'active' : ''}`}
+          onClick={() => onSelect(p.value)}
+        >
+          {p.label}
+        </button>
+      ))}
+    </div>
+  );
+};
 
 interface GradientSwatchGridProps {
   activeValue: string | undefined;