diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx
index 14e93c1ede..ae3c331e28 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx
@@ -21,39 +21,41 @@ type PageLayoutGridResizeHandleProps = {
style?: React.CSSProperties;
};
-const StyledBottomRightIcon = styled(IconRadiusBottomRight)`
- color: transparent;
- cursor: nwse-resize;
+const StyledCornerIconWrapper = styled.div<{
+ cursor: 'nwse-resize' | 'nesw-resize';
+ position: 'ne' | 'nw' | 'se' | 'sw';
+}>`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: ${({ cursor }) => cursor};
+ width: ${({ theme }) => theme.spacing(4)};
+ height: ${({ theme }) => theme.spacing(4)};
- :hover {
- color: ${({ theme }) => theme.font.color.tertiary};
+ & svg {
+ color: transparent;
+ flex-shrink: 0;
+ pointer-events: none;
+ transform: ${({ position, theme }) => {
+ if (position === 'se') {
+ return `translate(-${theme.spacing(2)}, -${theme.spacing(2)})`;
+ }
+ if (position === 'sw') {
+ return `translate(${theme.spacing(2)}, -${theme.spacing(2)})`;
+ }
+ if (position === 'ne') {
+ return `translate(-${theme.spacing(2)}, ${theme.spacing(2)})`;
+ }
+ if (position === 'nw') {
+ return `translate(${theme.spacing(2)}, ${theme.spacing(2)})`;
+ }
+ }};
}
-`;
-
-const StyledBottomLeftIcon = styled(IconRadiusBottomLeft)`
- color: transparent;
- cursor: nesw-resize;
:hover {
- color: ${({ theme }) => theme.font.color.tertiary};
- }
-`;
-
-const StyledTopLeftIcon = styled(IconRadiusTopLeft)`
- color: transparent;
- cursor: nwse-resize;
-
- :hover {
- color: ${({ theme }) => theme.font.color.tertiary};
- }
-`;
-
-const StyledTopRightIcon = styled(IconRadiusTopRight)`
- color: transparent;
- cursor: nesw-resize;
-
- :hover {
- color: ${({ theme }) => theme.font.color.tertiary};
+ svg {
+ color: ${({ theme }) => theme.font.color.tertiary};
+ }
}
`;
@@ -108,54 +110,58 @@ const StyledResizeHandleWrapper = styled.div<{
${({ theme, widgetHandleAxis }) => {
if (widgetHandleAxis === 'w') {
return css`
- left: ${theme.spacing(2)};
+ left: ${theme.spacing(1.5)};
top: 50%;
transform: translateY(-50%);
`;
}
if (widgetHandleAxis === 'e') {
return css`
- right: ${theme.spacing(2)};
+ right: ${theme.spacing(1.5)};
top: 50%;
transform: translateY(-50%);
`;
}
if (widgetHandleAxis === 'n') {
return css`
- top: ${theme.spacing(2)};
+ top: ${theme.spacing(1.5)};
left: 50%;
transform: translateX(-50%);
`;
}
if (widgetHandleAxis === 's') {
return css`
- bottom: ${theme.spacing(2)};
+ bottom: ${theme.spacing(1.5)};
left: 50%;
transform: translateX(-50%);
`;
}
if (widgetHandleAxis === 'se') {
return css`
- bottom: ${theme.spacing(0.5)};
- right: ${theme.spacing(0.5)};
+ bottom: 0;
+ right: 0;
+ transform: translate(${theme.spacing(1)}, ${theme.spacing(1)});
`;
}
if (widgetHandleAxis === 'sw') {
return css`
- bottom: ${theme.spacing(0.5)};
- left: ${theme.spacing(0.5)};
+ bottom: 0;
+ left: 0;
+ transform: translate(-${theme.spacing(1)}, ${theme.spacing(1)});
`;
}
if (widgetHandleAxis === 'ne') {
return css`
- right: ${theme.spacing(0.5)};
- top: ${theme.spacing(0.5)};
+ right: 0;
+ top: 0;
+ transform: translate(${theme.spacing(1)}, -${theme.spacing(1)});
`;
}
if (widgetHandleAxis === 'nw') {
return css`
- left: ${theme.spacing(0.5)};
- top: ${theme.spacing(0.5)};
+ left: 0;
+ top: 0;
+ transform: translate(-${theme.spacing(1)}, -${theme.spacing(1)});
`;
}
}}
@@ -209,28 +215,36 @@ export const PageLayoutGridResizeHandle = forwardRef<
)}
{widgetHandleAxis === 'ne' && (
-
+
+
+
)}
{widgetHandleAxis === 'nw' && (
-
+
+
+
)}
{widgetHandleAxis === 'se' && (
-
+
+
+
)}
{widgetHandleAxis === 'sw' && (
-
+
+
+
)}
);