rebase and add some old stuff back

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.styles.tsx

@@ -1,7 +1,40 @@
 import { styled, Typography } from '@mui/material';
+import type { PropsWithChildren } from 'react';
 
-export const ChangeItemInfo = styled(Typography)(({ theme }) => ({
+const Action = styled(Typography)(({ theme }) => ({
+    whiteSpace: 'nowrap',
+}));
+
+export const Deleted = styled(Action)(({ theme }) => ({
+    color: theme.palette.error.main,
+    '::before': { content: '"- "' },
+}));
+
+export const Added = styled(Action)(({ theme }) => ({
+    '::before': { content: '"+ "' },
+    color: theme.palette.success.dark,
+}));
+
+export const AddedStrategy = styled(Added, {
+    shouldForwardProp: (prop) => prop !== 'disabled',
+})<{ disabled?: boolean }>(({ theme, disabled }) => ({
+    color: disabled ? theme.palette.text.disabled : undefined,
+}));
+
+const Change = styled('span')({
+    fontWeight: 'bold',
+});
+
+export const ChangeItemInfo = styled(
+    ({ children, ...props }: PropsWithChildren) => (
+        <Typography {...props}>
+            <Change>Change:</Change>
+            {children}
+        </Typography>
+    ),
+)(({ theme }) => ({
     display: 'flex',
+    justifyItems: 'flex-start',
     flexFlow: 'row',
     alignItems: 'center',
     flex: 'auto',

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx

@@ -35,6 +35,7 @@ const ChangeItemCreateEditDeleteWrapper = styled(Box)(({ theme }) => ({
     alignItems: 'center',
     marginBottom: theme.spacing(1),
     width: '100%',
+    flexFlow: 'row wrap',
 }));
 
 const StyledBox: FC<{ children?: React.ReactNode }> = styled(Box)(
@@ -324,13 +325,13 @@ export const StrategyChange: FC<{
     );
 
     const actionsWithTabs = (
-        <>
+        <div>
             <TabList>
                 <Tab>Change</Tab>
                 <Tab>View diff</Tab>
             </TabList>
             {actions}
-        </>
+        </div>
     );
 
     return (