From 4532e044744f88163dfeda1cfc826b4a898f5f89 Mon Sep 17 00:00:00 2001
From: Develer <yeryomin.igor@gmail.com>
Date: Thu, 4 Dec 2025 17:34:18 +0100
Subject: [PATCH] update query library styles

---
 .../PanelDataPane/DetailViewHeader.tsx        |  1 -
 .../PanelDataPane/QueryLibraryView.tsx        | 26 +++++++++----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/DetailViewHeader.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/DetailViewHeader.tsx
index 15d56ab67ee..77f41374f40 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/DetailViewHeader.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/DetailViewHeader.tsx
@@ -157,7 +157,6 @@ function ItemHeader({
 
   const [isEditing, setIsEditing] = useState(false);
   const [validationError, setValidationError] = useState<string | null>(null);
-  const [isSavedQueriesDrawerOpen, setIsSavedQueriesDrawerOpen] = useState(false);
   const [showHelp, setShowHelp] = useState(false);
   const [showDebug, setShowDebug] = useState(false);
   const [transformInput, setTransformInput] = useState<DataFrame[]>([]);
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryLibraryView.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryLibraryView.tsx
index 3a924453e71..9eb92ef8879 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryLibraryView.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryLibraryView.tsx
@@ -262,12 +262,12 @@ export const QueryLibraryView = forwardRef<QueryLibraryViewRef, QueryLibraryView
   // Render query list item
   const renderQueryItem = (query: (typeof STUB_SAVED_QUERIES)[0], index: number) => (
     <Fragment key={query.uid}>
-      <label className={cx(styles.queryItem, selectedQueryIndex === index && styles.selected)}>
+      <label className={cx(styles.queryItem, mode === 'browse' && selectedQueryIndex === index && styles.selected)}>
         <input
           type="radio"
           name="query-library-list"
           className={styles.radioInput}
-          checked={selectedQueryIndex === index}
+          checked={mode === 'browse' && selectedQueryIndex === index}
           onChange={() => setSelectedQueryIndex(index)}
           disabled={mode === 'save'}
         />
@@ -311,14 +311,12 @@ export const QueryLibraryView = forwardRef<QueryLibraryViewRef, QueryLibraryView
             <Stack gap={1} alignItems="center">
               <DatasourceIcon datasourceType={datasourceType} className={styles.datasourceIconLarge} />
               <Box flex={1}>
-                <Field label={t('query-library.query-details.title', 'Title')} noMargin>
-                  <Input
-                    id="query-title"
-                    value={mode === 'save' ? formTitle : query?.title || ''}
-                    onChange={(e) => mode === 'save' && setFormTitle(e.currentTarget.value)}
-                    readOnly={mode !== 'save'}
-                  />
-                </Field>
+                <Input
+                  id="query-title"
+                  value={mode === 'save' ? formTitle : query?.title || ''}
+                  onChange={(e) => mode === 'save' && setFormTitle(e.currentTarget.value)}
+                  readOnly={mode !== 'save'}
+                />
               </Box>
             </Stack>
           </Box>
@@ -410,7 +408,7 @@ export const QueryLibraryView = forwardRef<QueryLibraryViewRef, QueryLibraryView
           {/* Left column - Query list with search */}
           <Box display="flex" flex={1} minWidth={0} direction="column">
             {/* Search field */}
-            <Box padding={1} paddingBottom={0}>
+            <Box padding={2}>
               <Input
                 prefix={<Icon name="search" />}
                 placeholder={t('query-library.filters.search', 'Search by...')}
@@ -456,9 +454,9 @@ export const QueryLibraryView = forwardRef<QueryLibraryViewRef, QueryLibraryView
                 direction="column"
                 display="flex"
                 flex={1}
-                paddingBottom={0}
+                paddingBottom={2}
                 paddingLeft={2}
-                paddingRight={1}
+                paddingRight={2}
                 paddingTop={2}
               >
                 {renderDetailsForm()}
@@ -475,7 +473,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   queryItem: css({
     display: 'block',
     width: '100%',
-    padding: theme.spacing(1.5, 1.5, 1.5, 1),
+    padding: theme.spacing(2),
     position: 'relative',
     cursor: 'pointer',
     [theme.transitions.handleMotion('no-preference')]: {