chore: add descriptions to accordion headers (#8452)

This commits adds descriptions to the accordion headers in the
personal dashboard.


![image](https://github.com/user-attachments/assets/d7b7aeff-3a69-45f7-ab42-23228a49132b)

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -79,6 +79,25 @@ const MainContent = styled('div')(({ theme }) => ({
     gap: theme.spacing(2),
 }));
 
+const AccordionSummaryText = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(0.5),
+}));
+
+const AccordionSummaryHeader = styled('h3')(({ theme }) => ({
+    color: theme.palette.text.primary,
+    fontSize: theme.typography.body1.fontSize,
+    fontWeight: theme.typography.body2.fontWeight,
+    margin: 0,
+}));
+
+const AccordionSummarySubtitle = styled(Typography)(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.body2.fontSize,
+    fontWeight: theme.typography.body2.fontWeight,
+}));
+
 export const PersonalDashboard = () => {
     const { user } = useAuthUser();
     const { trackEvent } = usePlausibleTracker();
@@ -157,9 +176,15 @@ export const PersonalDashboard = () => {
                     id='projects-panel-header'
                     aria-controls='projects-panel-content'
                 >
-                    <Typography variant='body1' component='h3'>
+                    <AccordionSummaryText>
-                        My projects
+                        <AccordionSummaryHeader>
-                    </Typography>
+                            My projects
+                        </AccordionSummaryHeader>
+                        <AccordionSummarySubtitle>
+                            Favorite projects, projects you own, and projects
+                            you are a member of
+                        </AccordionSummarySubtitle>
+                    </AccordionSummaryText>
                 </StyledAccordionSummary>
                 <StyledAccordionDetails>
                     <MyProjects
@@ -187,9 +212,14 @@ export const PersonalDashboard = () => {
                     id='flags-panel-header'
                     aria-controls='flags-panel-content'
                 >
-                    <Typography variant='body1' component='h3'>
+                    <AccordionSummaryText>
-                        My feature flags
+                        <AccordionSummaryHeader>
-                    </Typography>
+                            My feature flags
+                        </AccordionSummaryHeader>
+                        <AccordionSummarySubtitle>
+                            Feature flags you have created or favorited
+                        </AccordionSummarySubtitle>
+                    </AccordionSummaryText>
                 </StyledAccordionSummary>
                 <StyledAccordionDetails>
                     <MyFlags

frontend/src/component/project/ProjectList/ProjectList.tsx

@@ -112,7 +112,7 @@ export const ProjectList = () => {
                 <SearchHighlightProvider value={state.query || ''}>
                     <ProjectGroup
                         sectionTitle='My projects'
-                        sectionSubtitle='Favorite projects, projects you own or projects you are a member of.'
+                        sectionSubtitle='Favorite projects, projects you own, and projects you are a member of'
                         HeaderActions={
                             <ProjectsListSort
                                 sortBy={state.sortBy}