fix font size of tooltip is too small

v2/README.md

@@ -13,9 +13,11 @@ It is designed for simplicity, performance, keyboard-friendliness.
 Features:
 
 - [GitHub-flavored Markdown][gfm] support; Emoji, Table, Math expressions with [Mathjax][mathjax], Diagrams with [mermaid.js][mermaid]
-- Automatically update preview when the file is updated by efficiently watching files using OS-specific filesystem events (FSEvents, inotify, ...)
+- Automatically update preview when the file is updated by efficiently watching files or directories using OS-specific filesystem
+  events (FSEvents, inotify, ...)
 - Automatically scroll to the last modified position
-- All features can be accessed via keyboard shortcuts (scroll the article, search text, jump to section, ...). Type `?` to know all shortcuts
+- All features can be accessed via keyboard shortcuts (scroll the article, search text, jump to section, ...). Type `?` to know
+  all shortcuts
 - Sections outline in side navigation bar. The current section is automatically focused
 - Both CLI and GUI friendly; Available as a single binary executable as well as a desktop application installed to your system
 - Performance critical part (parsing Markdown text, searching Markdown AST, calculating the last modified position, ...) and

v2/web/components/MenuButton.tsx

@@ -5,8 +5,8 @@ import { sendMessage } from '../ipc';
 
 function onClick(e: React.MouseEvent<HTMLElement>): void {
     const rect = (e.target as HTMLElement).getBoundingClientRect();
-    const x = rect.x + rect.width;
-    const y = rect.y + rect.height;
+    const x = rect.x + rect.width + 4.0;
+    const y = rect.y + rect.height + 4.0;
     sendMessage({ kind: 'open_menu', position: [x, y] });
 }
 

v2/web/components/SideBar.tsx

@@ -9,6 +9,7 @@ import PetsIcon from '@mui/icons-material/Pets';
 import Tooltip from '@mui/material/Tooltip';
 import Divider from '@mui/material/Divider';
 import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 import { ConfigContext } from './ConfigContext';
 import { MenuButton } from './MenuButton';
 import type { Heading } from '../reducer';
@@ -61,6 +62,7 @@ const BUTTON_LABEL_STYLE = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
 };
+const TOOLTIP_SLOT_PROPS = { tooltip: { style: { maxWidth: 'none', padding: '0.5rem' } } };
 const MENU_BUTTON_STYLE = { margin: 'auto 0' };
 
 interface ListHeaderProps {
@@ -71,9 +73,10 @@ const ListHeader: React.FC<ListHeaderProps> = ({ path }) => {
     if (path !== null && path.startsWith('\\\\?\\')) {
         path = path.slice(4); // Strip UNC path
     }
+    const title = <Typography variant="body2">{path}</Typography>;
     return (
         <Box component="header" sx={LIST_HEADER_SX}>
-            <Tooltip title={path} arrow>
+            <Tooltip title={title} arrow slotProps={TOOLTIP_SLOT_PROPS}>
                 <Button
                     variant="text"
                     color="inherit"