fix(ui-color-picker): fix mixer button alignment and visual jump

Fixed two issues with the ColorPicker mixer button:
1. Alignment calculation returning 0 due to timing - measurement now happens
   after CSS-in-JS styles are applied using requestAnimationFrame
2. Visual jump on load - button now starts bottom-aligned and switches to
   top-aligned after calculation completes, minimizing the jump

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: balzss

packages/ui-color-picker/src/ColorPicker/index.tsx

@@ -129,7 +129,13 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
 
   handleInputContainerRef = (el: Element | null) => {
     this.inputContainerRef = el
-    this.setLabelHeight()
+
+    if (el) {
+      // Defer measurement until after layout is complete and CSS-in-JS styles are applied
+      requestAnimationFrame(() => {
+        this.setLabelHeight()
+      })
+    }
   }
 
   popoverContentRef: HTMLDivElement | null = null
@@ -488,15 +494,16 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
       }
       isShowingContent={this.state.openColorPicker}
       onShowContent={() => {
-        this.setState({ openColorPicker: true, mixedColor: this.state.hexCode })
-      }}
-      onHideContent={() => {
         this.setState({
-          openColorPicker: false,
+          openColorPicker: true,
+          mixedColor: this.state.hexCode,
           calculatedPopoverMaxHeight: undefined,
           isHeightCalculated: false
         })
       }}
+      onHideContent={() => {
+        this.setState({ openColorPicker: false })
+      }}
       on="click"
       screenReaderLabel={this.props.popoverScreenReaderLabel}
       shouldContainFocus
@@ -714,7 +721,10 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
         {!this.isSimple && (
           <div
             css={this.props.styles?.colorMixerButtonContainer}
-            style={{ paddingTop: this.state.labelHeight }}
+            style={{
+              alignSelf: this.state.labelHeight > 0 ? 'flex-start' : 'flex-end',
+              paddingTop: this.state.labelHeight
+            }}
           >
             <div css={this.props.styles?.colorMixerButtonWrapper}>
               {this.renderPopover()}

packages/ui-color-picker/src/ColorPicker/styles.ts

@@ -122,13 +122,14 @@ const generateStyle = (
     },
     colorMixerButtonContainer: {
       label: 'colorPicker__colorMixerButtonContainer',
-      alignSelf: 'flex-start',
       marginInlineStart: componentTheme.colorMixerButtonContainerLeftMargin
     },
     popoverContentContainer: {
       label: 'colorPicker__popoverContentContainer',
       maxHeight: calculatedPopoverMaxHeight || popoverMaxHeight || '100vh',
-      overflow: 'auto',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      scrollbarGutter: 'stable',
       display: 'flex',
       flexDirection: 'column',
       opacity: state.isHeightCalculated ? 1 : 0,