From 1f77c8c7776031059c9aa206968d08f282ae71b5 Mon Sep 17 00:00:00 2001
From: Gareth Dawson <gareth.dawson@grafana.com>
Date: Tue, 28 Mar 2023 15:32:16 +0100
Subject: [PATCH] Loki: update height of conflicting filters (#65451)

* fix height of elements

* Update public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx

Co-authored-by: Matias Chomicki <matyax@gmail.com>

* run prittier to pass drone

---------

Co-authored-by: Matias Chomicki <matyax@gmail.com>
---
 .../querybuilder/shared/OperationEditor.tsx   | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
index d17fa46b9ca..d17cebd4105 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
@@ -4,7 +4,7 @@ import { Draggable } from 'react-beautiful-dnd';
 
 import { DataSourceApi, GrafanaTheme2 } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
-import { Button, Icon, InlineField, Tooltip, useStyles2 } from '@grafana/ui';
+import { Button, Icon, InlineField, Tooltip, useTheme2 } from '@grafana/ui';
 import { isConflictingFilter } from 'app/plugins/datasource/loki/querybuilder/operationUtils';
 import { LokiOperationId } from 'app/plugins/datasource/loki/querybuilder/types';
 
@@ -44,10 +44,15 @@ export function OperationEditor({
   flash,
   highlight,
 }: Props) {
-  const styles = useStyles2(getStyles);
   const def = queryModeller.getOperationDef(operation.id);
   const shouldFlash = useFlash(flash);
 
+  const isConflicting =
+    operation.id === LokiOperationId.LabelFilter && isConflictingFilter(operation, query.operations);
+
+  const theme = useTheme2();
+  const styles = getStyles(theme, isConflicting);
+
   if (!def) {
     return <span>Operation {operation.id} not found</span>;
   }
@@ -128,11 +133,6 @@ export function OperationEditor({
     }
   }
 
-  let isConflicting = false;
-  if (operation.id === LokiOperationId.LabelFilter) {
-    isConflicting = isConflictingFilter(operation, query.operations);
-  }
-
   const isInvalid = (isDragging: boolean) => {
     if (isDragging) {
       return undefined;
@@ -243,7 +243,7 @@ function callParamChangedThenOnChange(
   }
 }
 
-const getStyles = (theme: GrafanaTheme2) => {
+const getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {
   return {
     cardWrapper: css({
       alignItems: 'stretch',
@@ -258,10 +258,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       flexDirection: 'column',
       cursor: 'grab',
       borderRadius: theme.shape.borderRadius(1),
-      marginBottom: theme.spacing(1),
       position: 'relative',
       transition: 'all 0.5s ease-in 0s',
-      height: '100%',
+      height: isConflicting ? 'auto' : '100%',
     }),
     cardError: css({
       boxShadow: `0px 0px 4px 0px ${theme.colors.warning.main}`,