Fix Heading in hint blocks are huge in published content

Also fix `flip-heading-hash` behaviour which wasn't working anymore

Author: zenoachtig

packages/gitbook/src/components/DocumentView/Heading.tsx

@@ -36,7 +36,10 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
             <HashLinkButton
                 id={id}
                 block={block}
-                className={tcls('-ml-6', 'pr-2')}
+                className={tcls(
+                    '-ml-6 pr-2',
+                    '[.flip-heading-hash_&]:order-last [.flip-heading-hash_&]:ml-1 [.flip-heading-hash_&]:pl-2'
+                )}
                 iconClassName={tcls('size-4')}
                 label="Direct link to heading"
             />

packages/gitbook/src/components/DocumentView/Hint.tsx

@@ -65,9 +65,9 @@ export function Hint({
             {hasHeading ? (
                 <Block
                     style={tcls(
-                        'w-full items-start py-4! pl-3 text-[1em] *:flex-none',
+                        'w-full items-start py-4! pl-3 text-[1em]! *:flex-none',
                         // Heading hash styles
-                        'flip-heading-hash pr-8',
+                        'flip-heading-hash pr-8 [&_.hash]:bg-transparent',
                         hintStyle.header
                     )}
                     ancestorBlocks={[...ancestorBlocks, block]}

packages/gitbook/src/components/DocumentView/ListItem.tsx

@@ -32,8 +32,6 @@ export function ListItem(props: BlockProps<DocumentBlockListItem>) {
             ancestorBlocks={[...ancestorBlocks, block]}
             blockStyle={tcls(
                 'min-h-lh',
-                // flip heading hash icon if list item is a heading
-                'flip-heading-hash',
                 // remove margin-top for the first heading in a list
                 '[h2]:pt-0',
                 '[h3]:pt-0',

packages/gitbook/src/components/RootLayout/globals.css

@@ -276,13 +276,6 @@
         /* Don't apply antialiased to `code` and `pre` elements */
         @apply subpixel-antialiased;
     }
-
-    .flip-heading-hash {
-        @apply [h1,h2,h3,h4]:content-start;
-        @apply [h1,h2,h3,h4]:auto-cols-[auto_1fr];
-        @apply [&:is(h1,h2,h3,h4)>div:first-child]:[grid-area:1/2];
-        @apply [&:is(h1,h2,h3,h4)>div:first-child]:ml-1;
-    }
 }
 
 html {