The bottom border of the last row of a record table is missing, except
under the sticky first columns.
<img width="600" alt="before"
src="https://github.com/user-attachments/assets/placeholder" />
## Cause
Two things combine.
**A 1px off-by-one in the virtualization grid.** Virtualized rows are
absolutely positioned on a grid whose pitch is `RECORD_TABLE_ROW_HEIGHT
+ 1` (row plus its bottom border), and
`RecordTableRowVirtualizedContainer` reserves the first slot for the
header:
```ts
const pixelsFromTop =
realIndexByVirtualIndex * (RECORD_TABLE_ROW_HEIGHT + 1) +
(RECORD_TABLE_ROW_HEIGHT + 1);
```
`RecordTableVirtualizedBodyPlaceholder` reserves `n *
(RECORD_TABLE_ROW_HEIGHT + 1)` of in-flow height to match. But header
cells are sized `height: RECORD_TABLE_ROW_HEIGHT` with their
`border-bottom` inside that box, so the header only occupies 32px, not
the 33px the grid assumes. Everything after the placeholder therefore
sits one pixel above the grid.
**The add-new row started painting over that pixel.** It used to be an
unpositioned sibling, so the absolutely positioned rows painted above it
(positioned descendants paint after in-flow blocks) and the overlap was
invisible. #23211 wrapped it in `DragDropItemEndDropZone`, which is
`position: relative`; #23752 kept that as `StyledEndDropZone`. It is now
a positioned element later in DOM order, so it paints over the rows and
its opaque background covers the last row's border. The border survives
only where cells carry their own `z-index` — the sticky first columns.
Measured on `/objects/workflows` with 2 records, before the fix:
| element | top | bottom |
| --- | --- | --- |
| header row | 88 | 120 (height 32) |
| last row container | 154 | 187 |
| add-new wrapper | 186 | 218 |
## Fix
Give the header container the full row slot (`RECORD_TABLE_ROW_HEIGHT +
1`) so the body lines up with the grid the virtualization already
assumes. Header cells keep their own 32px sizing, so their internal
layout is unchanged.
This also closes the 1px gap that previously sat between the header and
the first row.
After the fix, on the same view:
| element | top | bottom |
| --- | --- | --- |
| header row | 88 | 121 (height 33) |
| first row | 121 | 154 |
| last row | 154 | 187 |
| add-new wrapper | 187 | 219 |
Overlap 0, header-to-first-row gap 0.
Only the ungrouped virtualized table was affected.
`RecordTableRecordGroupRows` has the same `position: relative` wrapper,
but its rows are in normal flow, so the header change just shifts the
whole body down a pixel with no overlap possible.
## Testing
Ran the app locally against seeded data:
- Workflows (2 rows): border restored across the full width, geometry
above verified in the DOM.
- Companies (599 rows): header 33px, first row flush at 0, uniform 33px
pitch across all 240 mounted row containers; scrolled and confirmed rows
slide under the sticky header cleanly.
- Verified the diagnosis independently by toggling the end drop zone to
`position: static` in the running page, which restores the border the
same way.
`npx nx typecheck twenty-front` and `npx nx lint:diff-with-main
twenty-front` are green.
---
_Generated by [Claude
Code](https://claude.ai/code/session_01VNEMsZbCA7x55n2trMhE47)_
<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/23846?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. -->
Félix Malfait
1267697b2c
