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

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

@@ -34,6 +34,7 @@ import { ControlPanelProps, DefaultControlApi } from '../../controls/types';
 import { ControlError } from './control_error';
 
 import './control_panel.scss';
+import { isCompressed } from '../utils/is_compressed';
 
 const DragHandle = ({
   isEditable,
@@ -122,7 +123,6 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
   const isEditable = viewMode === ViewMode.EDIT;
   const controlWidth = width ?? DEFAULT_CONTROL_WIDTH;
   const controlGrow = grow ?? DEFAULT_CONTROL_GROW;
-
   return (
     <EuiFlexItem
       ref={setNodeRef}
@@ -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={isCompressed(api)}
           >
             <>
               {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,6 +173,7 @@ export const ControlGroupRenderer = ({
         getRuntimeStateForChild: () => {
           return runtimeState$.getValue();
         },
+        compressed: compressed ?? true,
       })}
       onApiAvailable={(controlGroupApi) => {
         const controlGroupRendererApi: ControlGroupRendererApi = {

src/plugins/controls/public/control_group/utils/is_compressed.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { apiHasParentApi } from '@kbn/presentation-publishing';
+
+export interface HasCompressed {
+  compressed: boolean;
+}
+
+export const apiHasCompressed = (unknownApi: unknown): unknownApi is HasCompressed => {
+  return Boolean(unknownApi) && typeof (unknownApi as HasCompressed).compressed === 'boolean';
+};
+
+export function isCompressed(api: unknown): boolean {
+  if (apiHasCompressed(api)) return api.compressed;
+  return apiHasParentApi(api) ? isCompressed(api.parentApi) : true;
+}

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

@@ -25,6 +25,7 @@ import {
   useBatchedPublishingSubjects,
 } from '@kbn/presentation-publishing';
 
+import { isCompressed } from '../../../../control_group/utils/is_compressed';
 import { OptionsListSelection } from '../../../../../common/options_list/options_list_selections';
 import { MIN_POPOVER_WIDTH } from '../../../constants';
 import { useOptionsListContext } from '../options_list_context_provider';
@@ -174,7 +175,7 @@ export const OptionsListControl = ({
   );
 
   return (
-    <EuiFilterGroup fullWidth compressed className={controlPanelClassName}>
+    <EuiFilterGroup fullWidth compressed={isCompressed(api)} className={controlPanelClassName}>
       <EuiInputPopover
         id={popoverId}
         ownFocus

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

@@ -92,6 +92,7 @@ export function QuickFilters({
           };
         }}
         timeRange={{ from: 'now-24h', to: 'now' }}
+        compressed={false}
       />
     </Container>
   );