Reduce Flat Data Grid row height to display more data rows

[RandomFractals]

Currently those table rows have line-height set to 1.5 (see https://github.com/githubocto/flat-ui/blob/main/src/index.css#L13) and hardcoded .cell height is set to 40px with inline styles for each data cell div.

This results in not even 10 rows of actual data rows we can display in our limited 560px table view in a notebook cell output.

Flat data grid header summary row with bar charts is really nice to get a quick dataset overview.

Reducing regular row height to 24px or so could make that data table renderer even more useful for quick data scans.

[RandomFractals]

Adding the following CSS rules fixes this issue for a pinned column and data row line-height:

/* flat grid styles */
.github-octo-flat-ui {
  line-height: 0.8 !important;
}

.cell {
  height: 24px !important;
}

However, I couldn't find how to get rid of the extra space between table rows after those changes. I suspect that is caused by some flex/box sizing or :before/:after rules or something else hardcoded in the actual flat ui grid component when rows are generated.

In general that grid could use more custom grid, row, cell classes exposed in CSS to enable devs integrating that data grid component overwrite grid row/cell styles it in their apps easily.

[RandomFractals]

Dense flat UI grid display with more rows after line item height and grid row height changes applied to flat UI grid in our fork:

https://github.com/RandomFractals/flat-ui

[RandomFractals]

New denser flat UI grid renderer display with 15 rows of data and header summary row: