From fd0b41be7406c5c56f0fe281f470813a187325d4 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 27 May 2024 13:04:42 +0200
Subject: [PATCH] chore: allow you to specify a width for the form sidebar

---
 .../component/common/FormTemplate/FormTemplate.tsx  | 13 ++++++++++---
 .../CreateProjectDialog/CreateProjectDialog.tsx     |  1 +
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
index 1783b6a95d..c58bff4a35 100644
--- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx
+++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
@@ -36,6 +36,7 @@ interface ICreateProps {
     footer?: ReactNode;
     compact?: boolean;
     showGuidance?: boolean;
+    sidebarWidth?: string;
 }
 
 const StyledContainer = styled('section', {
@@ -151,12 +152,14 @@ const StyledInfoIcon = styled(Info)(({ theme }) => ({
     fill: theme.palette.primary.contrastText,
 }));
 
-const StyledSidebar = styled('aside')(({ theme }) => ({
+const StyledSidebar = styled('aside', {
+    shouldForwardProp: (prop) => prop !== 'sidebarWidth',
+})<{ sidebarWidth?: string }>(({ theme, sidebarWidth }) => ({
     backgroundColor: theme.palette.background.sidebar,
     padding: theme.spacing(4),
     flexGrow: 0,
     flexShrink: 0,
-    width: formTemplateSidebarWidth,
+    width: sidebarWidth || formTemplateSidebarWidth,
     [theme.breakpoints.down(1100)]: {
         width: '100%',
         color: 'red',
@@ -218,6 +221,7 @@ const FormTemplate: React.FC<ICreateProps> = ({
     footer,
     compact,
     showGuidance = true,
+    sidebarWidth,
 }) => {
     const { setToastData } = useToast();
     const smallScreen = useMediaQuery(`(max-width:${1099}px)`);
@@ -319,6 +323,7 @@ const FormTemplate: React.FC<ICreateProps> = ({
                         documentationLinkLabel={documentationLinkLabel}
                         showDescription={showDescription}
                         showLink={showLink}
+                        sidebarWidth={sidebarWidth}
                     >
                         {renderApiInfo(
                             formatApiCode === undefined,
@@ -378,6 +383,7 @@ interface IGuidanceProps {
     documentationLinkLabel?: string;
     showDescription?: boolean;
     showLink?: boolean;
+    sidebarWidth?: string;
 }
 
 const Guidance: React.FC<IGuidanceProps> = ({
@@ -388,9 +394,10 @@ const Guidance: React.FC<IGuidanceProps> = ({
     documentationLinkLabel = 'Learn more',
     showDescription = true,
     showLink = true,
+    sidebarWidth = undefined,
 }) => {
     return (
-        <StyledSidebar>
+        <StyledSidebar sidebarWidth={sidebarWidth}>
             <ConditionallyRender
                 condition={showDescription}
                 show={
diff --git a/frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx b/frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx
index 35f8a588f2..11292dcee0 100644
--- a/frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx
+++ b/frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx
@@ -143,6 +143,7 @@ export const CreateProjectDialogue = ({
                 documentationLink={documentation.link?.url}
                 documentationLinkLabel={documentation.link?.label}
                 formatApiCode={formatApiCode}
+                sidebarWidth={'420px'}
             >
                 <NewProjectForm
                     errors={errors}