fix segment changed name not showing (#10304)

Fixes a bug where we wouldn't show the changed segment name in segment
changes. This bug appears to have been around for a while, but this fix
does not touch the legacy version. Reintroduces the ChangeSegmentName
component to make the names stack correctly (vertically instead of
horizontally)

Before: 
<img width="993" alt="image"
src="https://github.com/user-attachments/assets/4bc24ad4-f754-4015-ba7b-4793c570fae8"
/>


After:
<img width="1010" alt="image"
src="https://github.com/user-attachments/assets/0e4d5956-3553-4ef2-979c-bdbb89b3c376"
/>

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

@@ -0,0 +1,18 @@
+import type { FC } from 'react';
+import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx';
+
+type ChangeSegmentNameProps = {
+    name: string;
+    previousName?: string;
+};
+
+export const ChangeSegmentName: FC<ChangeSegmentNameProps> = ({
+    name,
+    previousName,
+}) => {
+    return (
+        <span>
+            <NameWithChangeInfo newName={name} previousName={previousName} />
+        </span>
+    );
+};

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

@@ -17,7 +17,7 @@ import {
     Deleted,
 } from './Change.styles.tsx';
 import { SegmentDiff } from './SegmentDiff.tsx';
-import { NameWithChangeInfo } from './NameWithChangeInfo/NameWithChangeInfo.tsx';
+import { ChangeSegmentName } from './ChangeSegmentName.tsx';
 
 const ActionsContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -72,8 +72,8 @@ export const SegmentChangeDetails: FC<{
                         <ChangeItemWrapper>
                             <ChangeItemInfo>
                                 <Deleted>Deleting segment</Deleted>
-                                <NameWithChangeInfo
+                                <ChangeSegmentName
-                                    newName={change.payload.name}
+                                    name={change.payload.name}
                                     previousName={previousName}
                                 />
                             </ChangeItemInfo>
@@ -102,8 +102,9 @@ export const SegmentChangeDetails: FC<{
                         <ChangeItemWrapper>
                             <ChangeItemInfo>
                                 <Action>Editing segment</Action>
-                                <NameWithChangeInfo
+                                <ChangeSegmentName
-                                    newName={change.payload.name}
+                                    name={change.payload.name}
+                                    previousName={previousName}
                                 />
                             </ChangeItemInfo>
                             {actionsWithTabs}