fix(1-3489): strategy dragging is broken in env overview (#9538)

Fixes strategy dragging in project envs. Not sure why this works, but
apparently, making it a variable instead of react component takes care
of it?

Author: thomasheartman

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/EnvironmentAccordionBody.tsx

@@ -238,8 +238,8 @@ export const EnvironmentAccordionBody = ({
         );
     };
 
-    const Strategies = () => {
-        return strategies.length < 50 || !manyStrategiesPagination ? (
+    const strategyList =
+        strategies.length < 50 || !manyStrategiesPagination ? (
             <StyledContentList>
                 {strategies.map((strategy, index) => (
                     <StyledListItem key={strategy.id}>
@@ -287,7 +287,6 @@ export const EnvironmentAccordionBody = ({
                 />
             </PaginatedStrategyContainer>
         );
-    };
 
     return (
         <StyledAccordionBodyInnerContainer>
@@ -305,12 +304,12 @@ export const EnvironmentAccordionBody = ({
                         {strategies.length > 0 ? (
                             <li>
                                 <StrategySeparator />
-                                <Strategies />
+                                {strategyList}
                             </li>
                         ) : null}
                     </>
                 ) : strategies.length > 0 ? (
-                    <Strategies />
+                    strategyList
                 ) : null}
             </StyledContentList>
         </StyledAccordionBodyInnerContainer>

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/ProjectEnvironmentStrategyDraggableItem.tsx

@@ -85,6 +85,7 @@ export const ProjectEnvironmentStrategyDraggableItem = ({
                 onDragStartRef={onDragStartRef}
                 onDragOver={onDragOver}
                 index={index}
+                isDragging={isDragging}
                 headerItemsRight={
                     <>
                         {draftChange && !isSmallScreen ? (

frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneCard.tsx

@@ -115,6 +115,7 @@ const StyledAccordionFooter = styled('div')(({ theme }) => ({
     justifyContent: 'flex-end',
     gap: theme.spacing(3),
     backgroundColor: 'inherit',
+    borderTop: `1px solid ${theme.palette.divider}`,
 }));
 
 const StyledIconButton = styled(IconButton)(({ theme }) => ({
@@ -324,12 +325,11 @@ export const MilestoneCard = ({
                 height: ref.current?.offsetHeight || 0,
             });
 
-            if (ref?.current) {
-                event.dataTransfer.effectAllowed = 'move';
-                event.dataTransfer.setData('text/html', ref.current.outerHTML);
-                event.dataTransfer.setDragImage(ref.current, 20, 20);
-            }
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/html', ref.current.outerHTML);
+            event.dataTransfer.setDragImage(ref.current, 20, 20);
         };
+
     const onStrategyDragEnd = () => {
         setDragItem(null);
         onReOrderStrategies();