Filter dropdown on mobile extends out of the screen width

Filter dropdown on mobile extends out of the screen width

see attached screenshot.

As far as i can see, this is due to framework.css: includes/templates/default.catalog/css/framework.css

Possible solution:

    .dropdown.open {
        z-index: 999;
        width: 100%;
    }
}```
or 
```@media (max-width: calc(767px)) {
    #box-filter .filters .dropdown-menu .option {
        white-space: wrap;
    }
}```

You can also add the class dropdown-menu-end or dropdown-menu-right to class="dropdown-menu" in box_filter.inc.php. But that might affect them all. I'm not sure what a good solution is. Use 50% columns maybe?

Thank you @tim and @jackmaessen for your responses.

Based on @jackmaessen 's code, I used this code in framework.css

    .dropdown2 {
        position: relative;
    }

    /* Default styling for the main dropdown button */
    .dropdown2 [data-toggle="dropdown"] {
        color: #000000;
        background-color: #F0EBDA; /
        border-radius: 0px;
        border: 1px solid #666666;
    }

    /* Style for the dropdown menu */
    .dropdown-menu2 {
        z-index: 999;
        background-color: white;
    }

    /* When the dropdown is open, change the main button's background to a colour */
    .dropdown2.open [data-toggle="dropdown"] {
        background-color: #666666 !important; 
    color: #F0EBDA;
    text-align: center;
    }

    /* Make the dropdown menu background white when it is open */
    .dropdown2.open .dropdown-menu2 {
        background-color: white !important; 
    border-radius: 0px;
        border: 0px;    
    }

    .dropdown2.open {
        z-index: 999;
    }

    /* Fully dark overlay effect when dropdown is open */
    .dropdown-overlay {
        display: none; /* Initially hidden */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 1) !important;  /* Fully opaque black background */
        z-index: 998; /* Just below the dropdown */
    }

    /* Show overlay when the dropdown is open */
    .dropdown2.open ~ .dropdown-overlay {
        display: block;
    }
}

@media (max-width: calc(767px)) {
    .dropdown2 {
        position: relative;
    }

    /* Default styling for the main dropdown button */
    .dropdown2 [data-toggle="dropdown"] {
        color: #000000;
        background-color: #F0EBDA; 
        border-radius: 0px;
        border: 1px solid #666666;
    }

    /* Style for the dropdown menu */
    .dropdown-menu2 {
        z-index: 999;
        width: 100%; /* Ensures the dropdown menu is full width */
        background-color: white; /* Default dropdown menu background color */
    }

    /* When the dropdown is open, change the main button's background to a colour */
    .dropdown2.open [data-toggle="dropdown"] {
        background-color: #666666 !important; /* Changes the main button's background to a colour when clicked/open */
    color: #F0EBDA;
    text-align: center;
    text-transform: uppercase;
    }

    /* Make the dropdown menu background to a colour when it is open */
    .dropdown2.open .dropdown-menu2 {
        background-color: white !important; /* Change dropdown menu background to a colour */
    border-radius: 0px;
        border: 0px;    
    }

    /* Optional: Keep dropdown open at 100% width */
    .dropdown2.open {
        z-index: 999;
        width: 100%;
    }

    /* Fully dark overlay effect when dropdown is open */
    .dropdown-overlay {
        display: none; /* Initially hidden */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 1) !important;  /* Fully opaque black background */
        z-index: 998; /* Just below the dropdown */
    }

    /* Show overlay when the dropdown is open */
    .dropdown2.open ~ .dropdown-overlay {
        display: block;
    }
}```

also added in box_filter.inc.php the styles ( dropdown2, dropdown-menu2 etc.)

and created this designs:

Awesome work! You did a good job

its not perfect as once you click the menu in mobile it extends 100% and it first makes you tink that something dissapeared, but tested it on my wife she didnt notice it :)

Thanks for the initial code.

Hey truly awesome work @cyber83 indeed.
Did you learn any improvements we can include for the next version release?

I am currently applyiing my ideas and change the front end based on the products we provide.
I keep messing up the code than I go back repair them and spend a lot of time at the moment as I am checking the modifications on mobile devices as well.
Love the LiteCart code by the way - after 10 years of trying so many solutions I can honestly say this is fun to work with

It is, isn't it :) And wait for the code base of 3.0 making things even more simple.