begin fixing layout

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

@@ -1,6 +1,6 @@
 import type { FC, ReactNode } from 'react';
 import { Box, styled } from '@mui/material';
-import { ChangeItemWrapper } from './StrategyChange.tsx';
+import { ChangeItemInfo, ChangeItemWrapper } from './Change.styles.tsx';
 
 const ArchiveBox = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -16,7 +16,9 @@ export const ArchiveFeatureChange: FC<IArchiveFeatureChange> = ({
     actions,
 }) => (
     <ChangeItemWrapper>
-        <ArchiveBox>Archiving flag</ArchiveBox>
+        <ChangeItemInfo>
+            <ArchiveBox>Archiving flag</ArchiveBox>
+        </ChangeItemInfo>
         {actions}
     </ChangeItemWrapper>
 );

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

@@ -28,15 +28,23 @@ const Change = styled('span')({
 export const ChangeItemInfo = styled(
     ({ children, ...props }: PropsWithChildren) => (
         <Typography {...props}>
-            <Change>Change:</Change>
+            <Change>Change: </Change>
             {children}
         </Typography>
     ),
 )(({ theme }) => ({
-    display: 'flex',
-    justifyItems: 'flex-start',
-    flexFlow: 'row',
-    alignItems: 'center',
-    flex: 'auto',
-    gap: `1ch`,
+    // display: 'flex',
+    // justifyItems: 'flex-start',
+    // flexFlow: 'row',
+    // alignItems: 'center',
+    // flex: 'auto',
+    // gap: `1ch`,
+}));
+
+export const ChangeItemWrapper = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexFlow: 'row wrap',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: theme.spacing(1),
 }));

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

@@ -1,11 +1,11 @@
-import type { ReactNode, VFC } from 'react';
-import { Box, styled, Typography } from '@mui/material';
+import type { FC, ReactNode } from 'react';
+import { styled, Typography } from '@mui/material';
 import type {
     IChangeRequestAddDependency,
     IChangeRequestDeleteDependency,
 } from 'component/changeRequest/changeRequest.types';
 import { Link } from 'react-router-dom';
-import { ChangeItemWrapper } from './StrategyChange.tsx';
+import { ChangeItemInfo, ChangeItemWrapper } from './Change.styles';
 
 const StyledLink = styled(Link)(({ theme }) => ({
     maxWidth: '100%',
@@ -15,13 +15,13 @@ const StyledLink = styled(Link)(({ theme }) => ({
     },
 }));
 
-const AddDependencyWrapper = styled(Box)(({ theme }) => ({
+const AddDependencyText = styled(Typography)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
 }));
 
-export const DependencyChange: VFC<{
+export const DependencyChange: FC<{
     actions?: ReactNode;
     change: IChangeRequestAddDependency | IChangeRequestDeleteDependency;
     projectId: string;
@@ -32,8 +32,12 @@ export const DependencyChange: VFC<{
             {change.action === 'addDependency' && (
                 <>
                     <ChangeItemWrapper>
-                        <AddDependencyWrapper>
-                            <Typography color={'success.dark'}>
+                        <ChangeItemInfo>
+                            <Typography
+                                component='span'
+                                color={'success.dark'}
+                                // sx={{ display: 'inline' }}
+                            >
                                 + Adding dependency
                             </Typography>
                             <StyledLink
@@ -46,7 +50,7 @@ export const DependencyChange: VFC<{
                             {change.payload.variants?.length
                                 ? `(${change.payload.variants?.join(', ')})`
                                 : null}
-                        </AddDependencyWrapper>
+                        </ChangeItemInfo>
                         {actions}
                     </ChangeItemWrapper>
                 </>

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

@@ -9,11 +9,13 @@ import { formatStrategyName } from '../../../../../../utils/strategyNames.tsx';
 import type { IFeatureStrategy } from 'interfaces/strategy.ts';
 import { Tab, TabList, TabPanel, Tabs } from '../ChangeTabComponents.tsx';
 import { useUiFlag } from 'hooks/useUiFlag.ts';
+import { ChangeItemInfo, ChangeItemWrapper } from '../Change.styles.tsx';
 
-const ChangeItemInfo = styled(Box)({
+const ChangeContent = styled(Box)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-});
+    gap: theme.spacing(2),
+}));
 
 const StyledChangeHeader = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -91,9 +93,11 @@ export const EnvironmentStrategyExecutionOrder = ({
     if (useDiffableComponent) {
         return (
             <Tabs>
-                <ChangeItemInfo>
-                    <StyledChangeHeader>
-                        <p>Updating strategy execution order to</p>
+                <ChangeContent>
+                    <ChangeItemWrapper>
+                        <ChangeItemInfo>
+                            <p>Updating strategy execution order to</p>
+                        </ChangeItemInfo>
                         <div>
                             <TabList>
                                 <Tab>Change</Tab>
@@ -101,7 +105,7 @@ export const EnvironmentStrategyExecutionOrder = ({
                             </TabList>
                             {actions}
                         </div>
-                    </StyledChangeHeader>
+                    </ChangeItemWrapper>
                     <TabPanel>
                         <StyledStrategyExecutionWrapper>
                             {updatedStrategies.map((strategy, index) => (
@@ -120,13 +124,13 @@ export const EnvironmentStrategyExecutionOrder = ({
                             data={data}
                         />
                     </TabPanel>
-                </ChangeItemInfo>
+                </ChangeContent>
             </Tabs>
         );
     }
 
     return (
-        <ChangeItemInfo>
+        <ChangeContent>
             <StyledChangeHeader>
                 <TooltipLink
                     tooltip={
@@ -154,6 +158,6 @@ export const EnvironmentStrategyExecutionOrder = ({
                     </StyledStrategyContainer>
                 ))}
             </StyledStrategyExecutionWrapper>
-        </ChangeItemInfo>
+        </ChangeContent>
     );
 };

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

@@ -10,23 +10,25 @@ import { ViewableConstraintsList } from 'component/common/NewConstraintAccordion
 
 import { ChangeOverwriteWarning } from './ChangeOverwriteWarning/ChangeOverwriteWarning.tsx';
 import { Tab, TabList, TabPanel, Tabs } from './ChangeTabComponents.tsx';
-import { ChangeItemInfo } from './Change.styles.tsx';
+import { ChangeItemInfo, ChangeItemWrapper } from './Change.styles.tsx';
 import { ChangeSegmentName } from './ChangeSegmentName.tsx';
 import { SegmentDiff } from './SegmentDiff.tsx';
 
 const ChangeItemCreateEditWrapper = styled(Box)(({ theme }) => ({
     display: 'flex',
+    flexFlow: 'row wrap',
     gap: theme.spacing(1),
     alignItems: 'center',
     width: '100%',
     margin: theme.spacing(0, 0, 1, 0),
 }));
 
-export const ChangeItemWrapper = styled(Box)({
+const ActionsContainer = styled('div')(({ theme }) => ({
     display: 'flex',
-    justifyContent: 'space-between',
+    flexFlow: 'row wrap',
     alignItems: 'center',
-});
+    columnGap: theme.spacing(1),
+}));
 
 const SegmentContainer = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'conflict',
@@ -58,13 +60,13 @@ export const SegmentChangeDetails: FC<{
         changeRequestState === 'Applied' ? snapshotSegment : currentSegment;
 
     const actionsWithTabs = (
-        <>
+        <ActionsContainer>
             <TabList>
                 <Tab>Change</Tab>
                 <Tab>View diff</Tab>
             </TabList>
             {actions}
-        </>
+        </ActionsContainer>
     );
 
     return (

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

@@ -1,7 +1,7 @@
 import type { ReactNode, VFC } from 'react';
 import { Box } from '@mui/material';
 import { Badge } from 'component/common/Badge/Badge';
-import { ChangeItemWrapper } from './StrategyChange.tsx';
+import { ChangeItemInfo, ChangeItemWrapper } from './Change.styles';
 
 interface IToggleStatusChange {
     enabled: boolean;
@@ -14,15 +14,17 @@ export const ToggleStatusChange: VFC<IToggleStatusChange> = ({
 }) => {
     return (
         <ChangeItemWrapper>
-            <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                New status
-                <Badge
-                    sx={(theme) => ({ marginLeft: theme.spacing(1) })}
-                    color={enabled ? 'success' : 'error'}
-                >
-                    {enabled ? ' Enabled' : 'Disabled'}
-                </Badge>
-            </Box>
+            <ChangeItemInfo>
+                <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+                    New status
+                    <Badge
+                        sx={(theme) => ({ marginLeft: theme.spacing(1) })}
+                        color={enabled ? 'success' : 'error'}
+                    >
+                        {enabled ? ' Enabled' : 'Disabled'}
+                    </Badge>
+                </Box>
+            </ChangeItemInfo>
             {actions}
         </ChangeItemWrapper>
     );