From 884f470982b382a0d5b71a43157461eec0f8d124 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Tue, 28 Jul 2026 16:33:52 +0200
Subject: [PATCH] Remove grey corners around navigation menu items on mobile
 (#23425)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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. -->
---
 ...igationDrawerItemsCollapsableContainer.tsx | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx
index 31366a5728..f3103e010f 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx
@@ -9,7 +9,25 @@ import {
   type TargetAndTransition,
 } from 'framer-motion';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
-const StyledAnimationGroupContainerBase = styled.div``;
+
+const COLLAPSED_GROUP_WIDTH = 24;
+
+const StyledAnimationGroupContainerBase = styled.div<{
+  isCollapsedGroup: boolean;
+}>`
+  background-color: ${({ isCollapsedGroup }) =>
+    isCollapsedGroup
+      ? themeCssVariables.background.transparent.lighter
+      : 'transparent'};
+  border: ${({ isCollapsedGroup }) =>
+    isCollapsedGroup
+      ? `1px solid ${themeCssVariables.background.transparent.lighter}`
+      : 'none'};
+  border-radius: ${({ isCollapsedGroup }) =>
+    isCollapsedGroup ? themeCssVariables.border.radius.md : '0'};
+  transition: background-color
+    calc(${themeCssVariables.animation.duration.normal} * 1s) ease;
+`;
 
 const StyledAnimationGroupContainer = motion.create(
   StyledAnimationGroupContainerBase,
@@ -30,25 +48,14 @@ export const NavigationDrawerItemsCollapsableContainer = ({
     isNavigationDrawerExpandedState,
   );
   const isExpanded = isNavigationDrawerExpanded || isSettingsPage;
-  let animate: AnimationControls | TargetAndTransition = {
-    width: 'auto',
-    backgroundColor: 'transparent',
-    border: 'none',
-  };
-  if (!isExpanded) {
-    animate = { width: 24 };
-    if (isGroup) {
-      animate = {
-        width: 24,
-        backgroundColor: theme.background.transparent.lighter,
-        border: `1px solid ${theme.background.transparent.lighter}`,
-        borderRadius: themeCssVariables.border.radius.md,
-      };
-    }
-  }
+
+  const animate: AnimationControls | TargetAndTransition = isExpanded
+    ? { width: 'auto' }
+    : { width: COLLAPSED_GROUP_WIDTH };
 
   return (
     <StyledAnimationGroupContainer
+      isCollapsedGroup={isGroup && !isExpanded}
       initial={false}
       animate={animate}
       transition={{