fix query performant tooltip padding (#5113)

voxel51 · Nov 14, 2024 · 91b4a20 · 91b4a20
1 parent 7300c9f
commit 91b4a20
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/app/packages/core/src/components/Sidebar/Entries/QueryPerformanceIcon.tsx b/app/packages/core/src/components/Sidebar/Entries/QueryPerformanceIcon.tsx
@@ -48,20 +48,25 @@ const QueryPerformanceIcon = () => {
       title={
         <div>
           {showExpanded ? (
-            <Box>
+            <Box sx={{ padding: "8px 8px 8px 8px" }}>
               <SectionTitle>Query Performance is Enabled</SectionTitle>
               <Text>
                 Some fields are indexed for better query performance. You can
                 create or manage indexes from here.
               </Text>
-              <Box display="flex" alignItems="center">
+              <Box
+                display="flex"
+                alignItems="center"
+                paddingTop="8px"
+                gap="4px"
+              >
                 <Button
                   variant="contained"
                   sx={{
-                    marginLeft: "auto",
                     backgroundColor: theme.primary.main,
                     color: theme.text.primary,
                     boxShadow: 0,
+                    flexGrow: 1,
                   }}
                   onClick={() => {
                     window.open(QP_MODE, "_blank")?.focus();
@@ -75,7 +80,11 @@ const QueryPerformanceIcon = () => {
                   }}
                   variant="text"
                   color="secondary"
-                  style={{ marginLeft: "auto", color: theme.text.secondary }}
+                  sx={{
+                    marginLeft: "auto",
+                    color: theme.text.secondary,
+                    flexGrow: 1,
+                  }}
                 >
                   Got it
                 </Button>