UI Overlap and State Persistence in Filter Menus about twenty HOT 3 OPEN

To resolve the UI overlap and state persistence issues in the filter menus, follow these steps:

1. Adjust Positioning:

   • In MultipleFiltersDropdownContent.tsx, modify the positioning logic to display the sub-filter/filter type menu above and slightly to the side of the filter menu.

   // Example adjustment
   const subFilterMenuStyle = {
     position: 'absolute',
     top: '10px', // Adjust as needed
     left: 'calc(100% + 10px)', // Adjust as needed
     zIndex: 1000,
   };

2. State Management:

   • In useFilterDropdown.ts, ensure the state is reset when the sub-filter/filter type menu is closed.

   // Example state reset logic
   const closeSubFilterMenu = () => {
     setSubFilterMenuOpen(false);
     setSubFilterMenuState(initialState); // Reset state
   };

3. Remove Double Border:

   • In DropdownMenu.tsx, adjust the CSS to remove the double border.

   // Example CSS adjustment
   const dropdownMenuStyle = {
     border: 'none', // Remove existing border
     boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)', // Add shadow if needed
   };

These changes should address the UI overlap, state persistence, and double border issues.

References

from twenty.

Can I get assigned to this @Bonapara ?

from twenty.

Sure @rksingh2001, thanks for contributing!

from twenty.