Remove padding on first Heading in Columns (#3479)

Author: nolannbiron

.changeset/tall-schools-visit.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Remove padding on first Heading in Columns

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

@@ -18,7 +18,7 @@ export function Columns(props: BlockProps<DocumentBlockColumns>) {
                             document={document}
                             ancestorBlocks={[...ancestorBlocks, block, columnBlock]}
                             context={context}
-                            style="w-full space-y-4 *:max-w-full"
+                            style="group/column w-full space-y-4 *:max-w-full"
                         />
                     </Column>
                 );

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

@@ -24,28 +24,29 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
             className={tcls(
                 textStyle.textSize,
                 'heading',
-                'grid',
+                'flex',
+                'items-baseline',
                 'scroll-m-12',
                 hashLinkButtonWrapperStyles,
-                style
+                style,
+                textStyle.marginTop
             )}
         >
             <HashLinkButton
                 id={id}
                 block={block}
-                className={tcls('-ml-6', textStyle.anchorButtonMarginTop)}
+                className={tcls('-ml-6', 'pr-2')}
                 iconClassName={tcls('size-4')}
                 label="Direct link to heading"
             />
 
             <div
                 className={tcls(
-                    'grid-area-1-1',
+                    'flex-1',
                     'z-[1]',
                     'justify-self-start',
                     getTextAlignment(block.data.align),
-                    textStyle.lineHeight,
-                    textStyle.marginTop
+                    textStyle.lineHeight
                 )}
             >
                 <Inlines {...rest} context={context} nodes={block.nodes} ancestorInlines={[]} />

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

@@ -52,7 +52,7 @@ export function Hint(props: BlockProps<DocumentBlockHint>) {
             {hasHeading ? (
                 <Block
                     style={tcls(
-                        'flip-heading-hash p-4 pl-3 text-[1em] *:mt-0',
+                        'flip-heading-hash !py-4 items-start px-4 pl-3 text-[1em] *:flex-none',
                         hasHeading ? hintStyle.header : null
                     )}
                     ancestorBlocks={[...ancestorBlocks, block]}

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

@@ -35,9 +35,9 @@ export function ListItem(props: BlockProps<DocumentBlockListItem>) {
                 // flip heading hash icon if list item is a heading
                 'flip-heading-hash',
                 // remove margin-top for the first heading in a list
-                '[&:is(h2)>div]:mt-0',
-                '[&:is(h3)>div]:mt-0',
-                '[&:is(h4)>div]:mt-0',
+                '[&:is(h2)]:pt-0',
+                '[&:is(h3)]:pt-0',
+                '[&:is(h4)]:pt-0',
                 // Override the "mx-auto" class from UnwrappedBlocks
                 'mx-0'
             )}

packages/gitbook/src/components/DocumentView/OpenAPI/context.tsx

@@ -61,7 +61,7 @@ export function getOpenAPIContext(args: {
                 style={tcls([
                     headingProps.deprecated ? 'line-through' : undefined,
                     headingProps.deprecated || !!headingProps.stability
-                        ? '[&>div]:mt-0'
+                        ? '[&>div]:pt-0'
                         : undefined,
                 ])}
                 block={{

packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx

@@ -58,7 +58,7 @@ export async function RecordCard(
                 '[&_.heading>div:first-child]:hidden',
                 '[&_.heading>div]:text-[.8em]',
                 'md:[&_.heading>div]:text-[1em]',
-                '[&_.blocks:first-child_.heading:first-child_div]:mt-0', // Remove margin on first heading in card
+                '[&_.blocks:first-child_.heading]:pt-0', // Remove padding-top on first heading in card
 
                 // On mobile, check if we can display the cover responsively or not:
                 // - If the file has a landscape aspect ratio, we display it normally

packages/gitbook/src/components/DocumentView/spacing.ts

@@ -10,8 +10,6 @@ export function getBlockTextStyle(block: DocumentBlock): {
     lineHeight: string;
     /** Tailwind class for the margin top (mt-*) */
     marginTop?: string;
-    /** Tailwind class for the margin top to apply on the anchor link button */
-    anchorButtonMarginTop?: string;
 } {
     switch (block.type) {
         case 'paragraph':
@@ -23,22 +21,19 @@ export function getBlockTextStyle(block: DocumentBlock): {
             return {
                 textSize: 'text-3xl font-semibold',
                 lineHeight: 'leading-tight',
-                marginTop: 'mt-[1em]',
-                anchorButtonMarginTop: 'mt-[1.05em]',
+                marginTop: 'column-first-of-type:pt-0 pt-[1em]',
             };
         case 'heading-2':
             return {
                 textSize: 'text-2xl font-semibold',
                 lineHeight: 'leading-snug',
-                marginTop: 'mt-[0.75em]',
-                anchorButtonMarginTop: 'mt-[0.9em]',
+                marginTop: 'column-first-of-type:pt-0 pt-[0.75em]',
             };
         case 'heading-3':
             return {
                 textSize: 'text-xl font-semibold',
                 lineHeight: 'leading-snug',
-                marginTop: 'mt-[0.5em]',
-                anchorButtonMarginTop: 'mt-[0.65em]',
+                marginTop: 'column-first-of-type:pt-0 pt-[0.5em]',
             };
         case 'divider':
             return {

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

@@ -54,10 +54,9 @@
     }
 
     .flip-heading-hash {
-        @apply [&:is(h1,h2,h3,h4)]:content-start;
-        @apply [&:is(h1,h2,h3,h4)]:[grid-auto-columns: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;
+        @apply [&:is(h1,h2,h3,h4)]:flex-row-reverse;
+        @apply [&:is(h1,h2,h3,h4)]:[justify-content:start];
+        @apply [&:is(h1,h2,h3,h4)>div:first-child]:ml-2;
     }
 }
 

packages/gitbook/tailwind.config.ts

@@ -516,6 +516,9 @@ const config: Config = {
                 'html:not(.announcement-hidden):has(#announcement-banner) &'
             );
 
+            // Variant to target first-of-type in a column
+            addVariant('column-first-of-type', ':merge(.group\\/column) > &:first-of-type'); // optional for group-based variants
+
             const customisationVariants = {
                 // Sidebar styles
                 sidebar: ['sidebar-default', 'sidebar-filled'],