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%;