get rid of p > p errors

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

@@ -1,8 +1,8 @@
 import type { FC, ReactNode } from 'react';
-import { Box, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { ChangeItemInfo, ChangeItemWrapper } from './Change.styles.tsx';
 
-const ArchiveBox = styled(Box)(({ theme }) => ({
+const ArchiveBox = styled('span')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     color: theme.palette.error.main,

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

@@ -1,9 +1,11 @@
 import { styled, Typography } from '@mui/material';
 import type { PropsWithChildren } from 'react';
 
-const Action = styled(Typography)(({ theme }) => ({
-    whiteSpace: 'nowrap',
-}));
+export const Action = styled(({ children, ...props }: PropsWithChildren) => (
+    <Typography component='span' {...props}>
+        {children}
+    </Typography>
+))(({ theme }) => ({}));
 
 export const Deleted = styled(Action)(({ theme }) => ({
     color: theme.palette.error.main,

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

@@ -1,6 +1,4 @@
 import type { FC } from 'react';
-import { styled } from '@mui/material';
-import { textTruncated } from 'themes/themeStyles';
 import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx';
 
 type ChangeSegmentNameProps = {
@@ -8,17 +6,7 @@ type ChangeSegmentNameProps = {
     previousName?: string;
 };
 
-const Truncated = styled('div')(() => ({
-    ...textTruncated,
-    maxWidth: 500,
-    display: 'flex',
-}));
-
 export const ChangeSegmentName: FC<ChangeSegmentNameProps> = ({
     name,
     previousName,
-}) => (
-    <Truncated>
-        <NameWithChangeInfo previousName={previousName} newName={name} />
-    </Truncated>
-);
+}) => <NameWithChangeInfo previousName={previousName} newName={name} />;

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

@@ -96,7 +96,7 @@ export const EnvironmentStrategyExecutionOrder = ({
                 <ChangeContent>
                     <ChangeItemWrapper>
                         <ChangeItemInfo>
-                            <p>Updating strategy execution order to</p>
+                            <span>Updating strategy execution order to</span>
                         </ChangeItemInfo>
                         <div>
                             <TabList>

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

@@ -3,7 +3,7 @@ import { Typography, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { textTruncated } from 'themes/themeStyles';
 
-const Truncated = styled('div')(() => ({
+const Truncated = styled('span')(() => ({
     ...textTruncated,
     maxWidth: 500,
 }));
@@ -30,7 +30,7 @@ export const NameWithChangeInfo: FC<{
                 condition={Boolean(newName)}
                 show={
                     <Truncated>
-                        <Typography>{newName}</Typography>
+                        <Typography component='span'>{newName}</Typography>
                     </Truncated>
                 }
             />

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

@@ -47,10 +47,11 @@ const DeleteReleasePlan: FC<{
                         sx={(theme) => ({
                             color: theme.palette.error.main,
                         })}
+                        component='span'
                     >
                         - Deleting release plan
                     </Typography>
-                    <Typography>{releasePlan.name}</Typography>
+                    <Typography component='span'>{releasePlan.name}</Typography>
                     {actions}
                 </ChangeItemInfo>
             </ChangeItemWrapper>
@@ -86,10 +87,12 @@ const StartMilestone: FC<{
         <Tabs>
             <ChangeItemWrapper>
                 <ChangeItemInfo>
-                    <Typography color='success.dark'>
+                    <Typography component='span' color='success.dark'>
                         + Start milestone
                     </Typography>
-                    <Typography>{newMilestone.name}</Typography>
+                    <Typography component='span'>
+                        {newMilestone.name}
+                    </Typography>
                 </ChangeItemInfo>
                 <div>
                     <TabList>
@@ -158,10 +161,12 @@ const AddReleasePlan: FC<{
             <>
                 <ChangeItemWrapper>
                     <ChangeItemInfo>
-                        <Typography color='success.dark'>
+                        <Typography component='span' color='success.dark'>
                             + Adding release plan
                         </Typography>
-                        <Typography>{planPreview.name}</Typography>
+                        <Typography component='span'>
+                            {planPreview.name}
+                        </Typography>
                         {actions}
                     </ChangeItemInfo>
                 </ChangeItemWrapper>
@@ -174,7 +179,7 @@ const AddReleasePlan: FC<{
         <Tabs>
             <ChangeItemWrapper>
                 <ChangeItemInfo>
-                    <Typography>
+                    <Typography component='span'>
                         Replacing{' '}
                         <TooltipLink
                             tooltip={
@@ -203,7 +208,7 @@ const AddReleasePlan: FC<{
                         </TooltipLink>{' '}
                         release plan with
                     </Typography>
-                    <Typography>{planPreview.name}</Typography>
+                    <Typography component='span'>{planPreview.name}</Typography>
                 </ChangeItemInfo>
                 <div>
                     <TabList>

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

@@ -77,6 +77,7 @@ export const SegmentChangeDetails: FC<{
                         <ChangeItemWrapper>
                             <ChangeItemInfo>
                                 <Typography
+                                    component='span'
                                     sx={(theme) => ({
                                         color: theme.palette.error.main,
                                     })}
@@ -112,7 +113,9 @@ export const SegmentChangeDetails: FC<{
                         />
                         <ChangeItemCreateEditWrapper>
                             <ChangeItemInfo>
-                                <Typography>Editing segment</Typography>
+                                <Typography component='span'>
+                                    Editing segment
+                                </Typography>
                                 <ChangeSegmentName name={change.payload.name} />
                             </ChangeItemInfo>
                             {actionsWithTabs}

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

@@ -84,18 +84,30 @@ const EditHeader: FC<{
     willBeDisabled?: boolean;
 }> = ({ wasDisabled = false, willBeDisabled = false }) => {
     if (wasDisabled && willBeDisabled) {
-        return <Typography color='text.secondary'>Editing strategy</Typography>;
+        return (
+            <Typography component='span' color='text.secondary'>
+                Editing strategy
+            </Typography>
+        );
     }
 
     if (!wasDisabled && willBeDisabled) {
-        return <Typography color='error.dark'>Editing strategy</Typography>;
+        return (
+            <Typography component='span' color='error.dark'>
+                Editing strategy
+            </Typography>
+        );
     }
 
     if (wasDisabled && !willBeDisabled) {
-        return <Typography color='success.dark'>Editing strategy</Typography>;
+        return (
+            <Typography component='span' color='success.dark'>
+                Editing strategy
+            </Typography>
+        );
     }
 
-    return <Typography>Editing strategy</Typography>;
+    return <Typography component='span'>Editing strategy</Typography>;
 };
 
 const hasDiff = (object: unknown, objectToCompare: unknown) =>
@@ -125,6 +137,7 @@ const DeleteStrategy: FC<{
             <ChangeItemCreateEditDeleteWrapper>
                 <ChangeItemInfo>
                     <Typography
+                        component='span'
                         sx={(theme) => ({
                             color: theme.palette.error.main,
                         })}