On mobile, folder items in the navigation drawer were wrapped in a faint
grey rounded box, showing up as small grey corners around the item. It
was not part of any design.
## Cause
`NavigationDrawerItemsCollapsableContainer` renders each folder group
inside a framer-motion div and animates its chrome through the `animate`
object:
- collapsed group: `border: '1px solid <2% black>'`, `borderRadius: md`,
`backgroundColor: <2% black>`
- expanded: `border: 'none'`, `backgroundColor: 'transparent'`
`none` is not an animatable value for framer-motion, so once the
collapsed border had been applied it was never cleared. `borderRadius`
was never part of the expanded target at all, so it stuck too. The
inline style on the group container ended up as:
```
width: auto; background-color: transparent; border: 1px solid color(display-p3 0 0 0 / 0.02); border-radius: var(--t-border-radius-md);
```
The drawer starts collapsed on mobile (`isNavigationDrawerExpandedState`
defaults to `!isMobile`) and is expanded when the user opens it, so
every folder group passed through the collapsed state and kept the
hairline box. On desktop the drawer starts expanded, which is why it
normally does not show there — but collapsing and re-expanding the
sidebar reproduced the exact same leftover.
Only folders were affected: the group chrome is applied when `isGroup`
is true, which requires more than one folder in the section.
## Fix
The group background, border and radius now live in the styled component
and are driven by an `isCollapsedGroup` prop, with a CSS transition on
the background. framer-motion only animates the width, which it handles
correctly.
## Verification
Ran the app locally against a seeded workspace with three folders, at
393px width and at 1280px.
- Mobile: folder rows no longer carry a border or radius; the group
container computes to `border: 0px none`, `border-radius: 0px`,
transparent background
- Desktop expanded: unchanged, no chrome
- Desktop collapsed: group pill still renders as before (1px hairline,
16px radius, 2% black background, 24px wide)
- Desktop collapse then re-expand: chrome is now cleared instead of
sticking
Lint, format and typecheck pass on the changed file.
---
_Generated by [Claude
Code](https://claude.ai/code/session_018wtVx6vj3ZbHT3vijBLwMW)_
<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/23425?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
884f470982
