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-ng/content-action-bar/si-content-action-bar.component.scss

@@ -1,5 +1,7 @@
+@use 'sass:map';
 @use '@siemens/element-theme/src/styles/variables/semantic-tokens';
 @use '@siemens/element-theme/src/styles/bootstrap/variables' as bootstrap-variables;
+@use '@siemens/element-theme/src/styles/variables/spacers';
 
 div > [si-content-action-bar-toggle] {
   // The siAutoCollapsableList directive reserves space for the overflow toggle by reading its
@@ -10,7 +12,7 @@ div > [si-content-action-bar-toggle] {
   // items and preventing resize-triggered expand/collapse from reaching a stable state.
   // The fixed inline-size guarantees a deterministic clientWidth at all times so the reserved
   // space matches the toggle's actual footprint the moment it becomes visible.
-  inline-size: calc(1.25rem + 2 * bootstrap-variables.$dropdown-item-padding-y);
+  inline-size: calc(1.25rem + 2 * map.get(spacers.$spacers, 4));
   justify-content: center;
   border-radius: semantic-tokens.$element-button-radius;
 }

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

@@ -90,7 +90,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;
@@ -169,6 +169,7 @@
   white-space: nowrap; // as with > li > a
   font-size: typography.$si-font-size-h5;
   font-weight: typography.$si-font-weight-h5;
+  line-height: bootstrap-variables.$dropdown-line-height;
 }
 
 .dropdown-divider {

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

@@ -434,6 +434,17 @@ $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-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-dot-size: 0.625rem;
+$badge-line-height: 1.25rem;
+$badge-height: calc($badge-line-height + 2 * $badge-padding-y);
+
 // Dropdowns
 //
 // Dropdown menu container and contents.
@@ -442,7 +453,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;
@@ -451,7 +463,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;
 
@@ -517,15 +529,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;
-$badge-dot-size: 0.625rem;
-
 // Modals
 
 // Padding applied to the modal body