[Controls] Fix cut off range slider popover (#128855) (#134147)

* Fix cut off popover for right most range control

* Reduce control label max-width and restore small control size

* Disable responsive flex groups in range slider control

* Update options list icon

* Updated time slider icon

(cherry picked from commit c6e9b7aefb)

src/plugins/controls/public/control_group/control_group.scss

@@ -57,7 +57,7 @@ $controlMinWidth: $euiSize * 14;
 }
 
 .controlFrame__labelToolTip {
-  max-width: 50%;
+  max-width: 40%;
 }
 
 .controlFrameWrapper {

src/plugins/controls/public/control_types/options_list/options_list_embeddable_factory.tsx

@@ -51,7 +51,7 @@ export class OptionsListEmbeddableFactory
   public isEditable = () => Promise.resolve(false);
 
   public getDisplayName = () => OptionsListStrings.getDisplayName();
-  public getIconType = () => 'list';
+  public getIconType = () => 'editorChecklist';
   public getDescription = () => OptionsListStrings.getDescription();
 
   public inject = createOptionsListInject();

src/plugins/controls/public/control_types/range_slider/range_slider.scss

@@ -31,6 +31,7 @@
 
   .rangeSliderAnchor__delimiter {
     background-color: unset;
+    padding: $euiSizeS*1.5 0;
   }
   .rangeSliderAnchor__fieldNumber {
     font-weight: $euiFontWeightBold;

src/plugins/controls/public/control_types/range_slider/range_slider_popover.tsx

@@ -110,7 +110,7 @@ export const RangeSliderPopover: FC<Props> = ({
       className="rangeSliderAnchor__button"
       data-test-subj={`range-slider-control-${id}`}
     >
-      <EuiFlexGroup gutterSize="none">
+      <EuiFlexGroup gutterSize="none" responsive={false}>
         <EuiFlexItem>
           <EuiFieldNumber
             controlOnly
@@ -178,8 +178,7 @@ export const RangeSliderPopover: FC<Props> = ({
       panelClassName="rangeSlider__panelOverride"
       closePopover={() => setIsPopoverOpen(false)}
       anchorPosition="downCenter"
-      initialFocus={false}
-      repositionOnScroll
+      attachToAnchor={false}
       disableFocusTrap
       onPanelResize={() => {
         if (rangeRef?.current) {
@@ -192,6 +191,7 @@ export const RangeSliderPopover: FC<Props> = ({
         className="rangeSlider__actions"
         gutterSize="none"
         data-test-subj="rangeSlider-control-actions"
+        responsive={false}
       >
         <EuiFlexItem>
           <EuiDualRange

src/plugins/controls/public/control_types/time_slider/time_slider_embeddable_factory.tsx

@@ -53,6 +53,7 @@ export class TimesliderEmbeddableFactory
   public isEditable = () => Promise.resolve(false);
 
   public getDisplayName = () => TimeSliderStrings.getDisplayName();
+  public getIconType = () => 'clock';
   public getDescription = () => TimeSliderStrings.getDescription();
 
   public inject = createOptionsListInject();