From 64a168f12ddceeaac47d845a8754f49673e2e3ff Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Tue, 1 Oct 2024 11:54:48 -0400
Subject: [PATCH] fix multiple ip css issues

---
 .../CreateCluster/ControlPlaneACLPane.tsx     | 36 +++++------
 .../KubeControlPaneACLDrawer.tsx              | 62 +++++++++----------
 2 files changed, 47 insertions(+), 51 deletions(-)

diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.tsx
index 352a6ff9afd..736db8f4cc3 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.tsx
@@ -57,21 +57,19 @@ export const ControlPlaneACLPane = (props: ControlPlaneACLProps) => {
   );
 
   return (
-    <FormControl data-testid="control-plane-ipacl-form">
-      <FormLabel
-        sx={(theme) => ({
-          '&&.MuiFormLabel-root.Mui-focused': {
-            color: theme.name === 'dark' ? 'white' : theme.color.black,
-          },
-        })}
-        id="ipacl-radio-buttons-group-label"
-      >
-        <Typography variant="inherit">
-          Control Plane Access Control (IPACL)
+    <>
+      <FormControl data-testid="control-plane-ipacl-form">
+        <FormLabel id="ipacl-radio-buttons-group-label">
+          <Typography variant="inherit">
+            Control Plane Access Control (IPACL)
+          </Typography>
+        </FormLabel>
+        <Typography mb={1}>
+          This is the text for Control Plane Access Control.{' '}
+          <Link to="https://www.linode.com/docs/guides/enable-lke-high-availability/">
+            Learn more.
+          </Link>
         </Typography>
-      </FormLabel>
-      <IPACLCopy />
-      <Box sx={{ marginTop: 2, marginBottom: 1 }}>
         <FormControlLabel
           control={
             <Toggle
@@ -80,11 +78,11 @@ export const ControlPlaneACLPane = (props: ControlPlaneACLProps) => {
               onChange={(e) => handleChange(e)}
             />
           }
-          label={'Enable IPACL'}
+          label="Enable IPACL"
         />
-      </Box>
+      </FormControl>
       {enableControlPlaneACL && (
-        <Stack sx={{ marginBottom: 3 }}>
+        <Box sx={{ marginBottom: 3, maxWidth: 450 }}>
           <MultipleIPInput
             buttonText="Add IP Address"
             ips={ipV4Addr}
@@ -113,8 +111,8 @@ export const ControlPlaneACLPane = (props: ControlPlaneACLProps) => {
             placeholder="::/0"
             title="IPv6 Addresses or CIDRs"
           />
-        </Stack>
+        </Box>
       )}
-    </FormControl>
+    </>
   );
 };
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx
index 07e05732d58..f9239bf1a82 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx
@@ -324,40 +324,39 @@ export const KubeControlPlaneACLDrawer = (props: Props) => {
               <Divider sx={{ marginTop: 3, marginBottom: 3 }} />
             </>
           )}
-
           <RevisionID />
-
           <AddressesCopy />
           <ErrorMessage />
-          <MultipleIPInput
-            buttonText="Add IP Address"
-            ips={ipV4Addr}
-            onChange={handleIPv4ChangeCB}
-            onBlur={(_ips: ExtendedIP[]) => {
-              const validatedIPs = validateIPs(_ips, {
-                allowEmptyAddress: false,
-                errorMessage: 'Must be a valid IPv4 address.',
-              });
-              handleIPv4ChangeCB(validatedIPs);
-            }}
-            placeholder="0.0.0.0/0"
-            title="IPv4 Addresses or CIDRs"
-          />
-          <MultipleIPInput
-            buttonText="Add IP Address"
-            ips={ipV6Addr}
-            onChange={handleIPv6ChangeCB}
-            onBlur={(_ips: ExtendedIP[]) => {
-              const validatedIPs = validateIPs(_ips, {
-                allowEmptyAddress: false,
-                errorMessage: 'Must be a valid IPv6 address.',
-              });
-              handleIPv6ChangeCB(validatedIPs);
-            }}
-            placeholder="::/0"
-            title="IPv6 Addresses or CIDRs"
-          />
-
+          <Box sx={{ maxWidth: 450 }}>
+            <MultipleIPInput
+              buttonText="Add IP Address"
+              ips={ipV4Addr}
+              onChange={handleIPv4ChangeCB}
+              onBlur={(_ips: ExtendedIP[]) => {
+                const validatedIPs = validateIPs(_ips, {
+                  allowEmptyAddress: false,
+                  errorMessage: 'Must be a valid IPv4 address.',
+                });
+                handleIPv4ChangeCB(validatedIPs);
+              }}
+              placeholder="0.0.0.0/0"
+              title="IPv4 Addresses or CIDRs"
+            />
+            <MultipleIPInput
+              buttonText="Add IP Address"
+              ips={ipV6Addr}
+              onChange={handleIPv6ChangeCB}
+              onBlur={(_ips: ExtendedIP[]) => {
+                const validatedIPs = validateIPs(_ips, {
+                  allowEmptyAddress: false,
+                  errorMessage: 'Must be a valid IPv6 address.',
+                });
+                handleIPv6ChangeCB(validatedIPs);
+              }}
+              placeholder="::/0"
+              title="IPv6 Addresses or CIDRs"
+            />
+          </Box>
           <ActionsPanel
             primaryButtonProps={{
               'data-testid': 'update-acl-button',
@@ -368,7 +367,6 @@ export const KubeControlPlaneACLDrawer = (props: Props) => {
             }}
             secondaryButtonProps={{ label: 'Cancel', onClick: closeDrawer }}
           />
-
           <ClusterNeedsMigration />
         </Stack>
       </DrawerContent>