diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/DiffableChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/DiffableChange.tsx
index 8c5547ec0c..9f5d73a7fc 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/DiffableChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/DiffableChange.tsx
@@ -1,6 +1,13 @@
import type React from 'react';
import type { FC, ReactNode } from 'react';
-import { Box, Button, styled, Tooltip, Typography } from '@mui/material';
+import {
+ Box,
+ Button,
+ type ButtonProps,
+ styled,
+ Tooltip,
+ Typography,
+} from '@mui/material';
import { Tab, Tabs, TabsList, TabPanel } from '@mui/base';
import BlockIcon from '@mui/icons-material/Block';
import TrackChangesIcon from '@mui/icons-material/TrackChanges';
@@ -188,6 +195,27 @@ const StyledButton = styled(Button)(({ theme }) => ({
},
}));
+export const StyledTab = styled(
+ ({ value, children }: ButtonProps & { value: number }) => (
+
+ {children}
+
+ ),
+)(({ theme }) => ({
+ position: 'absolute',
+ top: theme.spacing(-0.5),
+ left: theme.spacing(2),
+ transform: 'translateY(-50%)',
+ padding: theme.spacing(0.75, 1),
+ lineHeight: 1,
+ fontSize: theme.fontSizes.smallerBody,
+ color: theme.palette.text.primary,
+ background: theme.palette.background.application,
+ borderRadius: theme.shape.borderRadiusExtraLarge,
+ zIndex: theme.zIndex.fab,
+ textTransform: 'uppercase',
+}));
+
const UpdateStrategy: FC<{
change: IChangeRequestUpdateStrategy;
changeRequestState: ChangeRequestState;
@@ -239,18 +267,8 @@ const UpdateStrategy: FC<{
-
- value={0}
- slots={{ root: StyledButton }}
- >
- Change
-
-
- value={1}
- slots={{ root: StyledButton }}
- >
- View diff
-
+ Change
+ View diff
{actions}