[docs-infra] Improve the heading buttons positioning (#38428)

mui · Aug 17, 2023 · 361c788 · 361c788
1 parent fc07982
commit 361c788
Showing 1 changed file with 12 additions and 16 deletions.
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -121,9 +121,8 @@ const Root = styled('div')(
       },
     },
     '& h1, & h2, & h3, & h4': {
-      position: 'relative',
-      // Reserve space for the end of the line action button
-      paddingRight: 26 * 2 + 10,
+      display: 'flex',
+      alignItems: 'center',
       '& code': {
         fontSize: 'inherit',
         lineHeight: 'inherit',
@@ -136,24 +135,26 @@ const Root = styled('div')(
       },
       '& a:not(.anchor-link):hover': {
         color: 'currentColor',
-        borderBottom: '1px solid currentColor',
+        border: 'none',
+        boxShadow: '0 1px 0 0 currentColor',
         textDecoration: 'none',
       },
       '&:hover .anchor-link, & .comment-link': {
-        position: 'absolute',
+        cursor: 'pointer',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
         textAlign: 'center',
         marginLeft: 8,
-        marginTop: 5,
         height: 26,
         width: 26,
-        lineHeight: '21px',
         backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`,
         border: '1px solid',
         borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
         borderRadius: 8,
         color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`,
-        cursor: 'pointer',
-        display: 'inline-block',
+
         '&:hover': {
           backgroundColor: alpha(lightTheme.palette.primary[100], 0.4),
           borderColor: `var(--muidocs-palette-primary-100, ${lightTheme.palette.primary[100]})`,
@@ -168,18 +169,13 @@ const Root = styled('div')(
       },
       '& .comment-link': {
         display: 'none', // So we can have the comment button opt-in.
-        top: 0,
-        right: 0,
+        marginLeft: 'auto',
         transition: theme.transitions.create('opacity', {
           duration: theme.transitions.duration.shortest,
         }),
         '& svg': {
-          opacity: 0.6,
-          marginBottom: 1,
           verticalAlign: 'middle',
-        },
-        '&:hover': {
-          '&>svg': { opacity: 1 },
+          fill: 'currentColor',
         },
       },
     },