From d9b8b761e9b2a6da4f9fdc88afc9a646e52f3364 Mon Sep 17 00:00:00 2001
From: matt abrams <37156449+zuchka@users.noreply.github.com>
Date: Wed, 16 Nov 2022 18:22:06 +0100
Subject: [PATCH] Query Editor: Hide overflow for long query names (#58840)

hides overflow for long query names
---
 public/app/features/query/components/QueryEditorRowHeader.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/public/app/features/query/components/QueryEditorRowHeader.tsx b/public/app/features/query/components/QueryEditorRowHeader.tsx
index 4122e04eebc..e41f9e33286 100644
--- a/public/app/features/query/components/QueryEditorRowHeader.tsx
+++ b/public/app/features/query/components/QueryEditorRowHeader.tsx
@@ -153,6 +153,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: flex;
       align-items: center;
       margin-left: ${theme.spacing(0.5)};
+      overflow: hidden;
     `,
     queryNameWrapper: css`
       display: flex;
@@ -163,6 +164,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       padding: 0 0 0 ${theme.spacing(0.5)};
       margin: 0;
       background: transparent;
+      overflow: hidden;
 
       &:hover {
         background: ${theme.colors.action.hover};
@@ -214,6 +216,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       font-style: italic;
       color: ${theme.colors.text.secondary};
       padding-left: 10px;
+      padding-right: 10px;
     `,
     itemWrapper: css`
       display: flex;