Rebrand APIM Docs

[Induwara04]

This pull request makes minor adjustments to the header styling in the material theme CSS. The changes primarily involve tweaking the horizontal positioning of header elements and adding a style rule for the logo button.

Header positioning adjustments:

• Increased the left offset from -8px to -14px for certain header elements to improve alignment. [1] [2]

Logo button styling:

• Added a new CSS rule to set margin-right: 0 for the .md-header__button.md-logo class, ensuring the logo button aligns properly in the header.

[coderabbitai]

📝 Walkthrough

Overview

This pull request makes adjustments to the header styling in the WSO2 API Manager documentation material theme to improve the visual alignment and appearance of header elements.

Changes

File Modified: en/theme/material/assets/css/partials/_header.css

CSS Styling Updates:

• Adjusted horizontal positioning of the header topic element by increasing the left offset from -8px to -14px to improve alignment
• Added margin styling for the logo button (.md-header__button.md-logo) by setting margin-right: 0 to properly space the logo in the header

Impact: These changes refine the header layout and spacing of the documentation homepage, ensuring proper alignment of key header components including the logo and topic title.

Walkthrough

This pull request modifies the Material theme header stylesheet to adjust layout spacing and positioning. The .md-header__topic element is shifted further left by changing its offset from -8px to -14px across both standard and first-child selector variants. Additionally, a new CSS rule explicitly sets margin-right: 0 for the .md-header__button.md-logo element to control logo button spacing. Minor whitespace normalization is applied to related logo image selectors.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description addresses the specific changes made to the CSS but does not follow the required template structure. Most required sections (Purpose, Goals, Approach, User stories, Release note, Documentation, Training, Certification, Marketing, Automation tests, Security checks, etc.) are missing or not filled out.	Complete the required PR description template with sections for Purpose, Goals, Approach, Release note, Documentation, and other applicable sections. Include information about testing and any related issues or PRs.
Title check	❓ Inconclusive	The title 'Rebrand APIM Docs' is vague and does not clearly convey the actual changes made (CSS header styling adjustments). A reader scanning the history would not understand that this PR modifies header positioning and logo button styling.	Consider a more descriptive title such as 'Adjust header element positioning and logo button styling' that clearly indicates the CSS changes being made.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

en/theme/material/assets/css/partials/_header.css (1)

41-55: 💤 Low value

Consider extracting the repeated -14px offset into a CSS custom property.

The value -14px now appears on both lines 45 and 54. The file already uses CSS custom properties for all other configurable header values (e.g., --md-header-min-height, --md-header-links-vertical-spacing). Centralising this offset in the :root block would keep it consistent with that pattern and make future tweaks a single-line change.

♻️ Proposed refactor

Add to the :root block (lines 19–29):

 :root,
 [data-md-color-scheme=default] {
   --md-header-box-shadow: none;
   --md-header-min-height: 62px;
   --md-header-link-font-size: .7rem;
   --md-header-link-font-weight: 400;
   --md-header-link-opacity: 1;
   --md-header-link-icon-size: 20px;
   --md-header-tabs-mobile-breakpoint: 70.1875em;
   --md-header-links-vertical-spacing: 15px;
+  --md-header-topic-left-offset: -14px;
 }

Then update the two rules:

 .md-header__topic {
   font-size: .8rem;
   position: relative;
   top: -2px;
-  left: -14px;
+  left: var(--md-header-topic-left-offset);
   transform: none !important;
   opacity: 1 !important;
 }

 .md-header__topic:first-child {
   font-weight: 400;
   display: block !important;
   position: relative !important;
-  left: -14px;
+  left: var(--md-header-topic-left-offset);
 }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@en/theme/material/assets/css/partials/_header.css` around lines 41 - 55,
Extract the repeated -14px into a CSS custom property in :root (e.g.,
--md-header-topic-offset) and replace the hardcoded left: -14px in the
.md-header__topic and .md-header__topic:first-child rules with left:
var(--md-header-topic-offset); ensure any !important remains if needed and match
existing naming patterns for header variables.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@en/theme/material/assets/css/partials/_header.css`:
- Around line 41-55: Extract the repeated -14px into a CSS custom property in
:root (e.g., --md-header-topic-offset) and replace the hardcoded left: -14px in
the .md-header__topic and .md-header__topic:first-child rules with left:
var(--md-header-topic-offset); ensure any !important remains if needed and match
existing naming patterns for header variables.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 69af6840-93d5-4aa0-8b28-bebce033dd7b

📥 Commits

Reviewing files that changed from the base of the PR and between 031293c and 996ea38.

⛔ Files ignored due to path filters (3)

• en/theme/material/assets/images/favicon.png is excluded by !**/*.png
• en/theme/material/assets/images/logo-for-light.svg is excluded by !**/*.svg
• en/theme/material/assets/images/logo.svg is excluded by !**/*.svg

📒 Files selected for processing (1)

• en/theme/material/assets/css/partials/_header.css