diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx index 75ac1a1cf38..93e9c50534d 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx @@ -37,14 +37,14 @@ 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', }, @@ -52,6 +52,8 @@ const useStyles = makeStyles()((theme: Theme) => ({ 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 index 9b83a43b318..73ff402a509 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx +++ b/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(false); @@ -95,7 +92,17 @@ export const KubeSummaryPanel = React.memo((props: Props) => { + ({ + padding: theme.spacing(2), + [theme.breakpoints.down('sm')]: { + padding: theme.spacing(1), + }, + })} + direction="row" + flexWrap="wrap" + gap={2} + > { header={ ({ paddingBottom: theme.spacing(), paddingLeft: theme.spacing(3), paddingRight: theme.spacing(1), paddingTop: theme.spacing(), - }} + [theme.breakpoints.down('sm')]: { + paddingLeft: theme.spacing(2), + }, + })} > Summary