Expand cell height if there is only one row

[natalyjazzviolin]

Helps with https://github.com/ClickHouse/control-plane/issues/12806

Why

Currently if there is one row of data displayed, and it's something like a SHOW CREATE TABLE query, it is cut off by default:

What

This adds and exposes a rowAutoHeight prop to the Grid component. It should be set for the case when there is only one row. When set, it allows the cell height to expand to accommodate the content:

Screen.Recording.2025-02-07.at.8.36.34.AM.mov

Reproduce

• Check out this PR
• Run npm run build
• Set the click-ui version in sql-console/web/package.json to "@clickhouse/click-ui": "../../../click-ui",
• Run rm -rf node_modules && yarn cache clean && yarn && yarn build:packages
  Create the following table and show the create query:

CREATE TABLE random_user_events (
    user_id UInt32,
    event_time DateTime,
    event_type Enum8('click' = 1, 'view' = 2, 'purchase' = 3),
    item_id String,
    price Decimal(10,2),
    quantity UInt16
) ENGINE = MergeTree()
ORDER BY (user_id, event_time)
PARTITION BY toYYYYMM(event_time)
SETTINGS index_granularity = 8192;

show create table random_user_events;

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
click-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 10, 2025 10:38pm

[vineethasok]

Need to make. sure the height of the index is also updated using this logic
I would recommend adding a prop with rows with autoheight or a prop to say the height can be auto for all the rows or none of them instead of only first rows
Would love your thoughts @gjones @fneves @serdec

[natalyjazzviolin]

@vineethasok I followed your suggestion and removed isOnlyRow prop and instead created a rowAutoHeight prop that the Grid component accepts and hands down to the StyledCell where the appropriate height styles are set.

I was hoping to set a matching height on the index column using CSS, but unfortunately the cells are in position: absolute, so that doesn't work. Currently my idea is to create a ref for the cell's height and set the index cell's height based on that. Would that make sense, or is there another approach to consider? Thank you!
cc: @fneves @hoorayimhelping

[natalyjazzviolin]

Updated the initial description with the new implementation per the requested changes.

[hoorayimhelping]

Have a few nits and comments

[hoorayimhelping]

Let's light this candle and see what happens. I want you to keep an eye on this in Slack and escalations for the next few months: listen for reports of weird issues with grids and tables or bad performance. (Not saying this PR will cause those, but since this is a library that affects multiple areas of the application, we have a responsibility to make sure our changes don't cause regressions).