Record board columns design fix (full height borders)

[FelixMalfait]

Column separators in the record board should take the full heigh, instead it doesn't look good if the board doesn't have any card

See current behavior:

cc @Bonapara

[greptile-apps]

To fix the issue of column separators not taking full height when the board doesn't have any cards, you'll need to adjust the CSS for the column container. This likely involves modifying the RecordBoardColumn.tsx component or its associated styled components to ensure the column's container expands to the full height of its parent container, even when it contains no cards.

A potential CSS solution could be to ensure that the column container has a min-height: 100% or height: 100% property set, depending on the parent container's height management. If the parent container's height is dynamically determined, flexbox or grid display properties might be more appropriate to ensure the column stretches to fill the available space.

Please review the styling applied in RecordBoardColumn.tsx and any relevant styled component files to implement this design fix.

References

twentyhq/twenty/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components

Ask Greptile

[greptile-apps]

To fix the issue of column separators not extending to full height when there are no cards in the record board, you'll need to adjust the CSS for the RecordBoardColumn component and possibly its child components. Here's a step-by-step guide:

1. Adjust the CSS for the RecordBoardColumn component (RecordBoardColumn.tsx): Ensure that the main container of the column has a CSS property that allows it to stretch to the full height of its parent. This can be achieved by setting height: 100%; or using flexbox properties such as flex-grow: 1; to make the column take up all available space.

2. Ensure the container inside RecordBoardColumnCardsContainer.tsx stretches: If the RecordBoardColumnCardsContainer component is responsible for the actual rendering of the cards and the background, make sure its root element also has height: 100%; or appropriate flex properties.

3. Review global styles: Sometimes, global styles or parent container styles can override or affect the styling of your components. Ensure there's no conflicting CSS that might prevent the columns from stretching to full height.

4. Fallback minimum height: As a last resort, if the columns are still not stretching due to lack of content, you can apply a min-height CSS property to ensure that the columns have a minimum height even when empty.

These steps should guide you towards resolving the issue with the column separators. Make sure to test the changes across different browsers and screen sizes to ensure consistent behavior.

References

twentyhq/twenty/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components
twentyhq/twenty/packages/twenty-front/src/modules/object-record/record-board/record-board-column

Ask Greptile

[orinamio]

I'll look into this issue. Can you assign me to it?

[Bonapara]

Sure, thanks for contributing @orinamio!

[RobertoSimonini1]

@FelixMalfait @Bonapara is this issue still open or has it been resolved?
if it hasn't I'd like to work on it

[Bonapara]

Still available, assigning you, thanks @RobertoSimonini1!

[gitstart-app]

Here is the GitStart Ticket for this issue: https://clients.gitstart.com/twenty/5449/tickets/TWNTY-5273

[FelixMalfait]

Also here: