fix truncation

src/plugins/presentation_util/public/components/controls/control_frame/control_frame_component.tsx

@@ -88,7 +88,9 @@ export const ControlFrame = ({
         <>
           {customPrepend ?? null}
           {usingTwoLineLayout ? undefined : (
-            <EuiFormLabel htmlFor={embeddableId}>{title}</EuiFormLabel>
+            <EuiFormLabel className="controlFrame--formControlLayout__label" htmlFor={embeddableId}>
+              {title}
+            </EuiFormLabel>
           )}
         </>
       }

src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss

@@ -1,3 +1,8 @@
+$smallControl: $euiSize * 14;
+$mediumControl: $euiSize * 25;
+$largeControl: $euiSize * 50;
+$controlMinWidth: $euiSize * 14;
+
 .controlGroup {
   margin-left: $euiSizeXS;
   overflow-x: clip; // sometimes when using auto width, removing a control can cause a horizontal scrollbar to appear.
@@ -6,6 +11,18 @@
 .controlFrame--cloneWrapper {
   width: max-content;
 
+  &-small {
+    width: $smallControl;
+  }
+
+  &-medium {
+    width: $mediumControl;
+  }
+
+  &-large {
+    width: $largeControl;
+  }
+
   .euiFormLabel, div {
     cursor: grabbing !important; // prevents cursor flickering while dragging the clone
   }
@@ -20,7 +37,7 @@
     @include euiFormControlDefaultShadow;
     font-weight: $euiFontWeightSemiBold;
     background-color: $euiFormInputGroupLabelBackground;
-    min-width: 200px;
+    min-width: $controlMinWidth;
   }
 
   .controlFrame--formControlLayout, .draggableButton {
@@ -43,9 +60,14 @@
 
   .controlFrame--formControlLayout {
     width: 100%;
-    min-width: $euiSize * 14;
+    min-width: $controlMinWidth;
     transition:background-color .1s, color .1s;
 
+    &__label {
+      @include euiTextTruncate;
+      max-width: 50%;
+    }
+
     &:not(.controlFrame--formControlLayout-clone) {
       .controlFrame--dragHandle {
         cursor: grab;
@@ -62,16 +84,18 @@
     }
   }
 
+
+
   &-small {
-    width: $euiSize * 14;
+    width: $smallControl;
   }
 
   &-medium {
-    width: $euiSize * 25;
+    width: $mediumControl;
   }
 
   &-large {
-    width: $euiSize * 50;
+    width: $largeControl;
   }
 
   &-insertBefore,

src/plugins/presentation_util/public/components/controls/control_group/component/control_group_component.tsx

@@ -128,7 +128,11 @@ export const ControlGroup = ({ controlGroupContainer, openFlyout }: ControlGroup
           </SortableContext>
           <DragOverlay>
             {draggingId ? (
-              <ControlClone embeddableId={draggingId} container={controlGroupContainer} />
+              <ControlClone
+                width={controlGroupContainer.getInput().panels[draggingId].width}
+                embeddableId={draggingId}
+                container={controlGroupContainer}
+              />
             ) : null}
           </DragOverlay>
         </DndContext>

src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx

@@ -132,16 +132,23 @@ const SortableControlInner = forwardRef<
 export const ControlClone = ({
   embeddableId,
   container,
+  width,
 }: {
   embeddableId: string;
   container: ControlGroupContainer;
+  width: ControlWidth;
 }) => {
   const embeddable = useChildEmbeddable({ embeddableId, container });
-  console.log(embeddable, 'embedabble');
-  console.log(container.getInput().controlStyle, 'container');
 
   return (
-    <EuiFlexItem className={'controlFrame--cloneWrapper'}>
+    <EuiFlexItem
+      className={classNames('controlFrame--cloneWrapper', {
+        'controlFrame--cloneWrapper-small': width === 'small',
+        'controlFrame--cloneWrapper-medium': width === 'medium',
+        'controlFrame--cloneWrapper-large': width === 'large',
+      })}
+      // className={'controlFrame--cloneWrapper'}
+    >
       {container.getInput().controlStyle === 'twoLine' ? (
         <EuiFormLabel>{embeddable?.getInput().title}</EuiFormLabel>
       ) : undefined}