diff --git a/packages/grafana-prometheus/src/querybuilder/shared/QueryBuilderHints.tsx b/packages/grafana-prometheus/src/querybuilder/shared/QueryBuilderHints.tsx
index 8ffba3bb291..d60dc22f278 100644
--- a/packages/grafana-prometheus/src/querybuilder/shared/QueryBuilderHints.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/shared/QueryBuilderHints.tsx
@@ -38,7 +38,7 @@ export const QueryBuilderHints = ({
   }, [datasource, visualQuery, data, queryModeller]);
 
   return (
-    <>
+    <div className={styles.root}>
       {hints.length > 0 && (
         <div className={styles.container}>
           {hints.map((hint) => {
@@ -75,7 +75,7 @@ export const QueryBuilderHints = ({
           })}
         </div>
       )}
-    </>
+    </div>
   );
 };
 
@@ -83,6 +83,9 @@ QueryBuilderHints.displayName = 'QueryBuilderHints';
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
+    root: css({
+      padding: theme.spacing(0.5),
+    }),
     container: css({
       display: 'flex',
       alignItems: 'start',