[Observability] fix slo observability compressed styles to be not compressed

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

@@ -154,12 +154,10 @@ 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={classNames(
               'controlFrame__formControlLayout',
               {
@@ -191,6 +189,7 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
                 )}
               </>
             }
+            compressed
           >
             <>
               {blockingError && (

src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx

@@ -40,6 +40,7 @@ export interface ControlGroupRendererProps {
   timeRange?: TimeRange;
   query?: Query;
   dataLoading?: boolean;
+  compressed?: boolean;
 }
 
 export const ControlGroupRenderer = ({
@@ -50,6 +51,7 @@ export const ControlGroupRenderer = ({
   query,
   viewMode,
   dataLoading,
+  compressed,
 }: ControlGroupRendererProps) => {
   const id = useMemo(() => uuidv4(), []);
   const [regenerateId, setRegenerateId] = useState(uuidv4());
@@ -171,10 +173,12 @@ export const ControlGroupRenderer = ({
         getRuntimeStateForChild: () => {
           return runtimeState$.getValue();
         },
+        compressed,
       })}
       onApiAvailable={(controlGroupApi) => {
         const controlGroupRendererApi: ControlGroupRendererApi = {
           ...controlGroupApi,
+          compressed: compressed ?? true,
           reload: () => reload$.next(),
           updateInput: (newInput) => {
             updateInput(newInput);

src/plugins/controls/public/control_group/control_group_renderer/types.ts

@@ -13,7 +13,11 @@ import type { ControlGroupApi } from '../..';
 
 export type ControlGroupRendererApi = ControlGroupApi & {
   reload: () => void;
-
+  /**
+   * Passes the ability for styling to be compressed or not.
+   * @default true.
+   */
+  compressed: boolean;
   /**
    * @deprecated
    * Calling `updateInput` will cause the entire control group to be re-initialized.

src/plugins/controls/public/control_group/get_control_group_factory.tsx

@@ -199,6 +199,8 @@ export const getControlGroupEmbeddableFactory = () => {
             references,
           };
         },
+        compressed:
+          parentApi && typeof parentApi.compressed === 'boolean' ? parentApi.compressed : true,
         dataViews,
         labelPosition: labelPosition$,
         saveNotification$: apiHasSaveNotification(parentApi)

src/plugins/controls/public/control_group/types.ts

@@ -57,6 +57,7 @@ export type ControlGroupApi = PresentationContainer &
   PublishesTimeslice &
   PublishesDisabledActionIds &
   Partial<HasParentApi<PublishesUnifiedSearch> & HasSaveNotification & PublishesReload> & {
+    compressed: boolean;
     allowExpensiveQueries$: PublishingSubject<boolean>;
     autoApplySelections$: PublishingSubject<boolean>;
     ignoreParentSettings$: PublishingSubject<ParentIgnoreSettings | undefined>;

x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.scss

@@ -0,0 +1,13 @@
+
+.controlPanel--labelWrapper > label {
+  height: $euiFormControlHeight !important;
+  line-height: 3 !important;
+}
+
+.optionsListControl {
+  height: $euiFormControlHeight !important;
+}
+
+.optionsList--selectionText {
+  padding-top: 5px;
+}

x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx

@@ -14,6 +14,7 @@ import styled from 'styled-components';
 import { Filter } from '@kbn/es-query';
 import { isEmpty } from 'lodash';
 import { SearchState } from '../../hooks/use_url_search_state';
+import './quick_filters.scss';
 
 interface Props {
   initialState: SearchState;