Fix overflow issue on kubernetes summary for smaller screens

linode · Dec 6, 2024 · 24c24bb · 24c24bb
1 parent 7609507
commit 24c24bb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx b/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,

diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx
@@ -95,7 +95,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}