Merge pull request #1570 from afwillia/SWC-7229

SWC-7229 - Fix overflow on EnumFacetFilter
Sage-Bionetworks · Feb 13, 2025 · ed11a14 · ed11a14
2 parents b4758cd + 3d771a8
commit ed11a14
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/...ct-client/src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.stories.tsx b/...ct-client/src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.stories.tsx
@@ -42,6 +42,27 @@ const facetValues: RenderedFacetValue[] = [
   { value: 'foo', displayText: 'foo', count: 100, isSelected: false },
   { value: 'bar', displayText: 'bar', count: 50, isSelected: false },
   { value: 'baz', displayText: 'baz', count: 25, isSelected: false },
+  {
+    value: 'veryLongValue',
+    displayText:
+      'Very_long-text_that-will_overflow_the_sidebar_if_not-handled-correctly',
+    count: 525600,
+    isSelected: false,
+  },
+  {
+    value: 'veryLongValue2',
+    displayText:
+      'string_with_underscores_that_will_overflow_if_not_handled_correctly',
+    count: 42,
+    isSelected: false,
+  },
+  {
+    value: 'veryLongValue3',
+    displayText:
+      'a-long-string-with-hyphens-that-will-overflow-if-not-handled-correctly',
+    count: 75,
+    isSelected: false,
+  },
   { value: 'value1', displayText: 'value1', count: 10, isSelected: false },
   { value: 'value2', displayText: 'value2', count: 9, isSelected: false },
   { value: 'value3', displayText: 'value3', count: 8, isSelected: false },

diff --git a/...eact-client/src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.tsx b/...eact-client/src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.tsx
@@ -42,6 +42,9 @@ export function EnumFacetFilterOption(props: EnumFacetFilterOptionProps) {
       <FormControlLabel
         control={control}
         className="EnumFacetFilter__checkbox"
+        sx={{
+          overflowWrap: 'anywhere',
+        }}
         onClick={event => event.stopPropagation()}
         onChange={(_event, newValue) => {
           onChange(newValue)