diff --git a/packages/manager/.changeset/pr-11172-changed-1730121782530.md b/packages/manager/.changeset/pr-11172-changed-1730121782530.md
new file mode 100644
index 00000000000..6993a57ddf2
--- /dev/null
+++ b/packages/manager/.changeset/pr-11172-changed-1730121782530.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Linode details summary VPC IPv4 text to copy object ([#11172](https://github.com/linode/manager/pull/11172))
diff --git a/packages/manager/src/components/EntityDetail/EntityDetail.tsx b/packages/manager/src/components/EntityDetail/EntityDetail.tsx
index d019a34c5ff..a72f98c7a77 100644
--- a/packages/manager/src/components/EntityDetail/EntityDetail.tsx
+++ b/packages/manager/src/components/EntityDetail/EntityDetail.tsx
@@ -51,8 +51,7 @@ const GridBody = styled(Grid, {
? undefined
: `1px solid ${theme.borderColors.borderTable}`, // @TODO LKE-E: This conditional can be removed when/if the footer is introduced in M3-8348
borderTop: `1px solid ${theme.borderColors.borderTable}`,
- paddingBottom: theme.spacing(),
- paddingRight: theme.spacing(),
+ padding: theme.spacing(),
}));
const GridFooter = styled(Grid, {
diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts
index 3205fd5973b..41dce23f752 100644
--- a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts
+++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts
@@ -88,6 +88,47 @@ export const sxLastListItem = {
paddingRight: 0,
};
+// ---------------------------------------------------------------------
+// VPC Label Styles
+// ---------------------------------------------------------------------
+
+export const StyledIPv4Box = styled(Box, { label: 'StyledIPv4Box' })(
+ ({ theme }) => ({
+ '&:hover .copy-tooltip > svg, & .copy-tooltip:focus > svg': {
+ opacity: 1,
+ },
+ display: 'flex',
+ [theme.breakpoints.down('md')]: {
+ margin: theme.spacing(0),
+ },
+ marginLeft: theme.spacing(2),
+ border: 0,
+ })
+);
+
+export const StyledIPv4Label = styled(Box, { label: 'StyledIPv4Label' })(
+ ({ theme }) => ({
+ color: theme.textColors.textAccessTable,
+ fontFamily: theme.font.bold,
+ backgroundColor: theme.name === 'light' ? theme.color.grey10 : theme.bg.app,
+ padding: '10px 24px 10px 10px',
+ alignContent: 'center',
+ })
+);
+
+export const StyledIPv4Item = styled(Box, { label: 'StyledIPv4Item' })(
+ ({ theme }) => ({
+ '& div': {
+ fontSize: 15,
+ },
+ alignItems: 'center',
+ backgroundColor: theme.tokens.interaction.Background.Secondary,
+ display: 'flex',
+ fontFamily: '"UbuntuMono", monospace, sans-serif',
+ padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
+ })
+);
+
export const StyledListItem = styled(Typography, { label: 'StyledTypography' })(
({ theme }) => ({
borderRight: `1px solid ${theme.borderColors.borderTypography}`,
diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx
index ac5a5480935..f6f300ca60a 100644
--- a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx
+++ b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx
@@ -24,9 +24,14 @@ import {
StyledColumnLabelGrid,
StyledLabelBox,
StyledListItem,
+ StyledIPv4Label,
+ StyledIPv4Item,
StyledSummaryGrid,
StyledVPCBox,
+ StyledCopyTooltip,
+ StyledGradientDiv,
sxLastListItem,
+ StyledIPv4Box,
} from './LinodeEntityDetail.styles';
import { ipv4TableID } from './LinodesDetail/LinodeNetworking/LinodeIPAddresses';
import { lishLink, sshLink } from './LinodesDetail/utilities';
@@ -40,6 +45,7 @@ import type {
} from '@linode/api-v4/lib/linodes/types';
import type { Subnet } from '@linode/api-v4/lib/vpcs';
import type { TypographyProps } from 'src/components/Typography';
+import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
interface LinodeEntityDetailProps {
id: number;
@@ -253,8 +259,10 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => {
display: 'flex',
flexDirection: 'column',
paddingLeft: '8px',
+ alignItems: 'start',
},
}}
+ alignItems="center"
container
direction="row"
spacing={2}
@@ -271,21 +279,29 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => {
-
+
- Subnets:
+ Subnet:
{' '}
{getSubnetsString(linodeAssociatedSubnets ?? [])}
-
-
-
- VPC IPv4:
- {' '}
- {configInterfaceWithVPC?.ipv4?.vpc}
-
-
+ {configInterfaceWithVPC?.ipv4?.vpc && (
+
+
+ VPC IPv4
+
+
+
+
+
+
+
+
+ )}
)}