New resize handle on layout grid (#15040)

before - 
<img width="164" height="167" alt="Screenshot 2025-10-12 at 02 14 17"
src="https://github.com/user-attachments/assets/694d625d-0345-4465-b1db-dcb0c7e416c6"
/>

after - 

<img width="118" height="116" alt="Screenshot 2025-10-14 at 18 51 01"
src="https://github.com/user-attachments/assets/fc342b95-fd78-45e1-b0a3-13231cf11b30"
/>

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -1,5 +1,6 @@
 import { PageLayoutGridLayoutDragSelector } from '@/page-layout/components/PageLayoutGridLayoutDragSelector';
 import { PageLayoutGridOverlay } from '@/page-layout/components/PageLayoutGridOverlay';
+import { PageLayoutGridResizeHandle } from '@/page-layout/components/PageLayoutGridResizeHandle';
 import { EMPTY_LAYOUT } from '@/page-layout/constants/EmptyLayout';
 import {
   PAGE_LAYOUT_CONFIG,
@@ -115,6 +116,10 @@ export const PageLayoutGridLayout = () => {
           draggableHandle=".drag-handle"
           compactType="vertical"
           preventCollision={false}
+          resizeHandle={
+            isPageLayoutInEditMode ? <PageLayoutGridResizeHandle /> : undefined
+          }
+          resizeHandles={['se']}
           onLayoutChange={handleLayoutChange}
           onBreakpointChange={(newBreakpoint) =>
             setPageLayoutCurrentBreakpoint(

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

@@ -0,0 +1,55 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { forwardRef } from 'react';
+import { IconRadiusBottomRight } from 'twenty-ui/display';
+
+type PageLayoutGridResizeHandleProps = {
+  handleAxis?: string;
+  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+  onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+const StyledIcon = styled(IconRadiusBottomRight)`
+  bottom: ${({ theme }) => theme.spacing(1)};
+  cursor: nwse-resize;
+  position: absolute;
+  right: ${({ theme }) => theme.spacing(1)};
+  color: ${({ theme }) => theme.border.color.strong};
+
+  :hover {
+    color: ${({ theme }) => theme.font.color.tertiary};
+  }
+`;
+
+export const PageLayoutGridResizeHandle = forwardRef<
+  HTMLDivElement,
+  PageLayoutGridResizeHandleProps
+>((props, ref) => {
+  const theme = useTheme();
+  const {
+    handleAxis = 'se',
+    onMouseDown,
+    onMouseUp,
+    onTouchEnd,
+    className,
+    style,
+  } = props;
+
+  if (handleAxis !== 'se') return null;
+
+  return (
+    <div
+      ref={ref}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
+      onTouchEnd={onTouchEnd}
+      className={className}
+      style={style}
+    >
+      <StyledIcon size={theme.spacing(4)} stroke={theme.spacing(1)} />
+    </div>
+  );
+});

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -272,6 +272,7 @@ export {
   IconProgressCheck,
   IconPuzzle,
   IconQuestionMark,
+  IconRadiusBottomRight,
   IconRefresh,
   IconRefreshAlert,
   IconRefreshDot,

packages/twenty-ui/src/display/index.ts

@@ -334,6 +334,7 @@ export {
   IconProgressCheck,
   IconPuzzle,
   IconQuestionMark,
+  IconRadiusBottomRight,
   IconRefresh,
   IconRefreshAlert,
   IconRefreshDot,