MetricCombobox: Fix overflowing parents (#97049)

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

@@ -1,10 +1,12 @@
+import { css } from '@emotion/css';
 import { useCallback, useState } from 'react';
 
-import { SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { EditorField, EditorFieldGroup, InputGroup } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { Button, InlineField, InlineFieldRow } from '@grafana/ui';
+import { Button, ComponentSize, InlineField, InlineFieldRow, useStyles2 } 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';
@@ -25,6 +27,9 @@ export interface MetricComboboxProps {
   variableEditor?: boolean;
 }
 
+const INLINE_FIELD_WIDTH = 20;
+const BUTTON_SIZE: ComponentSize = 'md';
+
 export function MetricCombobox({
   datasource,
   query,
@@ -86,6 +91,8 @@ export function MetricCombobox({
 
   const metricsExplorerEnabled = config.featureToggles.prometheusMetricEncyclopedia;
 
+  const styles = useStyles2(getMectricComboboxStyles);
+
   const asyncSelect = () => {
     return (
       <InputGroup>
@@ -101,6 +108,7 @@ export function MetricCombobox({
 
         {metricsExplorerEnabled ? (
           <Button
+            size={BUTTON_SIZE}
             tooltip="Open metrics explorer"
             aria-label="Open metrics explorer"
             variant="secondary"
@@ -130,19 +138,23 @@ export function MetricCombobox({
         />
       )}
       {variableEditor ? (
-        <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.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>
       ) : (
-        <EditorFieldGroup>
-          <EditorField label="Metric">{asyncSelect()}</EditorField>
-        </EditorFieldGroup>
+        <span className={styles.adaptToParentQueryEditor}>
+          <EditorFieldGroup>
+            <EditorField label="Metric">{asyncSelect()}</EditorField>
+          </EditorFieldGroup>
+        </span>
       )}
     </>
   );
@@ -171,3 +183,28 @@ 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 } from '@grafana/ui';
+import { Drawer, useStyles2 } from '@grafana/ui';
 
 import { PrometheusDatasource } from '../../datasource';
 import promqlGrammar from '../../promql';
@@ -58,6 +58,7 @@ export const PromQueryBuilder = memo<PromQueryBuilderProps>((props) => {
       checkLlms();
     }
   }, [prometheusPromQAIL]);
+  const styles = useStyles2(getPromQueryBuilderStyles);
 
   return (
     <>
@@ -71,9 +72,12 @@ export const PromQueryBuilder = memo<PromQueryBuilderProps>((props) => {
           />
         </Drawer>
       )}
-      <EditorRow>
-        <MetricsLabelsSection query={query} onChange={onChange} datasource={datasource} />
-      </EditorRow>
+      <span className={styles.addaptToParent}>
+        <EditorRow>
+          <MetricsLabelsSection query={query} onChange={onChange} datasource={datasource} />
+        </EditorRow>
+      </span>
+
       {initHints.length ? (
         <div
           className={css({
@@ -150,5 +154,9 @@ export const PromQueryBuilder = memo<PromQueryBuilderProps>((props) => {
     </>
   );
 });
-
+const getPromQueryBuilderStyles = () => ({
+  addaptToParent: css({
+    maxWidth: '100%',
+  }),
+});
 PromQueryBuilder.displayName = 'PromQueryBuilder';

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

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