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
@@ -714,7 +720,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,7 +122,6 @@ const generateStyle = (
     },
     colorMixerButtonContainer: {
       label: 'colorPicker__colorMixerButtonContainer',
-      alignSelf: 'flex-start',
       marginInlineStart: componentTheme.colorMixerButtonContainerLeftMargin
     },
     popoverContentContainer: {