[Dashboard] Compressed Styles for Controls (#190636)

## Summary

Closes #190355

This builds off @ryankeairns work in
#189839 to have the compressed
styles for controls

Applied to new controls in example apps: 

![Screenshot 2024-08-27 at 1 45
45 PM](https://github.com/user-attachments/assets/748204e2-66c3-4638-bce8-3cad34337848)


Applied to existing dashboard controls:

![Screenshot 2024-08-27 at 1 35
25 PM](https://github.com/user-attachments/assets/af1796ef-2fa9-4760-bcc2-18a4d69dcdcb)

src/plugins/controls/public/control_group/component/control_frame_component.tsx

@@ -96,6 +96,7 @@ export const ControlFrame = ({
         'controlFrameFormControlLayout--twoLine': controlStyle === 'twoLine',
       })}
       fullWidth
+      compressed
       prepend={
         <>
           {(embeddable && customPrepend) ?? null}

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

@@ -6,7 +6,6 @@ $controlMinWidth: $euiSize * 14;
 .controlsWrapper {
   display: flex;
   align-items: center;
-  min-height: $euiSize * 4;
 
   .controlGroup--endButtonGroup {
     align-self: end;
@@ -47,7 +46,7 @@ $controlMinWidth: $euiSize * 14;
 
   .controlFrame__draggable {
     cursor: grabbing;
-    height: $euiButtonHeight;
+    height: $euiButtonHeightSmall;
     align-items: center;
     border-radius: $euiBorderRadius;
     font-weight: $euiFontWeightSemiBold;

src/plugins/controls/public/options_list/components/options_list.scss

@@ -8,7 +8,7 @@
   }
 
   .optionsList--filterBtn {
-    height: $euiButtonHeight;
+    height: $euiButtonHeightSmall;
 
     &.optionsList--filterBtnPlaceholder {
       color: $euiTextSubduedColor;

src/plugins/controls/public/options_list/components/options_list_control.tsx

@@ -214,6 +214,7 @@ export const OptionsListControl = ({
       className={classNames('optionsList--filterGroup', {
         'optionsList--filterGroupSingle': controlStyle !== 'twoLine',
       })}
+      compressed
     >
       <EuiInputPopover
         id={popoverId}

src/plugins/controls/public/range_slider/components/range_slider_control.tsx

@@ -170,6 +170,7 @@ export const RangeSliderControl: FC = () => {
         id={id}
         fullWidth
         showTicks
+        compressed
         step={step}
         ticks={ticks}
         levels={levels}

src/plugins/controls/public/react_controls/control_group/components/control_panel.scss

@@ -1,7 +1,7 @@
 .controlPanel {
   width: 100%;
   max-inline-size: 100% !important;
-  height: $euiButtonHeight;
+  height: $euiButtonHeightSmall;
   box-shadow: none !important;
   background-color: $euiFormBackgroundColor !important;
   border-radius: 0 $euiBorderRadius $euiBorderRadius 0 !important;
@@ -11,11 +11,12 @@
   }
 
   &--labelWrapper {
-    height: 100%;
+    height: $euiFormControlCompressedHeight;
 
     .controlPanel--label {
       @include euiTextTruncate;
       padding: 0;
+      height: $euiButtonHeightSmall;
     }
   }
 

src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx

@@ -155,10 +155,12 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
           data-test-subj="control-frame-title"
           fullWidth
           label={usingTwoLineLayout ? panelTitle || defaultPanelTitle || '...' : undefined}
+          display="rowCompressed"
         >
           <EuiFormControlLayout
             fullWidth
             isLoading={Boolean(dataLoading)}
+            compressed
             className="controlFrame__formControlLayout"
             prepend={
               <>

src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_control.tsx

@@ -173,7 +173,7 @@ export const OptionsListControl = ({
   );
 
   return (
-    <EuiFilterGroup fullWidth className={controlPanelClassName}>
+    <EuiFilterGroup fullWidth compressed className={controlPanelClassName}>
       <EuiInputPopover
         id={popoverId}
         ownFocus

src/plugins/controls/public/react_controls/controls/data_controls/range_slider/components/range_slider_control.tsx

@@ -193,6 +193,7 @@ export const RangeSliderControl: FC<Props> = ({
         min={displayedMin}
         max={displayedMax}
         isLoading={isLoading}
+        compressed
         inputPopoverProps={{
           className: controlPanelClassName,
           panelMinWidth: MIN_POPOVER_WIDTH,

src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx

@@ -39,6 +39,7 @@ export function TimeSliderAnchoredRange(props: Props) {
       max={props.timeRangeMax}
       step={props.stepSize}
       ticks={props.ticks}
+      compressed
     />
   );
 }

src/plugins/controls/public/react_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx

@@ -35,6 +35,7 @@ export function TimeSliderSlidingWindowRange(props: Props) {
       step={props.stepSize}
       ticks={props.ticks}
       isDraggable
+      compressed
     />
   );
 }

src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss

@@ -18,7 +18,6 @@
 .dshDashboardViewport-controls {
   margin: 0 $euiSizeS 0 $euiSizeS;
   padding-top: $euiSizeS;
-  padding-bottom: $euiSizeXS;
 }
 
 .dashboardViewport--screenshotMode  .controlsWrapper--empty {