From 603ed96a25ee1a47e91b81eac6d0c4dcf3322e59 Mon Sep 17 00:00:00 2001
From: Kenny Johnson <105308787+papercircuit@users.noreply.github.com>
Date: Thu, 20 Apr 2023 19:07:16 -0400
Subject: [PATCH] Fix Lifecyce text-overlow issue in SearchFilter component.

Signed-off-by: Kenny Johnson <105308787+papercircuit@users.noreply.github.com>
---
 .../components/SearchFilter/SearchFilter.tsx  | 36 +++++++++++++------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx
index 78ef981ebc..b6dc077a89 100644
--- a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx
+++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx
@@ -37,6 +37,16 @@ const useStyles = makeStyles({
   label: {
     textTransform: 'capitalize',
   },
+  checkboxWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+  },
+  textWrapper: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
 });
 
 /**
@@ -120,17 +130,21 @@ export const CheckboxFilter = (props: SearchFilterComponentProps) => {
         <FormControlLabel
           key={value}
           control={
-            <Checkbox
-              color="primary"
-              tabIndex={-1}
-              inputProps={{ 'aria-labelledby': value }}
-              value={value}
-              name={value}
-              onChange={handleChange}
-              checked={((filters[name] as string[]) ?? []).includes(value)}
-            />
+            <div className={classes.checkboxWrapper}>
+              <Checkbox
+                color="primary"
+                tabIndex={-1}
+                inputProps={{ 'aria-labelledby': value }}
+                value={value}
+                name={value}
+                onChange={handleChange}
+                checked={((filters[name] as string[]) ?? []).includes(value)}
+              />
+              <div className={classes.textWrapper}>
+                <span>{value}</span>
+              </div>
+            </div>
           }
-          label={value}
         />
       ))}
     </FormControl>
@@ -197,7 +211,7 @@ export const SelectFilter = (props: SearchFilterComponentProps) => {
         </MenuItem>
         {values.map((value: string) => (
           <MenuItem key={value} value={value}>
-            {value}
+            <span>{value}</span>
           </MenuItem>
         ))}
       </Select>