Files
twenty/packages
Félix Malfait 4f31265927 Fix 1px gap above the record table header (#23441)
## Problem

A transparent 1px slit shows up between the view bar and the table
header row, letting the scrolled records show through above the column
names.

The record table header is `position: sticky; top: 0` inside the table's
scroll container. On fractional device pixel ratios (scaled displays,
browser zoom) the compositor can land the sticky header half a device
pixel below the top edge of the scroll container, so its topmost device
pixel row is painted with the scrolled content behind it instead of the
header background.

## Repro

Reproduced locally on `/objects/companies` with `deviceScaleFactor`
1.25, 1.75 and 2.25 — the slit appears at specific vertical scroll
offsets (e.g. `scrollTop` 47 at DPR 1.75), and never at integer ratios.

Before (DPR 1.75, `scrollTop` 47) — the row underneath bleeds through
above "Name":

<img width="960" alt="before"
src="https://github.com/user-attachments/assets/00000000-0000-0000-0000-000000000000">

## Fix

Extend the header background 1px upwards with a `box-shadow` on the
sticky container, so whatever half-pixel the compositor exposes is
always covered. The shadow is painted as part of the sticky layer, so it
follows the header wherever it lands.

Nothing changes visually otherwise: when the table is scrolled to the
top the shadow sits above the scroll container's padding box and is
clipped away.

## Verification

Scripted pixel scan of the top device-pixel row of the header, over
scroll offsets 1-60 at DPR 1.25 / 1.5 / 1.75 / 2.25 / 2.5:

| | before | after |
|---|---|---|
| DPR 1.25 | 3 offsets with a visible slit | 0 |
| DPR 1.5 | 0 | 0 |
| DPR 1.75 | 2 | 0 |
| DPR 2.25 | 3 | 0 |
| DPR 2.5 | 0 | 0 |

Also checked at rest (`scrollTop` 0) and while scrolled at DPR 1 and 2
that no extra line appears above the header.

`oxlint`, `oxfmt` and `nx typecheck twenty-front` pass.


---
_Generated by [Claude
Code](https://claude.ai/code/session_014gaDhmeDSNjdBeRRepKPAr)_

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/23441?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
2026-07-28 16:49:12 +02:00
..