pagopa · marcobottaro · Oct 29, 2025 · Oct 28, 2025 · Oct 28, 2025 · Oct 28, 2025
diff --git a/.changeset/beige-apes-rest.md b/.changeset/beige-apes-rest.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Adjust padding for heading in Guide contend and for section and items in the left menu, adjust font-size and weight for right in guide menu
diff --git a/.changeset/brave-towns-wash.md b/.changeset/brave-towns-wash.md
@@ -0,0 +1,5 @@
+---
+"gitbook-docs": minor
+---
+
+Add visibility for h3 heading level
@@ -47,16 +47,20 @@ const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
     position: 'relative',
   },
   [`& .${treeItemClasses.content} > .${treeItemClasses.label} > a`]: {
-    paddingTop: 10,
-    paddingBottom: 10,
+    paddingTop: 6,
+    paddingBottom: 6,
+    [theme.breakpoints.down('sm')]: {
+      paddingTop: 10,
+      paddingBottom: 10,
+    },
     paddingRight: 32,
   },
   [`& ul`]: {
     paddingLeft: 0,
     '--y': 'calc(var(--x) + 0)',
   },
   [`& li`]: {
-    '--x': 'calc(var(--y) + 24)',
+    '--x': 'calc(var(--y) + 12)',
   },
   ['& a']: {
     paddingLeft: 'calc(1px * var(--x))',
@@ -114,9 +118,9 @@ const GuideMenuItems = ({
             component={NextLink}
             href={href}
             color='text.secondary'
-            style={{
+            sx={{
               textDecoration: 'none',
-              fontSize: '.938rem',
+              fontSize: { xs: '1rem', md: '.938rem' },
               fontWeight: 400,
             }}
           >
@@ -142,8 +146,8 @@ const GuideMenuItems = ({
           color='text.primary'
           style={{
             paddingLeft: 32,
-            paddingTop: 24,
-            paddingBottom: 0,
+            paddingTop: 26,
+            paddingBottom: 6,
             textDecoration: 'none',
             fontSize: '.875rem',
             fontWeight: 600,

@@ -30,7 +30,7 @@ const ProductHeader: FC<ProductHeaderProps> = ({ product, path }) => {
       sx={{
         position: 'fixed',
         top: { xs: scrollUp ? SITE_HEADER_HEIGHT : 0, md: SITE_HEADER_HEIGHT },
-        zIndex: scrollUp ? 90 : 250,
+        zIndex: { xs: scrollUp ? 90 : 250, md: 90 },
         transition: 'top 0.5s linear',
         width: '100vw',
       }}

@@ -64,6 +64,7 @@ const CodeBlockPart = ({
         wrapLines={wrapLines}
         style={isLightMode ? lightCustomStyle : darkCustomStyle}
         customStyle={{
+          fontSize: '1rem',
           padding: title ? '5em 1em 1.25em 1em' : '1.25em 3em 1.25em 1em',
           width: isLightMode ? '' : '100%',
         }}

@@ -44,9 +44,6 @@ const SiteHeader = (
           px: 3,
           backgroundColor: palette.common.white,
           minHeight: SITE_HEADER_HEIGHT,
-          borderBottomWidth: 1,
-          borderBottomStyle: 'solid',
-          borderBottomColor: palette.divider,
         }}
         spacing={{ xs: 0, sm: 2 }}
         direction='row'

@@ -46,6 +46,7 @@ const AccordionSummary = styled((props: AccordionSummaryProps) => (
     marginLeft: theme.spacing(1),
     marginBottom: 0,
     marginRight: theme.spacing(1),
+    paddingTop: '15px',
   },
 }));
 

@@ -34,6 +34,8 @@ const asFontSize = (level: number) =>
     ? '1rem'
     : '0.75rem';
 
+const asPaddingBottom = (level: number) => (level === 1 ? 3 : 1);
+
 const asFontWeight = (level: number) => (level === 1 ? 700 : 600);
 
 const asLineHeight = (level: number) =>
@@ -89,7 +91,7 @@ const Heading = ({ level, id, children }: HeadingProps<ReactNode>) => (
       variant={asVariant(level)}
       sx={{
         paddingTop: 3,
-        paddingBottom: 1,
+        paddingBottom: { xs: asPaddingBottom(level) },
         fontSize: { xs: asFontSize(level) },
         fontWeight: { xs: asFontWeight(level) },
         lineHeight: { xs: asLineHeight(level) },

@@ -6,7 +6,12 @@ const Paragraph = ({ children }: ParagraphProps<ReactNode>) => (
   <Typography
     variant={'body1'}
     component='div'
-    sx={{ my: 2, fontSize: '1rem', fontWeight: 400, lineHeight: '24px' }}
+    sx={{
+      marginBottom: 2,
+      fontSize: '1rem',
+      fontWeight: 400,
+      lineHeight: '24px',
+    }}
   >
     {children}
   </Typography>

@@ -60,7 +60,6 @@ const GuideInPageMenu = ({
 
     if (headingElements.length === 0) return;
 
-    const TOP_OFFSET = 130;
     // eslint-disable-next-line functional/no-let
     let ticking = false;
 
@@ -72,7 +71,7 @@ const GuideInPageMenu = ({
       for (const headingElement of headingElements) {
         const { top } = headingElement.getBoundingClientRect();
 
-        if (top <= TOP_OFFSET) {
+        if (top <= SITE_HEADER_HEIGHT + PRODUCT_HEADER_HEIGHT) {
           activeId = headingElement.id;
           continue;
         }
@@ -125,7 +124,7 @@ const GuideInPageMenu = ({
         sx={{
           maxHeight: `calc(100vh - ${headerOffset}px)`,
           overflowY: 'auto',
-          paddingTop: '23px',
+          paddingTop: '50px',
         }}
       >
         <Typography

@@ -32,8 +32,8 @@ const Heading = ({ level, id, children }: HeadingProps<ReactNode>) => {
           color: isCurrentFragment
             ? palette.primary.main
             : palette.text.secondary,
-          fontSize: level === 2 ? 16 : 14,
-          fontWeight: isCurrentFragment ? 700 : 400,
+          fontSize: level === 2 ? 15 : 13,
+          fontWeight: 400,
         }}
       >
         {children}

@@ -46,7 +46,7 @@ const GitBookTemplate = ({
   const responsiveContentMarginTop = (contentMarginTop &&
     `${contentMarginTop}px`) || {
     xs: '30px',
-    md: '60px',
+    md: '65px',
   };
   const headersOffset = hasHeader
     ? `${SITE_HEADER_HEIGHT + PRODUCT_HEADER_HEIGHT}px`
@@ -98,16 +98,15 @@ const GitBookTemplate = ({
             sx={{
               display: { xs: 'none', lg: 'initial' },
               position: 'relative',
-              marginTop: { lg: headersOffset },
-              padding: { lg: '43px 64px' },
+              padding: { lg: '0 64px 0 32px' },
               width: { lg: '378px' },
             }}
           >
             <Box
               sx={{
                 position: 'sticky',
                 maxWidth: '378px',
-                top: hasHeader ? 121 : 64,
+                top: SITE_HEADER_HEIGHT + PRODUCT_HEADER_HEIGHT,
               }}
             >
               <GuideInPageMenu

@@ -17,6 +17,7 @@ describe('parseInPageMenu', () => {
       )
     ).toStrictEqual([
       new Markdoc.Tag('Heading', { level: 2, id: 'title-2' }, ['Title 2']),
+      new Markdoc.Tag('Heading', { level: 3, id: 'title-3' }, ['Title 3']),
     ]);
   });
 });
@@ -9,7 +9,7 @@ export type ParseInPageMenuConfig = {
 };
 
 // Array that defines the header level for which to show component in the in-page menu
-const HEADING_LEVELS_TO_SHOW = [2];
+const HEADING_LEVELS_TO_SHOW = [2, 3];
 
 const schema: ConfigType = {
   nodes: {