Skip to content

Clean up conditional `col-` classes in `nav_dropdown_button.vue`

Description

In the nav_dropdown_button.vue we are using old school bootstrap col classes and conditionally applying them. There's probably a flexbox solution that allows us to remove the conditional applying of utility classes.

Context

The following discussion from !24508 (merged) should be addressed:

  • @mishunov started a discussion: (+1 comment)

    nitpick: we do not need to hardcode col-7 here as long as the Merge Request part that follows after, has a defined width (in the form of .col-5). We can make this part simpler:

    <span class="col-auto text-truncate flex-fill">...

    This will work for both scenarios.

    Unfortunately, it looks like this doesn't work 😞

    Before with col-7 With col-auto flex-fill
    Screen_Shot_2020-02-13_at_7.56.28_AM Screen_Shot_2020-02-13_at_7.56.02_AM

    I agree that there's probably a more flexy way to do this (without using row and col)... I'll create a follow up ~"Accepting merge requests" issue 😄

Edited by Paul Slaughter