From cd1b51618e65340a20fba11445a12e3af49d9325 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Tue, 14 Oct 2025 22:57:30 +0530
Subject: [PATCH] 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>
---
 .../components/PageLayoutGridLayout.tsx       |  5 ++
 .../components/PageLayoutGridResizeHandle.tsx | 55 +++++++++++++++++++
 .../display/icon/components/TablerIcons.ts    |  1 +
 packages/twenty-ui/src/display/index.ts       |  1 +
 4 files changed, 62 insertions(+)
 create mode 100644 packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx

diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx
index 5382e897ed..505bada369 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx
+++ b/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(
diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx
new file mode 100644
index 0000000000..c125a13129
--- /dev/null
+++ b/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>
+  );
+});
diff --git a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
index a6f62a76ed..ecfc418f69 100644
--- a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
+++ b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
@@ -272,6 +272,7 @@ export {
   IconProgressCheck,
   IconPuzzle,
   IconQuestionMark,
+  IconRadiusBottomRight,
   IconRefresh,
   IconRefreshAlert,
   IconRefreshDot,
diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts
index 5c7c674f53..cf9fe6dac5 100644
--- a/packages/twenty-ui/src/display/index.ts
+++ b/packages/twenty-ui/src/display/index.ts
@@ -334,6 +334,7 @@ export {
   IconProgressCheck,
   IconPuzzle,
   IconQuestionMark,
+  IconRadiusBottomRight,
   IconRefresh,
   IconRefreshAlert,
   IconRefreshDot,