[Bug]: Font colour toolbar component has fragile dropdown sizing

[fonty422]

Bug type

Behavior bug (incorrect output/state without crash)

Browser surface

No

Summary

Downloaded PlateJS font colour toolbar dropdown renders clipped/narrow in a standard toolbar. The colour picker uses grid-cols-[repeat(10,1fr)] without an explicit dropdown/grid width, so the palette can be horizontally clipped. Adding a fixed grid width or fixed gridTemplateColumns resolves it.

Public reproduction URL

No response

Steps to reproduce

Not sure how to replicate this as your examples don't show what I see.
I've installed the default plate editor and the fixed-toolbar-kit and the colour toolbar for font colour and background colour is narrower.
It might be linked to the use of variant="fullWidth" on the Editor component, but I'm not sure.

Expected behavior

_Expect the width and height to fit the content

Actual behavior

Width appears to clip and half the options aren't visible

Acceptance criteria

Expect the width and height to fit the content out-of-the-box with no overflow or hidden options.

Plate / Slate / React versions

plate: 53.0.0
All plate related plugins are also 53.0.0

Operating system

alpine-20 docker container

Install method

npx shadcn@latest add @plate/editor

Framework / app setup

Vite

Affected packages or entry points

@platejs/font-colour-toolbar-button

Minimal code or config excerpt

I haven't edited the default plate code - plate editor with fixed toolbar kit.

Logs, screenshots, and evidence

Impact and severity

No response

Additional information

No response

[dosubot]

Thanks for the report. The color picker grid uses grid-cols-[repeat(10,1fr)] with size-6 (24px) swatches and gap-x-1, but the dropdown container only sets min-w-[8rem] with no explicit width — so if something constrains the parent (like variant="fullWidth" or a narrow toolbar container), the 1fr columns collapse and clip [1].

A fix in PR #4863 addressed some overlap/clipping issues, but it didn't add a fixed grid width [2].

Workaround: You can add a fixed width to the color grid container. Something like:

// In your font-color-toolbar-button.tsx, on the grid div:
className="grid grid-cols-[repeat(10,1fr)] place-items-center gap-x-1 w-[272px]"
// 10 swatches × 24px + 9 gaps × 4px + padding = ~272px

This ensures the palette doesn't rely on intrinsic sizing from the parent.

We'll look into setting a proper min-width on the dropdown content so this works out-of-the-box.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[fonty422]

The issue with:

// In your font-color-toolbar-button.tsx, on the grid div:
className="grid grid-cols-[repeat(10,1fr)] place-items-center gap-x-1 w-[272px]"
// 10 swatches × 24px + 9 gaps × 4px + padding = ~272px

is that it breaks when we update our plate version and we need to manually put this back.