Merge pull request #11380 from pmakode-akamai/M3-8972-fix-overflow-issue-on-kubernetes-summary-for-smaller-screens

fix: [M3-8972] - Overflow issue in Kubernetes Summary section on smaller screens (→ `staging`)

Author: jaalah-akamai

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx

@@ -37,21 +37,23 @@ const useStyles = makeStyles()((theme: Theme) => ({
     pointerEvents: 'none',
   },
   kubeconfigElement: {
+    '&:first-child': {
+      borderLeft: 'none',
+    },
     '&:hover': {
       opacity: 0.7,
     },
-    '&:last-child': {
-      borderRight: 'none',
-    },
     alignItems: 'center',
-    borderRight: '1px solid #c4c4c4',
+    borderLeft: '1px solid #c4c4c4',
     cursor: 'pointer',
     display: 'flex',
   },
   kubeconfigElements: {
     alignItems: 'center',
     color: theme.palette.primary.main,
     display: 'flex',
+    flexWrap: 'wrap',
+    gap: theme.spacing(1),
   },
   kubeconfigFileText: {
     color: theme.textColors.linkActiveLight,

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx

@@ -1,6 +1,5 @@
 import { Box, Chip, Stack, StyledActionButton, Typography } from '@linode/ui';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import { useTheme } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
@@ -39,8 +38,6 @@ export const KubeSummaryPanel = React.memo((props: Props) => {
   const { data: account } = useAccount();
   const { showControlPlaneACL } = getKubeControlPlaneACL(account);
 
-  const theme = useTheme();
-
   const { enqueueSnackbar } = useSnackbar();
 
   const [drawerOpen, setDrawerOpen] = React.useState<boolean>(false);
@@ -95,7 +92,17 @@ export const KubeSummaryPanel = React.memo((props: Props) => {
     <Box>
       <EntityDetail
         body={
-          <Stack direction="row" flexWrap="wrap" gap={2} px={3} py={2}>
+          <Stack
+            sx={(theme) => ({
+              padding: theme.spacing(2),
+              [theme.breakpoints.down('sm')]: {
+                padding: theme.spacing(1),
+              },
+            })}
+            direction="row"
+            flexWrap="wrap"
+            gap={2}
+          >
             <KubeClusterSpecs cluster={cluster} />
             <KubeConfigDisplay
               clusterId={cluster.id}
@@ -135,12 +142,15 @@ export const KubeSummaryPanel = React.memo((props: Props) => {
         header={
           <EntityHeader>
             <Box
-              sx={{
+              sx={(theme) => ({
                 paddingBottom: theme.spacing(),
                 paddingLeft: theme.spacing(3),
                 paddingRight: theme.spacing(1),
                 paddingTop: theme.spacing(),
-              }}
+                [theme.breakpoints.down('sm')]: {
+                  paddingLeft: theme.spacing(2),
+                },
+              })}
             >
               <Typography variant="h2">Summary</Typography>
             </Box>