chore(1-3349): no border for event timeline / dropdowns to the right (#9252)

Removes the border between the accordion summary and its contents for
the event timeline, and moves dropdown selectors to the right to avoid
overcrowding on the left.


![image](https://github.com/user-attachments/assets/b0df4c11-8e61-46f8-b844-349a709bd4e9)

frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx

@@ -94,14 +94,7 @@ export const EventTimelineHeader = ({
         />
     );
 
-    return (
+    const TimeSpanFilter = () => (
-        <>
-            <StyledCol>
-                <StyledTimelineEventsCount>
-                    {totalEvents} event
-                    {totalEvents === 1 ? '' : 's'}
-                    <HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' />
-                </StyledTimelineEventsCount>
         <StyledFilter
             select
             size='small'
@@ -109,9 +102,8 @@ export const EventTimelineHeader = ({
             value={timeSpan.key}
             onChange={(e) =>
                 setTimeSpan(
-                            timeSpanOptions.find(
+                    timeSpanOptions.find(({ key }) => key === e.target.value) ||
-                                ({ key }) => key === e.target.value,
+                        timeSpanOptions[0],
-                            ) || timeSpanOptions[0],
                 )
             }
         >
@@ -121,10 +113,26 @@ export const EventTimelineHeader = ({
                 </MenuItem>
             ))}
         </StyledFilter>
-                {frontendHeaderRefactor && <EnvironmentFilter />}
+    );
-            </StyledCol>
+
-            {!frontendHeaderRefactor && (
+    return (
+        <>
             <StyledCol>
+                <StyledTimelineEventsCount>
+                    {totalEvents} event
+                    {totalEvents === 1 ? '' : 's'}
+                    <HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' />
+                </StyledTimelineEventsCount>
+                {!frontendHeaderRefactor && <TimeSpanFilter />}
+            </StyledCol>
+            <StyledCol>
+                {frontendHeaderRefactor ? (
+                    <>
+                        <TimeSpanFilter />
+                        <EnvironmentFilter />
+                    </>
+                ) : (
+                    <>
                         <EventTimelineHeaderTip />
                         <EnvironmentFilter />
                         <Tooltip title='Hide event timeline' arrow>
@@ -143,8 +151,9 @@ export const EventTimelineHeader = ({
                                 <CloseIcon />
                             </IconButton>
                         </Tooltip>
-                </StyledCol>
+                    </>
                 )}
+            </StyledCol>
         </>
     );
 };

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -71,11 +71,16 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
     '&>.MuiAccordionSummary-content.MuiAccordionSummary-content': {
         margin: '0',
     },
+}));
+
+const StyledAccordionSummaryWithBorder = styled(StyledAccordionSummary)(
+    ({ theme }) => ({
         "&[aria-expanded='true']": {
             // only add the border when it's open
             borderBottom: `1px solid ${theme.palette.divider}`,
         },
-}));
+    }),
+);
 
 const StyledAccordionDetails = styled(AccordionDetails)({
     padding: 0,
@@ -231,7 +236,7 @@ export const PersonalDashboard = () => {
                 expanded={expandProjects ?? true}
                 onChange={() => toggleSectionState('projects')}
             >
-                <StyledAccordionSummary
+                <StyledAccordionSummaryWithBorder
                     expandIcon={
                         <ExpandMore titleAccess='Toggle projects section' />
                     }
@@ -247,7 +252,7 @@ export const PersonalDashboard = () => {
                             you are a member of
                         </AccordionSummarySubtitle>
                     </AccordionSummaryText>
-                </StyledAccordionSummary>
+                </StyledAccordionSummaryWithBorder>
                 <StyledAccordionDetails>
                     <MyProjects
                         owners={personalDashboard?.projectOwners ?? []}
@@ -266,7 +271,7 @@ export const PersonalDashboard = () => {
                 expanded={expandFlags ?? true}
                 onChange={() => toggleSectionState('flags')}
             >
-                <StyledAccordionSummary
+                <StyledAccordionSummaryWithBorder
                     expandIcon={
                         <ExpandMore titleAccess='Toggle flags section' />
                     }
@@ -281,7 +286,7 @@ export const PersonalDashboard = () => {
                             Feature flags you have created or favorited
                         </AccordionSummarySubtitle>
                     </AccordionSummaryText>
-                </StyledAccordionSummary>
+                </StyledAccordionSummaryWithBorder>
                 <StyledAccordionDetails>
                     <MyFlags
                         hasProjects={projects?.length > 0}