fix: long flag names push table to overflow and flag descriptions are not truncated (#9350)

Addresses two issues related to flag names and descriptions overflowing:

1: In the project flag overview, long flag names push the environments
off screen. This is handled by setting overflow-wrap: anywhere on the
offending text. The text will now use ellipses instead.

Before full-width: 

![image](https://github.com/user-attachments/assets/1c63481a-6733-4f6e-a3a7-46c9035c38f7)

Before narrower:

![image](https://github.com/user-attachments/assets/86cf3531-8259-42f0-9905-4a22dd7f98a7)


After full-width:

![image](https://github.com/user-attachments/assets/e13fa6ff-4cbe-4f6e-8530-b089a8343c65)

After narrower:

![image](https://github.com/user-attachments/assets/c4df0e5d-e32f-4909-9351-afc864383c7b)

2: On the flag page, long descriptions are rendered in their entirety,
even if that's not sensible. They are now truncated after five lines.
There is a tooltip that shows the full text, or you can go the flag
settings to see the full description.

Before:

![image](https://github.com/user-attachments/assets/121ffeac-b92b-4b9b-bb79-17bf5d4ef734)


After:

![image](https://github.com/user-attachments/assets/cd4ff0c2-e110-42c1-8ce6-e0e897823420)


After (with tooltip):

![image](https://github.com/user-attachments/assets/90c147e4-a397-4e60-8318-9a08c4e069aa)


---

Note, I don't think this is necessarily the perfect solution (it'd be
nice to get tooltips for overflowing flag names a "show full
description" disclosure button instead of the stupidly long tooltip),
but I think it's a step in the right direction.

frontend/src/component/common/DialogFormTemplate/ConfigButtons/shared.styles.tsx

@@ -21,7 +21,6 @@ export const StyledPopover = styled(Popover)(({ theme }) => ({
         paddingTop: theme.spacing(dropdownPadding),
         display: 'flex',
         flexDirection: 'column',
-
         gap: theme.spacing(1),
         maxHeight: '70vh',
     },

frontend/src/component/common/Table/cells/FeatureOverviewCell/FeatureOverviewCell.tsx

@@ -132,6 +132,7 @@ const FeatureName: FC<{
                     style={{
                         WebkitLineClamp: 1,
                         lineClamp: 1,
+                        overflowWrap: 'anywhere',
                     }}
                 >
                     <Highlighter search={searchQuery}>{feature}</Highlighter>

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx

@@ -16,6 +16,7 @@ import { TagRow } from './TagRow';
 import { capitalizeFirst } from 'utils/capitalizeFirst';
 import { Collaborators } from './Collaborators';
 import { EnvironmentVisibilityMenu } from './EnvironmentVisibilityMenu/EnvironmentVisibilityMenu';
+import { Truncator } from 'component/common/Truncator/Truncator';
 
 const StyledMetaDataContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
@@ -97,7 +98,9 @@ const FeatureOverviewMetaData: FC<FeatureOverviewMetaDataProps> = ({
                     {description ? (
                         <StyledMetaDataItem data-loading>
                             <StyledMetaDataItemText>
+                                <Truncator arrow lines={5} title={description}>
                                     {description}
+                                </Truncator>
                             </StyledMetaDataItemText>
                         </StyledMetaDataItem>
                     ) : null}

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -220,9 +220,6 @@ export const ProjectFeatureToggles = ({
                 header: 'Name',
                 cell: FeatureOverviewCell(onTagClick, onFlagTypeClick),
                 enableHiding: false,
-                meta: {
-                    width: '50%',
-                },
             }),
             columnHelper.accessor('createdAt', {
                 id: 'createdAt',