fix: Remove incorrect background logic from PageLayoutGridLayout (#16945)

Removes the background color logic that was incorrectly added to
PageLayoutGridLayout in PR #16870. Grid layouts are only used for
dashboards where widgets have their own background colors set in
WidgetCard.tsx, so the container background was causing visual
mismatches in padding/gap areas. The background logic remains correctly
applied in PageLayoutVerticalListViewer and PageLayoutVerticalListEditor
where widgets need to inherit the container background.

---------

Co-authored-by: Devessier <baptiste@devessier.fr>

packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx

@@ -12,7 +12,6 @@ import { PAGE_LAYOUT_GRID_MARGIN } from '@/page-layout/constants/PageLayoutGridM
 import { PAGE_LAYOUT_GRID_ROW_HEIGHT } from '@/page-layout/constants/PageLayoutGridRowHeight';
 import { usePageLayoutHandleLayoutChange } from '@/page-layout/hooks/usePageLayoutHandleLayoutChange';
 import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
-import { useShouldUseWhiteBackground } from '@/page-layout/hooks/useShouldUseWhiteBackground';
 import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
 import { pageLayoutCurrentBreakpointComponentState } from '@/page-layout/states/pageLayoutCurrentBreakpointComponentState';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
@@ -37,13 +36,7 @@ import {
 } from 'react-grid-layout';
 import { isDefined } from 'twenty-shared/utils';
 
-const StyledGridContainer = styled.div<{
+const StyledGridContainer = styled.div`
-  shouldUseWhiteBackground: boolean;
-}>`
-  background: ${({ theme, shouldUseWhiteBackground }) =>
-    shouldUseWhiteBackground
-      ? theme.background.primary
-      : theme.background.secondary};
   box-sizing: border-box;
   flex: 1;
   min-height: 100%;
@@ -111,8 +104,6 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => {
 
   const gridContainerRef = useRef<HTMLDivElement>(null);
 
-  const { shouldUseWhiteBackground } = useShouldUseWhiteBackground();
-
   const isPageLayoutInEditMode = useRecoilComponentValue(
     isPageLayoutInEditModeComponentState,
   );
@@ -152,10 +143,7 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => {
   );
 
   return (
-    <StyledGridContainer
+    <StyledGridContainer ref={gridContainerRef}>
-      ref={gridContainerRef}
-      shouldUseWhiteBackground={shouldUseWhiteBackground}
-    >
       {isPageLayoutInEditMode && (
         <>
           <PageLayoutGridOverlay />

packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx

@@ -1,4 +1,4 @@
-import { useShouldUseWhiteBackground } from '@/page-layout/hooks/useShouldUseWhiteBackground';
+import { usePageLayoutShouldUseWhiteBackground } from '@/page-layout/hooks/usePageLayoutShouldUseWhiteBackground';
 import { pageLayoutDraggingWidgetIdComponentState } from '@/page-layout/states/pageLayoutDraggingWidgetIdComponentState';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer';
@@ -42,7 +42,7 @@ export const PageLayoutVerticalListEditor = ({
 }: PageLayoutVerticalListEditorProps) => {
   const droppableId = `page-layout-vertical-list-${useId()}`;
 
-  const { shouldUseWhiteBackground } = useShouldUseWhiteBackground();
+  const { shouldUseWhiteBackground } = usePageLayoutShouldUseWhiteBackground();
 
   const setDraggingWidgetId = useSetRecoilComponentState(
     pageLayoutDraggingWidgetIdComponentState,

packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx

@@ -1,4 +1,4 @@
-import { useShouldUseWhiteBackground } from '@/page-layout/hooks/useShouldUseWhiteBackground';
+import { usePageLayoutShouldUseWhiteBackground } from '@/page-layout/hooks/usePageLayoutShouldUseWhiteBackground';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer';
 import styled from '@emotion/styled';
@@ -22,7 +22,7 @@ type PageLayoutVerticalListViewerProps = {
 export const PageLayoutVerticalListViewer = ({
   widgets,
 }: PageLayoutVerticalListViewerProps) => {
-  const { shouldUseWhiteBackground } = useShouldUseWhiteBackground();
+  const { shouldUseWhiteBackground } = usePageLayoutShouldUseWhiteBackground();
 
   return (
     <StyledVerticalListContainer

packages/twenty-front/src/modules/page-layout/hooks/usePageLayoutShouldUseWhiteBackground.ts

@@ -0,0 +1,13 @@
+import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { PageLayoutType } from '~/generated/graphql';
+
+export const usePageLayoutShouldUseWhiteBackground = () => {
+  const isMobile = useIsMobile();
+  const { isInRightDrawer, layoutType } = useLayoutRenderingContext();
+
+  const shouldUseWhiteBackground =
+    layoutType === PageLayoutType.RECORD_PAGE && (isMobile || isInRightDrawer);
+
+  return { shouldUseWhiteBackground };
+};

packages/twenty-front/src/modules/page-layout/hooks/useShouldUseWhiteBackground.ts

@@ -1,14 +0,0 @@
-import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab';
-import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-
-export const useShouldUseWhiteBackground = () => {
-  const isMobile = useIsMobile();
-  const { isInRightDrawer } = useLayoutRenderingContext();
-  const { isInPinnedTab } = useIsInPinnedTab();
-
-  const shouldUseWhiteBackground =
-    (isMobile || isInRightDrawer) && !isInPinnedTab;
-
-  return { shouldUseWhiteBackground };
-};