docs(ui): add animated underline for nav tabs#21912
Merged
Conversation
Add a responsive, animated underline indicator for navigation tabs to improve visual focus and active-state feedback. - Introduce CSS for .nav-tabs, .nav-tabs-item and a .nav-tabs-underline element, including transitions, positioning, and dark mode color. - Hide default first h1 in #content to keep header layout consistent. - Add docs/nav-tabs-underline.js to create and manage the underline element, observe DOM mutations, and update underline position/width on changes, resize, and when fonts load. - Preserve last known underline position/width across re-initializations to avoid visual jumps. This change makes active tab state visible with smooth movement and ensures the underline stays synchronized with dynamic content.
openclaw-barnacle
bot
added
docs
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
+86
to
+95
| const rootObserver = new MutationObserver(setupObservers); | ||
|
|
||
| if (document.readyState === "loading") { | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| setupObservers(); | ||
| rootObserver.observe(document.body, { childList: true, subtree: true }); | ||
| }); | ||
| } else { | ||
| setupObservers(); | ||
| rootObserver.observe(document.body, { childList: true, subtree: true }); |
Contributor
There was a problem hiding this comment.
Consider storing rootObserver cleanup logic if script might be reloaded in SPA context to prevent potential memory leaks from multiple observers.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Prompt To Fix With AI
This is a comment left during a code review.
Path: docs/nav-tabs-underline.js
Line: 86-95
Comment:
Consider storing `rootObserver` cleanup logic if script might be reloaded in SPA context to prevent potential memory leaks from multiple observers.
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise.
Protocol-zero-0
added a commit
to Protocol-zero-0/openclaw
that referenced
this pull request
Feb 20, 2026
Introduced by openclaw#21912 — needed to unblock CI for all open PRs. Co-authored-by: Cursor <[email protected]>
Protocol-zero-0
added a commit
to Protocol-zero-0/openclaw
that referenced
this pull request
Feb 20, 2026
Introduced by openclaw#21912 — needed to unblock CI for all open PRs. Co-authored-by: Cursor <[email protected]>
Protocol-zero-0
added a commit
to Protocol-zero-0/openclaw
that referenced
this pull request
Feb 20, 2026
Introduced by openclaw#21912 — needed to unblock CI for all open PRs. Co-authored-by: Cursor <[email protected]>
Protocol-zero-0
added a commit
to Protocol-zero-0/openclaw
that referenced
this pull request
Feb 20, 2026
Introduced by openclaw#21912 — needed to unblock CI for all open PRs. Co-authored-by: Cursor <[email protected]>
Protocol-zero-0
added a commit
to Protocol-zero-0/openclaw
that referenced
this pull request
Feb 20, 2026
Introduced by openclaw#21912 — needed to unblock CI for all open PRs. Co-authored-by: Cursor <[email protected]>
Protocol-zero-0
added a commit
to Protocol-zero-0/openclaw
that referenced
this pull request
Feb 20, 2026
Introduced by openclaw#21912 — needed to unblock CI for all open PRs. Co-authored-by: Cursor <[email protected]>
rodrigogs
pushed a commit
to rodrigogs/openclaw
that referenced
this pull request
Feb 20, 2026
Add a responsive, animated underline indicator for navigation tabs to improve visual focus and active-state feedback. - Introduce CSS for .nav-tabs, .nav-tabs-item and a .nav-tabs-underline element, including transitions, positioning, and dark mode color. - Hide default first h1 in #content to keep header layout consistent. - Add docs/nav-tabs-underline.js to create and manage the underline element, observe DOM mutations, and update underline position/width on changes, resize, and when fonts load. - Preserve last known underline position/width across re-initializations to avoid visual jumps. This change makes active tab state visible with smooth movement and ensures the underline stays synchronized with dynamic content.
Hansen1018
added a commit
to Hansen1018/openclaw
that referenced
this pull request
Feb 21, 2026
Add a responsive, animated underline indicator for navigation tabs to improve visual focus and active-state feedback. - Introduce CSS for .nav-tabs, .nav-tabs-item and a .nav-tabs-underline element, including transitions, positioning, and dark mode color. - Hide default first h1 in #content to keep header layout consistent. - Add docs/nav-tabs-underline.js to create and manage the underline element, observe DOM mutations, and update underline position/width on changes, resize, and when fonts load. - Preserve last known underline position/width across re-initializations to avoid visual jumps. This change makes active tab state visible with smooth movement and ensures the underline stays synchronized with dynamic content.
vincentkoc
pushed a commit
that referenced
this pull request
Feb 21, 2026
Add a responsive, animated underline indicator for navigation tabs to improve visual focus and active-state feedback. - Introduce CSS for .nav-tabs, .nav-tabs-item and a .nav-tabs-underline element, including transitions, positioning, and dark mode color. - Hide default first h1 in #content to keep header layout consistent. - Add docs/nav-tabs-underline.js to create and manage the underline element, observe DOM mutations, and update underline position/width on changes, resize, and when fonts load. - Preserve last known underline position/width across re-initializations to avoid visual jumps. This change makes active tab state visible with smooth movement and ensures the underline stays synchronized with dynamic content.
dgarson
pushed a commit
to dgarson/clawdbot
that referenced
this pull request
Feb 21, 2026
Add a responsive, animated underline indicator for navigation tabs to improve visual focus and active-state feedback. - Introduce CSS for .nav-tabs, .nav-tabs-item and a .nav-tabs-underline element, including transitions, positioning, and dark mode color. - Hide default first h1 in #content to keep header layout consistent. - Add docs/nav-tabs-underline.js to create and manage the underline element, observe DOM mutations, and update underline position/width on changes, resize, and when fonts load. - Preserve last known underline position/width across re-initializations to avoid visual jumps. This change makes active tab state visible with smooth movement and ensures the underline stays synchronized with dynamic content.
mmyyfirstb
pushed a commit
to mmyyfirstb/openclaw
that referenced
this pull request
Feb 21, 2026
Add a responsive, animated underline indicator for navigation tabs to improve visual focus and active-state feedback. - Introduce CSS for .nav-tabs, .nav-tabs-item and a .nav-tabs-underline element, including transitions, positioning, and dark mode color. - Hide default first h1 in #content to keep header layout consistent. - Add docs/nav-tabs-underline.js to create and manage the underline element, observe DOM mutations, and update underline position/width on changes, resize, and when fonts load. - Preserve last known underline position/width across re-initializations to avoid visual jumps. This change makes active tab state visible with smooth movement and ensures the underline stays synchronized with dynamic content.
obviyus
pushed a commit
to guirguispierre/openclaw
that referenced
this pull request
Feb 22, 2026
Add a responsive, animated underline indicator for navigation tabs to improve visual focus and active-state feedback. - Introduce CSS for .nav-tabs, .nav-tabs-item and a .nav-tabs-underline element, including transitions, positioning, and dark mode color. - Hide default first h1 in #content to keep header layout consistent. - Add docs/nav-tabs-underline.js to create and manage the underline element, observe DOM mutations, and update underline position/width on changes, resize, and when fonts load. - Preserve last known underline position/width across re-initializations to avoid visual jumps. This change makes active tab state visible with smooth movement and ensures the underline stays synchronized with dynamic content.
6 tasks
hughdidit
pushed a commit
to hughdidit/DAISy-Agency
that referenced
this pull request
Mar 1, 2026
Add a responsive, animated underline indicator for navigation tabs to improve visual focus and active-state feedback. - Introduce CSS for .nav-tabs, .nav-tabs-item and a .nav-tabs-underline element, including transitions, positioning, and dark mode color. - Hide default first h1 in #content to keep header layout consistent. - Add docs/nav-tabs-underline.js to create and manage the underline element, observe DOM mutations, and update underline position/width on changes, resize, and when fonts load. - Preserve last known underline position/width across re-initializations to avoid visual jumps. This change makes active tab state visible with smooth movement and ensures the underline stays synchronized with dynamic content. (cherry picked from commit 1b886e7)
hughdidit
pushed a commit
to hughdidit/DAISy-Agency
that referenced
this pull request
Mar 3, 2026
Add a responsive, animated underline indicator for navigation tabs to improve visual focus and active-state feedback. - Introduce CSS for .nav-tabs, .nav-tabs-item and a .nav-tabs-underline element, including transitions, positioning, and dark mode color. - Hide default first h1 in #content to keep header layout consistent. - Add docs/nav-tabs-underline.js to create and manage the underline element, observe DOM mutations, and update underline position/width on changes, resize, and when fonts load. - Preserve last known underline position/width across re-initializations to avoid visual jumps. This change makes active tab state visible with smooth movement and ensures the underline stays synchronized with dynamic content. (cherry picked from commit 1b886e7)
zooqueen
pushed a commit
to hanzoai/bot
that referenced
this pull request
Mar 6, 2026
Add a responsive, animated underline indicator for navigation tabs to improve visual focus and active-state feedback. - Introduce CSS for .nav-tabs, .nav-tabs-item and a .nav-tabs-underline element, including transitions, positioning, and dark mode color. - Hide default first h1 in #content to keep header layout consistent. - Add docs/nav-tabs-underline.js to create and manage the underline element, observe DOM mutations, and update underline position/width on changes, resize, and when fonts load. - Preserve last known underline position/width across re-initializations to avoid visual jumps. This change makes active tab state visible with smooth movement and ensures the underline stays synchronized with dynamic content.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add a responsive, animated underline indicator for navigation tabs to
improve visual focus and active-state feedback.
element, including transitions, positioning, and dark mode color.
element, observe DOM mutations, and update underline position/width on
changes, resize, and when fonts load.
to avoid visual jumps.
Greptile Summary
Adds a polished animated underline indicator for navigation tabs in the documentation. Implemented via CSS custom properties for smooth positioning transitions and a JavaScript module that tracks active tab state using MutationObservers. The underline animates smoothly when switching tabs and preserves position across DOM re-initializations to prevent visual jumps.
Key changes:
nav-tabs-underline.jswith observers to track active tab and update underline position/widthstyle.cssfor the underline element with 260ms transitions and dark mode support.nav-tabs-item > divopacity to 0The implementation is clean and uses modern JavaScript patterns. One minor suggestion about observer cleanup in SPA contexts.
Confidence Score: 5/5
Last reviewed commit: 2a6981a