percona · pmcf-percona · Jul 16, 2026 · Jul 7, 2026 · Jul 9, 2026 · Jul 9, 2026
@@ -26,7 +26,7 @@
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",
     "@mui/x-date-pickers": "^7.5.0",
-    "@percona/percona-ui": "1.0.22",
+    "@percona/percona-ui": "1.0.23",
     "@pmm/shared": "*",
     "@reactour/tour": "^3.8.0",
     "@tanstack/react-query": "^5.45.1",
@@ -41,7 +41,6 @@
     "react-is": "18.3.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.30.2",
-    "react-syntax-highlighter": "^16.1.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "vite-plugin-svgr": "^4.3.0",
@@ -53,7 +52,6 @@
     "@testing-library/react": "^15.0.7",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
     "@vitejs/plugin-basic-ssl": "^1.2.0",

@@ -26,9 +26,6 @@ const Providers: FC<PropsWithChildren> = () => (
                 <TourProvider>
                   <GlobalStyles
                     styles={{
-                      html: {
-                        scrollbarGutter: 'stable',
-                      },
                       'html, body, div#root': {
                         minHeight: '100vh',
                       },

@@ -67,4 +67,6 @@ export const VIEWBOX_MAP: Partial<
   'pmm-titled': '0 0 141 48',
   'pmm-titled-outlined': '0 0 252 113',
   'real-time-database-off': '0 0 192 192',
+  'electric-bolt': '0 0 20 20',
+  'electric-bolt-off': '0 0 20 20',
 };
@@ -4,30 +4,43 @@ import Typography from '@mui/material/Typography';
 import { Messages } from './QanHeader.messages';
 import QanHeaderTabs from './qan-header-tabs/QanHeaderTabs';
 import QanHeaderActions from './qan-header-actions/QanHeaderActions';
-import Divider from '@mui/material/Divider';
 import { useIsRealtimeQan } from 'hooks/utils/useLocation';
 
 const QanHeader: FC = () => {
   const isRealtime = useIsRealtimeQan();
 
   return (
-    <>
+    <Stack
+      sx={{
+        mx: 2,
+        pt: 1,
+        columnGap: 3,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        // The border lives on the container so the tabs always sit flush
+        // against it, whether they share the title's row or wrap below it
+        ...(isRealtime && { borderBottom: 1, borderColor: 'divider' }),
+      }}
+    >
+      <Typography variant="h6" sx={{ my: 1 }}>
+        {Messages.title}
+      </Typography>
       <Stack
         sx={{
-          pt: 1,
-          px: 2,
-          gap: 3,
+          // Wraps under the title as a unit when narrower than the basis,
+          // then shrinks freely and lets the tabs scroll internally
+          flex: '1 1 320px',
+          minWidth: 0,
+          gap: 1,
           flexDirection: 'row',
-          justifyContent: 'flex-start',
           alignItems: 'center',
         }}
       >
-        <Typography variant="h6">{Messages.title}</Typography>
         <QanHeaderTabs />
         <QanHeaderActions />
       </Stack>
-      {isRealtime && <Divider sx={{ mx: 2 }} />}
-    </>
+    </Stack>
   );
 };
 

@@ -33,7 +33,7 @@ export const QanHeaderActions: FC = () => {
   };
 
   return (
-    <Stack gap={1} flex={1} flexDirection="row" justifyContent="flex-end">
+    <Stack gap={1} flexShrink={0} flexDirection="row" alignItems="center">
       <Tooltip title="Share session settings" arrow>
         <IconButton
           data-testid="qan-header-actions-copy-button"

@@ -10,7 +10,12 @@ const QanHeaderTabs: FC = () => {
   const isRealtime = useIsRealtimeQan();
 
   return (
-    <Tabs value={isRealtime ? 'real-time' : 'historical'}>
+    <Tabs
+      value={isRealtime ? 'real-time' : 'historical'}
+      variant="scrollable"
+      scrollButtons="auto"
+      sx={{ flex: 1, minWidth: 0 }}
+    >
       <Tab
         value="historical"
         label={Messages.tabStoredMetrics}

@@ -24,7 +24,9 @@ export const Modal: FC<ModalProps> = ({
         backgroundColor: theme.palette.background.paper,
         minWidth: 480,
         maxWidth: '80vw',
-        borderRadius: 1,
+        // TODO: use theme.shape.borderRadiusMd (8px) once percona-ui
+        // publishes the Shape tokens (percona-ui#37, not in 1.0.23)
+        borderRadius: '8px',
         boxShadow: theme.shadows[24],
         border: 'none',
       })}

@@ -20,6 +20,7 @@ export const TextSelect = <T,>({
   disabled,
   disabledValue,
   startIcon,
+  buttonProps,
   'data-testid-button': dataTestIdButton,
 }: TextSelectProps<T>) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -43,6 +44,7 @@ export const TextSelect = <T,>({
   return (
     <Stack>
       <Button
+        {...buttonProps}
         variant="text"
         onClick={handleOpen}
         endIcon={open ? <ArrowDropUp /> : <ArrowDropDown />}

@@ -13,5 +13,9 @@ export interface TextSelectProps<T> {
   disabled?: boolean;
   disabledValue?: string;
   startIcon?: ButtonProps['startIcon'];
+  buttonProps?: Omit<
+    ButtonProps,
+    'onClick' | 'variant' | 'endIcon' | 'startIcon' | 'disabled'
+  >;
   'data-testid-button'?: string;
 }