Lower ToC breakpoint from 2xl (1536px) to xl (1280px)

[Copilot]

The table of contents is hidden on screens smaller than 1536px, including common laptop screens like 14-inch MacBook Pros (1535px).

Changes

• Updated grid layout breakpoint: 2xl:grid-cols-sidebar-content-toc → xl:grid-cols-sidebar-content-toc
• Updated ToC container visibility: 2xl:block → xl:block

ToC now appears at ≥1280px (xl) instead of ≥1536px (2xl).

Screenshots

1280px — ToC visible:

1279px — ToC hidden:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• conf.reactjs.org
  • Triggering command: /usr/bin/curl curl REDACTED --output public/fonts/Optimistic_Display_Arbc_W_Md.woff2 (dns block)
  • Triggering command: /usr/bin/curl curl REDACTED --output public/fonts/Optimistic_Display_Cyrl_W_Bd.woff2 (dns block)
  • Triggering command: /usr/bin/curl curl REDACTED --output public/fonts/Optimistic_Display_Arbc_W_SBd.woff2 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Problem Description

The table of contents (ToC) is currently hidden on screens smaller than 1536px (2xl breakpoint) and only shown on very large screens. This hides the ToC on common laptop screens like 14-inch MacBook Pros at 1535px width, which negatively impacts the user experience.

Solution

Lower the responsive breakpoint for the table of contents from 2xl (1536px) to xl (1280px). This will make the ToC visible on more common screen sizes while maintaining the existing layout architecture.

Implementation Details

In src/components/Layout/Page.tsx, make the following changes:

Change 1: Update the grid layout breakpoint (around line 150-152)

Current:

'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'

Change to:

'grid grid-cols-only-content lg:grid-cols-sidebar-content xl:grid-cols-sidebar-content-toc'

Change 2: Update the ToC container visibility breakpoint (around line 195)

Current:

<div className="hidden -mt-16 lg:max-w-custom-xs 2xl:block">

Change to:

<div className="hidden -mt-16 lg:max-w-custom-xs xl:block">

Expected Outcome

After this change:

• At viewport widths ≥ 1280px (xl breakpoint), the table of contents will be visible
• At 1535px width (14-inch MacBook Pro), users will now see the ToC
• The layout remains consistent with the existing three-column grid approach
• No new dependencies or complex logic introduced

Testing

After deployment, verify that:

1. ToC appears at 1280px viewport width and above
2. ToC is hidden below 1280px width
3. The three-column layout (sidebar, content, ToC) displays correctly at xl breakpoint
4. No layout issues or content overflow on screens between 1280px-1535px

This pull request was created as a result of the following prompt from Copilot chat.

Problem Description

The table of contents (ToC) is currently hidden on screens smaller than 1536px (2xl breakpoint) and only shown on very large screens. This hides the ToC on common laptop screens like 14-inch MacBook Pros at 1535px width, which negatively impacts the user experience.

Solution

Lower the responsive breakpoint for the table of contents from 2xl (1536px) to xl (1280px). This will make the ToC visible on more common screen sizes while maintaining the existing layout architecture.

Implementation Details

In src/components/Layout/Page.tsx, make the following changes:

Change 1: Update the grid layout breakpoint (around line 150-152)

Current:

'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'

Change to:

'grid grid-cols-only-content lg:grid-cols-sidebar-content xl:grid-cols-sidebar-content-toc'

Change 2: Update the ToC container visibility breakpoint (around line 195)

Current:

<div className="hidden -mt-16 lg:max-w-custom-xs 2xl:block">

Change to:

<div className="hidden -mt-16 lg:max-w-custom-xs xl:block">

Expected Outcome

After this change:

• At viewport widths ≥ 1280px (xl breakpoint), the table of contents will be visible
• At 1535px width (14-inch MacBook Pro), users will now see the ToC
• The layout remains consistent with the existing three-column grid approach
• No new dependencies or complex logic introduced

Testing

After deployment, verify that:

1. ToC appears at 1280px viewport width and above
2. ToC is hidden below 1280px width
3. The three-column layout (sidebar, content, ToC) displays correctly at xl breakpoint
4. No layout issues or content overflow on screens between 1280px-1535px

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[xc1427]

@copilot Okay, I see you've made the changes. Now I have just a question about the codebase. So you do not need to change any code, just help me understand the codebase.

I see some files like _app.tsx, _document.tsx as well as the file you have edited which exports a component specifically named as "Page".

I wonder if these are conventions in Next.js's early versions ?