libredb / libredb/libredb-studio

Schema explorer column name is squeezed to zero width by long type names

Open
#877 1 comment 0 reactions 1 assignee Claimed by @InnoxCodes View on GitHub
bug good first issue
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.