feat: personal dashboard scrollbars and spacing (#8493)

frontend/src/component/personalDashboard/ActionBox.tsx

@@ -2,7 +2,7 @@ import { styled } from '@mui/material';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 
 const Container = styled('article')(({ theme }) => ({
-    padding: theme.spacing(4, 2),
+    padding: theme.spacing(1, 2),
     display: 'flex',
     gap: theme.spacing(3),
     flexDirection: 'column',

frontend/src/component/personalDashboard/LatestProjectEvents.tsx

@@ -44,6 +44,10 @@ const StyledUserAvatar = styled(UserAvatar)(({ theme }) => ({
     marginTop: theme.spacing(0.5),
 }));
 
+const StyledMarkdown = styled(Markdown)(({ theme }) => ({
+    wordBreak: 'break-all',
+}));
+
 export const LatestProjectEvents: FC<{
     latestEvents: PersonalDashboardProjectDetailsSchema['latestEvents'];
 }> = ({ latestEvents }) => {
@@ -73,10 +77,10 @@ export const LatestProjectEvents: FC<{
                                         locationSettings.locale,
                                     )}
                                 </Timestamp>
-                                <Markdown>
+                                <StyledMarkdown>
                                     {event.summary ||
                                         'No preview available for this event'}
-                                </Markdown>
+                                </StyledMarkdown>
                             </div>
                         </Event>
                     );

frontend/src/component/personalDashboard/MyFlags.tsx

@@ -115,7 +115,6 @@ export const MyFlags: FC<Props> = ({
                             disablePadding={true}
                             sx={{
                                 height: '100%',
-                                overflow: 'auto',
                             }}
                         >
                             {flagData.flags.map((flag) => (

frontend/src/component/personalDashboard/SharedComponents.tsx

@@ -106,7 +106,6 @@ export const listItemStyle = (theme: Theme) => ({
 });
 
 export const StyledList = styled(List)(({ theme }) => ({
-    overflowY: 'auto',
     maxHeight: '400px',
 
     ...onWideContainer({