refactor(theme): use only a min-block-size for .dropdown-item

The largest item in a menu item is the badge, so extend line-height to
that and adjust padding instead. There's no longer a requirement for
a fixed height, rather a min height so that items w/o text content get
the proper height

Author: dr-itz

projects/element-theme/src/styles/bootstrap/_badges.scss

@@ -20,13 +20,13 @@
   padding-inline: variables.$badge-padding-x;
   margin-block: 0;
   margin-inline: map.get(spacers.$spacers, 4);
-  line-height: 1.25rem;
+  line-height: variables.$badge-line-height;
   flex-shrink: 0;
   font-size: typography.$si-font-size-body;
   font-weight: typography.$si-font-weight-body;
   max-inline-size: 24.5ch;
   // Make min-inline-size equal the badge height to create a circular badge when there's only one character.
-  min-inline-size: calc(1.25rem + 2 * #{variables.$badge-padding-y}); // 1.75rem = same as height
+  min-inline-size: variables.$badge-height;
   text-overflow: ellipsis;
   overflow: hidden;
   text-align: center;

projects/element-theme/src/styles/bootstrap/_dropdowns.scss

@@ -81,7 +81,7 @@
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
-  block-size: calc(1lh + 2 * bootstrap-variables.$dropdown-item-padding-y);
+  min-block-size: calc(1lh + 2 * bootstrap-variables.$dropdown-item-padding-y);
   inline-size: 100%;
   padding-block: bootstrap-variables.$dropdown-item-padding-y;
   padding-inline: bootstrap-variables.$dropdown-item-padding-x;

projects/element-theme/src/styles/bootstrap/_variables.scss

@@ -437,6 +437,16 @@ $nav-tabs-link-hover-border-color: transparent transparent $nav-tabs-border-colo
 $nav-tabs-link-active-color: semantic-tokens.$element-action-secondary-text-hover !default;
 $nav-tabs-link-active-bg: transparent !default;
 
+// Badges
+$badge-font-size: typography.$si-font-size-body;
+$badge-line-height: 1.25rem;
+$badge-font-weight: typography.$si-font-weight-body;
+$badge-color: semantic-tokens.$element-text-inverse !default;
+$badge-padding-y: map.get(spacers.$spacers, 1);
+$badge-padding-x: map.get(spacers.$spacers, 4);
+$badge-border-radius: 0.75rem;
+$badge-height: calc($badge-line-height + 2 * $badge-padding-y);
+
 // Dropdowns
 //
 // Dropdown menu container and contents.
@@ -445,7 +455,8 @@ $dropdown-padding-x: 0 !default;
 $dropdown-padding-y: map.get(spacers.$spacers, 4) !default;
 $dropdown-spacer: 0.125rem !default;
 $dropdown-font-size: $font-size-base !default;
-$dropdown-line-height: $line-height-base;
+// this is to have room for icon and badges
+$dropdown-line-height: $badge-height;
 $dropdown-color: $body-color !default;
 $dropdown-bg: semantic-tokens.$element-base-1 !default;
 $dropdown-border-radius: semantic-tokens.$element-radius-2 !default;
@@ -454,7 +465,7 @@ $dropdown-divider-margin-y: 4px !default;
 $dropdown-box-shadow: elevation.$element-elevation-2 !default;
 $dropdown-link-color: semantic-tokens.$element-text-primary !default;
 $dropdown-link-disabled-color: semantic-tokens.$element-text-disabled !default;
-$dropdown-item-padding-y: map.get(spacers.$spacers, 4);
+$dropdown-item-padding-y: map.get(spacers.$spacers, 2);
 $dropdown-item-padding-x: map.get(spacers.$spacers, 5);
 $dropdown-header-color: semantic-tokens.$element-text-primary !default;
 
@@ -520,14 +531,6 @@ $popover-arrow-color: $popover-bg !default;
 
 $popover-arrow-outer-color: $popover-border-color !default;
 
-// Badges
-$badge-font-size: typography.$si-font-size-body;
-$badge-font-weight: typography.$si-font-weight-body;
-$badge-color: semantic-tokens.$element-text-inverse !default;
-$badge-padding-y: map.get(spacers.$spacers, 1);
-$badge-padding-x: map.get(spacers.$spacers, 4);
-$badge-border-radius: 0.75rem;
-
 // Modals
 
 // Padding applied to the modal body