feat: fix breadcrumb, content container and footer ui

[amaan-bhati]

What has changed?

fix the ui of the breadcrumb, doc content container and the footer
Please include a summary of the change.

• breadcrumb ui: the breadcrumb ui was breaking since it had a top padding above it and when it got the sticky state, it had empty space above it which was making the content go past it with clear visibility which was a bad ui, hence, i made the breadcrumb stick to the top with no padding and spacing left at the top

• the content of each doc was coming inside two child containers, removef the inner child

• the footer was outside the content area with the footer breaking with respect to the left sidebar, removed the entire bottom footer, only kepkt the footer content, moved it inside the content area container

• tried placing the footer in two containers, one with respect to the content container + right sidebar, the other one with only aligned with the content container, the second one looked better hence kept it, references:

**- wrt content container + right sidebar:**
**- aligned only wrt to the content container**

something i faced while fixing this and a potential solution for a better dx:

• noticed that localhost sometimes throws an error when we try to route to a different topic on the sidebar:

• On localhost, the GA script is often blocked/not loaded (ad blocker, Brave shields, privacy settings, network), so window.gtag never becomes a function. Then route navigation throws:

window.gtag is not a function

What you can do in dev:

• disable gtag in development:

• On localhost, the GA script is often blocked/not loaded (ad blocker, Brave shields, privacy settings, network), so window.gtag never becomes a function. Then route navigation throws:

window.gtag is not a function

What you can do in dev:

-disable gtag in development:

// docusaurus.config.js (inside preset-classic options)
gtag:
  process.env.NODE_ENV === "production"
    ? {
        trackingID: "G-LLS95VWZPC",
        anonymizeIP: true,
      }
    : undefined,

SEO Metadata updated pointed out in review by copilot:

noticed that metadata coverage for doc pages had regressed after removing the previous Layout-based meta flow in DocItem.

• To avoid silently degrading SEO/social previews, we intentionally added explicit metadata handling in src/theme/DocItem/index.js

Why this was implemented:

• during review we identified that some page-level metadata was no longer guaranteed on docs routes:

• keywords from front matter/metadata

• social preview image tags for OpenGraph/Twitter

• If left as-is, doc pages could render correctly visually but provide weaker metadata to crawlers/social platforms.

This PR Resolves #(issue)

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue).
• New feature (non-breaking change which adds functionality).
• Breaking change (fix or feature that would cause existing functionality to not work as expected).
• Documentation update (if none of the other choices apply).

How Has This Been Tested?

Please run npm run build and npm run serve to check if the changes are working as expected. Please include screenshots of the output of both the commands. Add screenshots/gif of the changes if possible.

• ran npm run build, nothing breaks:

Checklist:

• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.

[Copilot]

Pull request overview

This PR updates the Docusaurus docs UI layout to make breadcrumbs behave correctly when sticky, simplify the doc content container structure, and move footer content into the doc content area for better alignment with the sidebar/content grid.

Changes:

• Makes the breadcrumbs container sticky and removes extra spacing that caused visual gaps.
• Simplifies the doc markdown/content structure by removing an extra inner wrapper.
• Adds an inline docs footer under the doc paginator and hides the global footer on docs pages via CSS.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
src/theme/DocItem/index.js	Removes an inner content wrapper and renders a new inline footer after doc content/pagination.
src/theme/DocBreadcrumbs/styles.module.css	Makes breadcrumbs sticky with a background and adjusted spacing.
src/css/custom.css	Removes top spacing in several docs wrappers and adds styles to hide the global footer and style the new inline footer.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The inline docs footer is rendered using generic <div> containers. For better semantics and screen-reader navigation, this should be a <footer> element (or at least include role="contentinfo") instead of a plain div wrapper.

[amaan-bhati]

would be addressed in further comments

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

src/css/custom.css:1533

• This CSS rule applies margin-top: 0 to .docusaurus-mt-lg globally (not just on docs pages), which conflicts with the nearby comment "Remove top margin on docs pages only" and makes the subsequent .plugin-docs .docusaurus-mt-lg rule redundant. Consider scoping the .docusaurus-mt-lg selector to docs pages (or removing it from this selector list) so non-doc pages aren't affected unintentionally.

/* Docusaurus specific wrappers */
.docusaurus-mt-lg,

.docs-doc-page,
[class*="docsWrapper"] {
  max-width: 100% !important;
  width: 100% !important;
  margin-top: 0 !important;
}

/* Remove top margin on docs pages only */
.plugin-docs .docusaurus-mt-lg {
  margin-top: 0 !important;
}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[amaan-bhati]

UI and build working perfectly fine till the last commit, have asked for a copilot review again, build confirmation till now:

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

src/css/custom.css:2242

• nav[class*="theme-doc-breadcrumb"] sets border-bottom: none, but the dark-theme override still sets border-bottom-color, which has no effect when the border is removed. Either drop the dark border-bottom-color rule or restore an explicit border-bottom style for dark mode if a divider is desired.

  background: #ffffff !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
}

html[data-theme="dark"] nav[class*="theme-doc-breadcrumb"] {
  background: #18181b !important;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

src/css/custom.css:1533

• The .docusaurus-mt-lg, .docs-doc-page, [class*="docsWrapper"] selector block is labeled as “Docusaurus specific wrappers”, but it applies margin-top: 0 globally to .docusaurus-mt-lg (not scoped to docs). This also makes the subsequent .plugin-docs .docusaurus-mt-lg { margin-top: 0 } rule redundant. Consider scoping the .docusaurus-mt-lg selector to docs pages (e.g., prefix with .plugin-docs/.docs-doc-page) and removing the duplicate rule to avoid unintended layout changes outside docs.

/* Docusaurus specific wrappers */
.docusaurus-mt-lg,

.docs-doc-page,
[class*="docsWrapper"] {
  max-width: 100% !important;
  width: 100% !important;
  margin-top: 0 !important;
}

/* Remove top margin on docs pages only */
.plugin-docs .docusaurus-mt-lg {
  margin-top: 0 !important;
}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[amaan-bhati]

All copilot review iterations resolved, did 4 iterations of review, all are resolved now.
Checks:

• checked the ui locally, checked responsiveness
• checked dark mode and light mode as well
• checked the build, nothing breaks: