libredb / libredb/libredb-studio
Schema explorer column name is squeezed to zero width by long type names
- Dominant language
- TypeScript
- Stars
- 726
- Forks
- 119
- Avg merge
- 7h 47m
- Merged PRs (30d)
- 265
Description
## What
In the schema explorer's column list, a long type name pushes the column name span to zero width. The name is still in the DOM, but nothing of it is visible.
## Where
src/components/schema-explorer/ColumnList.tsx:24-34
```tsx
{column.isPrimary ? : nonPrimaryDot}
{column.name}
{column.type.split("(")[0]}
```
The name span is `flex-1 truncate`, so it shrinks. The type span has no `shrink-0`, no `truncate` and no width cap, so it takes whatever it needs. `column.type.split("(")[0]` only trims a parenthesised length, so `timestamp without time zone` passes through whole.
Reproduce with any PostgreSQL table that has a `TIMESTAMP WITHOUT TIME ZONE` column. In a default width sidebar the type wraps to two lines and the column name disappears.
## Expected
The column name stays readable. If anything is cut, it is the type.
## How to fix
Constrain the type span rather than the name: add `shrink-0` with a `max-w-*` and `truncate`, or let the type truncate first. A `title` attribute carrying the full type would keep the information available on hover.
## How to check
Open a PostgreSQL connection, expand a table with a `TIMESTAMP WITHOUT TIME ZONE` column, and confirm the column name is visible at the default sidebar width.
Contributor guide
Assessment
This issue has not been assessed yet.