[*] improve SQL popup readability, closes #1241 (#1280)

Author: mohamadyasser118

internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/SqlPopUp/SqlPopUp.consts.tsx

@@ -1,15 +1,37 @@
+import { Box } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
 
 export const useSqlPopUpColumns = (): GridColDef[] => [
   {
     field: "version",
     headerName: "Version",
+    width: 80,
+    align: "center",
+    headerAlign: "center",
   },
   {
     field: "sql",
     headerName: "SQL",
-    align: "center",
-    headerAlign: "center",
-    width: 600,
+    headerAlign: "left",
+    flex: 1,
+    renderCell: ({ value }) => (
+      <Box
+        component="pre"
+        sx={{
+          fontFamily: "'Fira Code', 'Cascadia Code', 'Consolas', monospace",
+          fontSize: "0.75rem",
+          lineHeight: 1.6,
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
+          overflowX: "auto",
+          m: 0,
+          py: 1.5,
+          px: 0,
+          color: "text.primary",
+        }}
+      >
+        {value}
+      </Box>
+    ),
   },
 ];

internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/SqlPopUp/SqlPopUp.tsx

@@ -41,17 +41,26 @@ export const SqlPopUp = ({ SQLs }: Props) => {
       <Dialog
         open={open}
         onClose={handleClose}
-        maxWidth="md"
+        maxWidth="xl"        // SQL lines are long, needs full width
+        fullWidth            // stretches to maxWidth instead of hugging content
       >
         <DialogTitle>SQLs</DialogTitle>
-        <DialogContent sx={{ width: 750, maxHeight: 600 }}>
+        <DialogContent sx={{maxHeight: 700 }}>
           <DataGrid
             getRowId={(row) => row.version}
             columns={columns}
             rows={rows}
             pageSizeOptions={[]}
             getRowHeight={() => "auto"}
             autoHeight
+            disableColumnMenu
+            sx={{
+              // let the pre block breathe inside auto-height rows
+              "& .MuiDataGrid-cell": {
+                alignItems: "flex-start",
+                py: 1,
+              },
+            }}
           />
         </DialogContent>
       </Dialog>