From 8ac2d6c778a4d62165b5dfbea0224a4a05050c66 Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf@opencraft.com>
Date: Mon, 6 May 2024 16:00:06 +0300
Subject: [PATCH] fix: Auto expand blocktype filter menu to fit

---
 src/search-modal/FilterByBlockType.jsx | 2 +-
 src/search-modal/SearchModal.scss      | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/search-modal/FilterByBlockType.jsx b/src/search-modal/FilterByBlockType.jsx
index bbeda61abc..e184668bb0 100644
--- 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
index 94b31b0686..eb1f7b17cc 100644
--- 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