[SharedUX] Expand tag filter panel width to account for long tags (elastic#241828)

Closes elastic#239243

## Summary

- Expanded tag panel width based on longest tag length
- Only 3 possible fixed widths: 
  - `288px`: this is the current fixed width we have
  - `400px`
- `512px`: accounts for the longest tag name possible (there is a 50
char limitation set
[here](https://github.com/elastic/kibana/blob/896c04f7702cede9bc2c6ba387cb1c9f43f884e8/x-pack/platform/plugins/shared/saved_objects_tagging/common/validation.ts#L12))
- Took this approach to avoid directly setting a `512px` width to
account for the longest tag name possible which translated into a quite
large selectable which wasn't always needed. I didn't succeed at using a
`maxWidth` approach for content to dictate width.
- **Note for reviewer**: I don't think the simple string length
calculation could affect performance even if user has a very large
number of tags and I don't see any scenario where the width could "jump"
once already opened (if length is calculated before hand with all
available tags). If there are concerns, we could simply set a single
fixed width of `512px` (same approach we had before but wider and what
is currently done in Security Rules
[here](https://github.com/elastic/kibana/blob/98d4a6c74f781f416a5876160ab2cdf79b4b38cf/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_table_filters/tags_filter_popover.tsx#L15)).

### Testing
Before: 

<img width="1049" height="380" alt="Screenshot 2025-11-04 at 17 07 02"
src="https://github.com/user-attachments/assets/c4351ebf-75b7-498d-b965-e3cfd0cf8850"
/>

After:

<img width="1068" height="1302" alt="Screenshot 2025-11-04 at 17 09 15"
src="https://github.com/user-attachments/assets/e27c82d0-3113-4d7f-8bbb-47d60676c93b"
/>

Author: angeles-mb

src/platform/packages/shared/content-management/table_list_view_table/src/components/tag_filter_panel.tsx

@@ -36,6 +36,8 @@ import type { TagOptionItem } from './use_tag_filter_panel';
 
 const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
 const modifierKeyPrefix = isMac ? '⌘' : '^';
+const shortTagLength = 20;
+const mediumTagLength = 35;
 
 const clearSelectionBtnCSS = css`
   height: auto;
@@ -82,6 +84,10 @@ export const TagFilterPanel: FC<{}> = ({}) => {
     clearTagSelection,
   } = componentContext;
   const isSearchVisible = options.length > 10;
+  const longestTagLength = Math.max(0, ...options.map((option) => (option.label ?? '').length));
+  const panelWidthFromLongestTagLength =
+    (longestTagLength <= shortTagLength ? 18 : longestTagLength <= mediumTagLength ? 25 : 32) *
+    euiTheme.base;
 
   const searchBoxCSS = css`
     padding: ${euiTheme.size.s};
@@ -137,7 +143,7 @@ export const TagFilterPanel: FC<{}> = ({}) => {
         closePopover={closePopover}
         panelPaddingSize="none"
         anchorPosition="downCenter"
-        panelProps={{ css: { width: euiTheme.base * 18 } }}
+        panelProps={{ css: { width: panelWidthFromLongestTagLength } }}
       >
         <EuiPopoverTitle paddingSize="m" css={popoverTitleCSS}>
           <EuiFlexGroup>