Module:Navbox/styles.css

/* Keep your existing styles, but modify these specific rules */

/* Remove the nowrap constraint from list items */
.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li {
    white-space: normal;  /* Changed from nowrap to allow wrapping */
    display: inline-block;  /* Keep items inline while allowing breaks */
    padding-right: 0.5em;  /* Add some spacing between items */
}

/* Ensure the navbox list container allows proper flow */
td.navbox-list1 {
    text-align: left;
    border-left-width: 2px;
    border-left-style: solid;
    width: 100%;  /* Ensure full width is used */
}

/* Add this new style to handle wrapping within the list */
.navbox .hlist ul,
.navbox .hlist ol,
.navbox .hlist dl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;  /* Small gap between wrapped items */
    justify-content: flex-start;  /* Align items to the left */
    padding: 0.125em 0;
}

/* Ensure nested lists maintain proper wrapping */
.navbox .hlist dd dl,
.navbox .hlist dt dl,
.navbox .hlist li ol,
.navbox .hlist li ul {
    white-space: normal;
    width: 100%;  /* Full width for nested lists */
}

/* Optional: Add responsive handling for very small screens */
@media screen and (max-width: 480px) {
    .navbox .hlist dd,
    .navbox .hlist dt,
    .navbox .hlist li {
        padding-right: 0.25em;  /* Smaller padding on mobile */
    }
}