chore: 🤖 table reduce acceptable minimum column width

[punkbit]

Why?

The minimum acceptable column width limits resizing. For cases where tables have many columns, this can be obstructive.
In a future iteration, the column resizer may have to push other column resizers to their minimum in order to create space, given the restricted space, or a similar feature to help the user reveal more data.

How?

• Reduce the minimal column width value
• Add an opaque background to prevent the resizer element from overlapping on text interception

Preview?

Reported by @rndD:

Screen.Recording.2026-03-11.at.17.07.37.mov

Overlap issue (transparent background)

Screen.Recording.2026-03-12.at.11.12.06.mov

Overlap (opaque background)

Screen.Recording.2026-03-12.at.11.11.06.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: d4bf985

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clickhouse/click-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Claude finished @punkbit's task in 1m 38s —— View job

---

PR Review

Solid fix for a real usability problem! The opaque background on the resizer is the right approach to prevent text bleed-through. Two things worth a look before merging.

---

💡 Suggestions (non-blocking)

• Resizer hover state is inverted (src/components/Table/Table.tsx:79–83): The ::before indicator line transitions from opacity: 1 (default) to opacity: 0.6 on hover — making it less visible when the user hovers. This is counterintuitive. Typical resizer UX hides the line by default (opacity: 0) and reveals it on hover (opacity: 1 or similar). Additionally, transition: opacity 0.2s is set on the Resizer div itself, but the opacity change is now on ::before (which has no transition), so the animation no longer works as intended. Fix this →%20adding%20%60opacity%3A%200%60%20to%20the%20%3A%3Abefore%20default%20state%2C%202)%20changing%20%3A%3Abefore%20on%20hover%20to%20%60opacity%3A%201%60%2C%20and%203)%20moving%20%60transition%3A%20opacity%200.2s%60%20to%20the%20%3A%3Abefore%20rule%20so%20the%20animation%20works.&repo=ClickHouse%2Fclick-ui)

• Dev-note comment left in (src/components/Table/Table.tsx:761): // made closest to a single character wide?! reads like an in-progress thought rather than production documentation. The existing // TODO above it already captures the open question. Consider removing this extra line or resolving the TODO now that 40px has been chosen as the value.

---

✅ Everything else looks good

• Opaque background-color on Resizer correctly uses the theme token (theme.click.table.header.color.background.default) — no hardcoded values.
• MIN_COLUMN_WIDTH reduction from 120 → 40 is straightforward and well-motivated for dense table use cases.
• Changeset type minor is appropriate.
• No API surface changes, no a11y regressions introduced.

[punkbit]

• Resizer hover state is inverted (src/components/Table/Table.tsx:79–83): The ::before indicator line transitions from opacity: 1 (default) to opacity: 0.6 on hover — making it less visible when the user hovers. This is counterintuitive. Typical resizer UX hides the line by default (opacity: 0) and reveals it on hover (opacity: 1 or similar). Additionally, transition: opacity 0.2s is set on the Resizer div itself, but the opacity change is now on ::before (which has no transition), so the animation no longer works as intended

This is intentional. By default, the handler is visible to inform the user it's draggable. It might be revised in future iterations. Do ignore for now!

[github-actions]

Claude finished @punkbit's task in 26s —— View job

---

PR Review

Nice fix for the column resizer overlap! The opaque background using the theme token is the right approach. One small thing:

💡 Suggestion (non-blocking)

• Dev-note comment left in (src/components/Table/Table.tsx:761): // made closest to a single character wide?! reads like an in-progress thought. The existing // TODO above already captures the open question — this extra line can be removed.

✅ Everything else looks good

• Theme token used for background-color — no hardcoded values.
• MIN_COLUMN_WIDTH 120 → 40 is well-motivated and straightforward.
• Changeset included and typed correctly.
• The intentional always-visible resizer handle (opacity: 1 default) is noted as a design decision by the author.

[workflow-authentication-public]

📚 Storybook Preview Deployed

✅ Preview URL: https://click-5eztjkrun-clickhouse.vercel.app

Built from commit: 6575b40c311a63186e7529f34031cb17caa23e4d

[DreaminDani]

why doesn't it truncate when dragging?

[DreaminDani]

Not a huge fan of the way the other columns react. I feel like all the columns should adjust. Like this: https://tanstack.com/table/latest/docs/framework/react/examples/full-width-resizable-table

CleanShot.2026-03-12.at.07.32.00.mp4

[punkbit]

Not a huge fan of the way the other columns react. I feel like all the columns should adjust. Like this: https://tanstack.com/table/latest/docs/framework/react/examples/full-width-resizable-table

CleanShot.2026-03-12.at.07.32.00.mp4

That's correct, as stated in the task description. This one's a small iteration to unblock @rndD.

Maybe I'll close this for now, and in the future can look into the other approach.