[Embeddable Rebuild] [Controls] Fix apply button style bugs (#189433)

Closes https://github.com/elastic/kibana/issues/189303

## Summary

> [!NOTE]
> This PR has **no** user-facing changes - all work is contained in the
`examples` plugin.

This fixes the placement of both the time slider play button and the
control group apply button:

| Before | After |
|--------|--------|
|
![image](https://github.com/user-attachments/assets/a7854539-5758-45e0-b25e-676d09dddac1)
|
![image](https://github.com/user-attachments/assets/c2d14b0e-a974-41cc-9db9-a097cb3ca803)
|

It also removes the tooltip when the apply button is enabled - this is
due to a known EUI bug where the tooltip gets stuck when a button
switches from "enabled" to "disabled" (and vice versa).

### Checklist

- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

examples/controls_example/public/react_controls/control_group/components/control_group.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { BehaviorSubject } from 'rxjs';
 import {
   DndContext,
@@ -98,64 +98,84 @@ export function ControlGroup({
     };
   }, [controlGroupApi]);
 
+  const ApplyButtonComponent = useMemo(() => {
+    return (
+      <EuiButtonIcon
+        size="m"
+        disabled={!hasUnappliedSelections}
+        iconSize="m"
+        display="fill"
+        color={'success'}
+        iconType={'check'}
+        data-test-subj="controlGroup--applyFiltersButton"
+        aria-label={ControlGroupStrings.management.getApplyButtonTitle(hasUnappliedSelections)}
+        onClick={applySelections}
+      />
+    );
+  }, [hasUnappliedSelections, applySelections]);
+
   return (
-    <EuiPanel borderRadius="m" paddingSize="none" color={draggingId ? 'success' : 'transparent'}>
-      <EuiFlexGroup alignItems="center" gutterSize="s" wrap={true}>
+    <EuiPanel
+      borderRadius="m"
+      paddingSize="none"
+      color={draggingId ? 'success' : 'transparent'}
+      className="controlsWrapper"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+        direction="row"
+        responsive={false}
+        data-test-subj="controls-group"
+      >
         {!isInitialized && <EuiLoadingChart />}
-        <DndContext
-          onDragStart={({ active }) => setDraggingId(`${active.id}`)}
-          onDragEnd={onDragEnd}
-          onDragCancel={() => setDraggingId(null)}
-          sensors={sensors}
-          measuring={{
-            droppable: {
-              strategy: MeasuringStrategy.BeforeDragging,
-            },
-          }}
-        >
-          <SortableContext items={controlsInOrder} strategy={rectSortingStrategy}>
-            {controlsInOrder.map(({ id, type }) => (
-              <ControlRenderer
-                key={id}
-                uuid={id}
-                type={type}
-                getParentApi={() => controlGroupApi}
-                onApiAvailable={(controlApi) => {
-                  controlsManager.setControlApi(id, controlApi);
-                }}
-                isControlGroupInitialized={isInitialized}
-              />
-            ))}
-          </SortableContext>
-          <DragOverlay>
-            {draggingId ? (
-              <ControlClone
-                key={draggingId}
-                labelPosition={labelPosition}
-                controlApi={controlsManager.getControlApi(draggingId)}
-              />
-            ) : null}
-          </DragOverlay>
-        </DndContext>
-        {!autoApplySelections && (
-          <EuiFlexItem grow={false}>
-            <EuiToolTip
-              content={ControlGroupStrings.management.getApplyButtonTitle(hasUnappliedSelections)}
-            >
-              <EuiButtonIcon
-                size="m"
-                disabled={!hasUnappliedSelections}
-                iconSize="m"
-                display="fill"
-                color={'success'}
-                iconType={'check'}
-                data-test-subj="controlGroup--applyFiltersButton"
-                aria-label={ControlGroupStrings.management.getApplyButtonTitle(
-                  hasUnappliedSelections
-                )}
-                onClick={applySelections}
-              />
-            </EuiToolTip>
+        <EuiFlexItem>
+          <DndContext
+            onDragStart={({ active }) => setDraggingId(`${active.id}`)}
+            onDragEnd={onDragEnd}
+            onDragCancel={() => setDraggingId(null)}
+            sensors={sensors}
+            measuring={{
+              droppable: {
+                strategy: MeasuringStrategy.BeforeDragging,
+              },
+            }}
+          >
+            <SortableContext items={controlsInOrder} strategy={rectSortingStrategy}>
+              <EuiFlexGroup className="controlGroup" alignItems="center" gutterSize="s" wrap={true}>
+                {controlsInOrder.map(({ id, type }) => (
+                  <ControlRenderer
+                    key={id}
+                    uuid={id}
+                    type={type}
+                    getParentApi={() => controlGroupApi}
+                    onApiAvailable={(controlApi) => {
+                      controlsManager.setControlApi(id, controlApi);
+                    }}
+                    isControlGroupInitialized={isInitialized}
+                  />
+                ))}
+              </EuiFlexGroup>
+            </SortableContext>
+            <DragOverlay>
+              {draggingId ? (
+                <ControlClone
+                  key={draggingId}
+                  labelPosition={labelPosition}
+                  controlApi={controlsManager.getControlApi(draggingId)}
+                />
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        </EuiFlexItem>
+        {isInitialized && !autoApplySelections && (
+          <EuiFlexItem grow={false} className="controlGroup--endButtonGroup">
+            {hasUnappliedSelections ? (
+              ApplyButtonComponent
+            ) : (
+              <EuiToolTip content={ControlGroupStrings.management.getApplyButtonTitle(false)}>
+                {ApplyButtonComponent}
+              </EuiToolTip>
+            )}
           </EuiFlexItem>
         )}
       </EuiFlexGroup>

examples/controls_example/public/react_controls/timeslider_control/components/index.scss

@@ -1,5 +1,8 @@
-.timeSlider-playToggle:enabled {
-  background-color: $euiColorPrimary !important;
+.timeSlider-playToggle {
+  height: 100%;
+  &:enabled {
+    background-color: $euiColorPrimary !important;
+  }
 }
 
 .timeSlider-prependButton {

examples/controls_example/public/react_controls/timeslider_control/components/play_button.tsx

@@ -41,7 +41,11 @@ export function PlayButton(props: Props) {
     />
   );
   return props.disablePlayButton ? (
-    <EuiToolTip content={TimeSliderStrings.control.getPlayButtonDisabledTooltip()}>
+    <EuiToolTip
+      display="block"
+      anchorClassName="timeSlider-playToggle"
+      content={TimeSliderStrings.control.getPlayButtonDisabledTooltip()}
+    >
       {Button}
     </EuiToolTip>
   ) : (