Fix global namespaces dropdown loading styles

With the move to Carbon 11 the ComboBox and Dropdown skeleton states
have changes, and the component props are slightly different.

Remove the obsolete `inline` prop, and update the styles to account
for the updated components to prevent the loading styles overflowing
the header and causing a layout shift on other pages too.

packages/components/src/components/TooltipDropdown/TooltipDropdown.jsx

@@ -35,12 +35,12 @@ const TooltipDropdown = ({
  disabled,
  emptyText,
  id,
- inline,
  items = defaults.items,
  label,
  loading = false,
  onChange,
  selectedItem,
+ size = 'md',
  titleText,
  ...rest
 }) => {
@@ -55,9 +55,9 @@ const TooltipDropdown = ({
  <span className={`${carbonPrefix}--label`}>{titleText}</span>
  )}
  <DropdownSkeleton
- className={`${carbonPrefix}--combo-box ${className || ''}`}
+ className={`${carbonPrefix}--combo-box ${carbonPrefix}--list-box ${carbonPrefix}--list-box--${size} ${className || ''}`}
+ hideLabel
  id={id}
- inline={inline}
  />
  </div>
  );
@@ -87,13 +87,13 @@ const TooltipDropdown = ({
  }
  })}
  id={id}
- inline={inline}
  items={options}
  itemToString={itemToString}
  key={key}
  onChange={onChange}
  placeholder={options.length === 0 ? emptyString : label}
  selectedItem={selectedItem}
+ size={size}
  titleText={titleText}
  translateWithId={getTranslateWithId(intl)}
  {...rest}

src/scss/App.scss

@@ -95,6 +95,10 @@ body {
  margin-inline-start: 16rem;
 }
 
+.#{$prefix}--header .#{$prefix}--list-box__wrapper:has(.#{$prefix}--list-box.#{$prefix}--skeleton) {
+ inline-size: 245px;
+}
+
 .#{$prefix}--modal-header,
 .#{$prefix}--modal-content {
  inline-size: 100%;