Reverts "MetricCombobox: Fix overflowing parents" (#98868)

Revert MetricCombobox: Fix overflowing parents

https://github.com/grafana/grafana/pull/97049

packages/grafana-prometheus/src/querybuilder/components/MetricCombobox.tsx

@@ -1,11 +1,9 @@
-import { css } from '@emotion/css';
 import { useCallback, useState } from 'react';
 
-import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { SelectableValue } from '@grafana/data';
 import { EditorField, EditorFieldGroup, InputGroup } from '@grafana/experimental';
-import { Button, ComponentSize, InlineField, InlineFieldRow, useStyles2 } from '@grafana/ui';
+import { Button, InlineField, InlineFieldRow } from '@grafana/ui';
 import { Combobox, ComboboxOption } from '@grafana/ui/src/components/Combobox/Combobox';
-import { getPropertiesForButtonSize } from '@grafana/ui/src/components/Forms/commonStyles';
 
 import { PrometheusDatasource } from '../../datasource';
 import { regexifyLabelValuesQueryString } from '../parsingUtils';
@@ -26,9 +24,6 @@ export interface MetricComboboxProps {
   variableEditor?: boolean;
 }
 
-const INLINE_FIELD_WIDTH = 20;
-const BUTTON_SIZE: ComponentSize = 'md';
-
 export function MetricCombobox({
   datasource,
   query,
@@ -88,8 +83,6 @@ export function MetricCombobox({
     return metrics;
   }, [onGetMetrics]);
 
-  const styles = useStyles2(getMectricComboboxStyles);
-
   const asyncSelect = () => {
     return (
       <InputGroup>
@@ -103,7 +96,6 @@ export function MetricCombobox({
           createCustomValue
         />
         <Button
-          size={BUTTON_SIZE}
           tooltip="Open metrics explorer"
           aria-label="Open metrics explorer"
           variant="secondary"
@@ -130,23 +122,19 @@ export function MetricCombobox({
         />
       )}
       {variableEditor ? (
-        <span className={styles.adaptToParentVariableEditor}>
-          <InlineFieldRow>
-            <InlineField
-              label="Metric"
-              labelWidth={INLINE_FIELD_WIDTH}
-              tooltip={<div>Optional: returns a list of label values for the label name in the specified metric.</div>}
-            >
-              {asyncSelect()}
-            </InlineField>
-          </InlineFieldRow>
-        </span>
+        <InlineFieldRow>
+          <InlineField
+            label="Metric"
+            labelWidth={20}
+            tooltip={<div>Optional: returns a list of label values for the label name in the specified metric.</div>}
+          >
+            {asyncSelect()}
+          </InlineField>
+        </InlineFieldRow>
       ) : (
-        <span className={styles.adaptToParentQueryEditor}>
-          <EditorFieldGroup>
-            <EditorField label="Metric">{asyncSelect()}</EditorField>
-          </EditorFieldGroup>
-        </span>
+        <EditorFieldGroup>
+          <EditorField label="Metric">{asyncSelect()}</EditorField>
+        </EditorFieldGroup>
       )}
     </>
   );
@@ -175,28 +163,3 @@ const formatKeyValueStringsForLabelValuesQuery = (query: string, labelsFilters?:
 
   return formatPrometheusLabelFiltersToString(queryString, labelsFilters);
 };
-
-const getMectricComboboxStyles = (theme: GrafanaTheme2) => {
-  const { height } = getPropertiesForButtonSize(BUTTON_SIZE, theme);
-  const buttonSpace = parseInt(theme.spacing(height), 10);
-  const inlineFieldSpace = parseInt(theme.spacing(INLINE_FIELD_WIDTH), 10);
-  const widthToSubstract = inlineFieldSpace + buttonSpace;
-  return {
-    adaptToParentQueryEditor: css({
-      // Take metrics explorer button into account
-      maxWidth: `calc(100% - ${buttonSpace}px)`,
-    }),
-    adaptToParentVariableEditor: css({
-      maxWidth: '100%',
-      display: 'flex',
-      '[class*="InlineFieldRow"]': {
-        '> div': {
-          'label + div': {
-            // Take label and the metrics explorer button into account
-            maxWidth: `calc(100% - ${widthToSubstract}px)`,
-          },
-        },
-      },
-    }),
-  };
-};

packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx

@@ -6,7 +6,7 @@ import { DataSourceApi, PanelData } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { EditorRow } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { Drawer, useStyles2 } from '@grafana/ui';
+import { Drawer } from '@grafana/ui';
 
 import { PrometheusDatasource } from '../../datasource';
 import promqlGrammar from '../../promql';
@@ -58,7 +58,6 @@ export const PromQueryBuilder = memo<PromQueryBuilderProps>((props) => {
       checkLlms();
     }
   }, [prometheusPromQAIL]);
-  const styles = useStyles2(getPromQueryBuilderStyles);
 
   return (
     <>
@@ -72,12 +71,9 @@ export const PromQueryBuilder = memo<PromQueryBuilderProps>((props) => {
           />
         </Drawer>
       )}
-      <span className={styles.addaptToParent}>
-        <EditorRow>
-          <MetricsLabelsSection query={query} onChange={onChange} datasource={datasource} />
-        </EditorRow>
-      </span>
-
+      <EditorRow>
+        <MetricsLabelsSection query={query} onChange={onChange} datasource={datasource} />
+      </EditorRow>
       {initHints.length ? (
         <div
           className={css({
@@ -154,9 +150,5 @@ export const PromQueryBuilder = memo<PromQueryBuilderProps>((props) => {
     </>
   );
 });
-const getPromQueryBuilderStyles = () => ({
-  addaptToParent: css({
-    maxWidth: '100%',
-  }),
-});
+
 PromQueryBuilder.displayName = 'PromQueryBuilder';

packages/grafana-ui/src/components/Forms/InlineField.tsx

@@ -98,7 +98,6 @@ const getStyles = (theme: GrafanaTheme2, grow?: boolean, shrink?: boolean) => {
       position: 'relative',
       flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`,
       margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0`,
-      maxWidth: '100%',
     }),
     childContainer: css({
       flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`,

packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx

@@ -27,7 +27,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       flexWrap: 'wrap',
       alignContent: 'flex-start',
       rowGap: theme.spacing(0.5),
-      maxWidth: '100%',
     }),
   };
 };