Different heights of buttons in Button.Group when text is rendered in more than one line due to lack of space

[victorfunes]

• [ Yes ] I have searched the Issues to see if this bug has already been reported
• [ Yes ] I have tested the latest version

Steps to reproduce

1. Define a Button.group with different number and length of words and shrink the space available for all the component

Current behavior

Now each button has a different height depending on the words of each button:

Expected behavior

All the buttons should have the same height.

Context

I was checking responsive design for mobile devices, and I have seen this strange behaviour.

        <Button.Group>
          <Button size="sm" color="light" onPointerDown={filterLastYear}>
            <span className={internalFilterDate === FilterDate.LAST_YEAR ? selectedButtonClassname : undefined}>
              Last year
            </span>
          </Button>
          <Button size="sm" color="light" onPointerDown={filterLastMonth}>
            <span className={internalFilterDate === FilterDate.LAST_MONTH ? selectedButtonClassname : undefined}>
              Last 30 days
            </span>
          </Button>
          <Button size="sm" color="light" onPointerDown={filterLastWeek}>
            <span className={internalFilterDate === FilterDate.LAST_WEEK ? selectedButtonClassname : undefined}>
              Last 7 days
            </span>
          </Button>
          <Button size="sm" color="light" onPointerDown={filterAlways}>
            <span className={internalFilterDate === FilterDate.ALWAYS ? selectedButtonClassname : undefined}>
              Always
            </span>
          </Button>
        </Button.Group>

[000000armor]

@rluders Hi! I opened a PR with a fix. Please check it when it's possible.

[SutuSebastian]

Fixed by #1498 in [email protected] release.