From 4e7e11b90671e876bd32594d9cc0a1d109a0e415 Mon Sep 17 00:00:00 2001
From: Alex Spencer <52186778+alexjonspencer1@users.noreply.github.com>
Date: Tue, 25 Nov 2025 17:04:58 -0800
Subject: [PATCH] chore: styles cleanup

---
 .../query/components/QueryEditorRow.tsx       | 48 +++++++++----------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx
index 7758efe5509..2788dad4d4b 100644
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/public/app/features/query/components/QueryEditorRow.tsx
@@ -556,11 +556,10 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
     const error =
       data?.error && data.error.refId === query.refId ? data.error : data?.errors?.find((e) => e.refId === query.refId);
     // Note: We can't use hooks in class components, so we use static styles
-    const focusedRowStyle = isFocused ? getFocusedRowStyle() : undefined;
-    const focusedWrapperStyle = isFocused ? getFocusedWrapperStyle() : undefined;
-    const rowClasses = classNames('query-editor-row', focusedRowStyle, {
+    const rowClasses = classNames('query-editor-row', {
       'query-editor-row--disabled': isHidden,
       'gf-form-disabled': isHidden,
+      [focusedRowStyle]: isFocused,
     });
 
     if (!datasource) {
@@ -607,10 +606,10 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
       <div
         data-testid="query-editor-row"
         aria-label={selectors.components.QueryEditorRows.rows}
-        className={focusedWrapperStyle}
+        className={classNames({ [focusedWrapperStyle]: isFocused })}
       >
         {isFocused && hiddenQueriesCount > 0 && (
-          <div className={getFocusedBannerStyle()}>
+          <div className={focusedBannerStyle}>
             <Stack direction="row" alignItems="center" gap={1}>
               <Icon name="expand-screen" />
               <Text color="primary" variant="bodySmall" italic>
@@ -746,26 +745,23 @@ function AdaptiveTelemetryQueryActions({ query }: { query: DataQuery }) {
 
 // Static styles for focused state - used in class component
 // Transitions are handled in parent components where we have theme access
-const getFocusedWrapperStyle = () =>
-  css({
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    flex: '1 1 auto',
-  });
+const focusedWrapperStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  flex: '1 1 auto',
+});
 
-const getFocusedRowStyle = () =>
-  css({
-    flex: '1 1 100%',
-    height: '100%',
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    // Remove margins when focused to maximize space
-    marginBottom: 0,
-  });
+const focusedRowStyle = css({
+  flex: '1 1 100%',
+  height: '100%',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  // Remove margins when focused to maximize space
+  marginBottom: 0,
+});
 
-const getFocusedBannerStyle = () =>
-  css({
-    marginBottom: '10px',
-  });
+const focusedBannerStyle = css({
+  marginBottom: '10px',
+});