fix: Auto expand blocktype filter menu to fit

openedx · May 6, 2024 · 8ac2d6c · 8ac2d6c
1 parent de408b5
commit 8ac2d6c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/search-modal/FilterByBlockType.jsx b/src/search-modal/FilterByBlockType.jsx
@@ -46,7 +46,7 @@ const FilterByBlockType = () => {
           name="block-type-filter"
           defaultValue={blockTypesFilter}
         >
-          <Menu style={{ boxShadow: 'none' }}>
+          <Menu className="block-type-refinement-menu" style={{ boxShadow: 'none' }}>
             {
               Object.entries(blockTypes).map(([blockType, count]) => (
                 <MenuItem

diff --git a/src/search-modal/SearchModal.scss b/src/search-modal/SearchModal.scss
@@ -47,6 +47,14 @@
     }
   }
 
+  // Options for the "filter by block type" menu
+  .pgn__menu.block-type-refinement-menu {
+    .pgn__menu-item {
+      // Make the "filter by block type" menu expand to fit longer block types names
+      width: 100%;
+    }
+  }
+
   .pgn__menu-item {
     // Fix a bug in Paragon menu dropdowns: the checkbox currently shrinks if the text is too long.
     // https://github.com/openedx/paragon/pull/3019