Skip to content

fix(tabs): fix hover and active indicator sizing across tab - #125

Merged
treeder merged 1 commit into
mainfrom
fix_tab_hover_style
Sep 3, 2026
Merged

fix(tabs): fix hover and active indicator sizing across tab#125
treeder merged 1 commit into
mainfrom
fix_tab_hover_style

Conversation

@treeder

@treeder treeder commented Sep 3, 2026

Copy link
Copy Markdown
Member

Problem

Commit 8fbcf33 added href support to tabs by wrapping content with .button (a or div) styled with display: inline-flex; position: relative;. This introduced a regression:

  1. position: relative hijacked the containing block for <md-ripple>, .button::before, and the full-width .indicator from :host to .button.
  2. display: inline-flex caused .button to shrink-wrap around only the text/icon contents, making the hover background and secondary indicator show only on the text area instead of the whole tab.

Solution

  • Removed .button { display: inline-flex; position: relative; ... } so .button remains position: static (as originally designed), restoring :host as the containing block.
  • Adopted the library-wide .link overlay pattern (nav/item.js, nav/tab.js, buttons/fab.js):
    • Render an absolutely-positioned <a class="link" id="link" ...></a> covering the full tab when href is present.
  • Updated handleContentClick to return early when href is present so link navigation is not interrupted.
  • Updated handleKeydown to trigger a.link on Enter or Space.

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📋 Review Summary

This pull request refactors link handling in md-tab (tabs/tab.js). Instead of swapping the root .button element between <button>/<div> and <a>, it renders a separate <a class="link"> overlay inside .button, aligning the pattern with other components such as md-button and md-carousel-item.

🔍 General Feedback

  • The change simplifies the DOM template by avoiding conditionally swapped parent wrapper elements and preserves child component instances (ripple, elevation, focus ring) across link and non-link states.
  • Bypassing handleContentClick when this.href is truthy ensures native link navigation semantics (such as middle-click, command-click, and context menus) are not suppressed.
📊 Token Usage & Cost Efficiency
Metric Value
Input Tokens (uncached) 11,654
Input Tokens (cached) 340,128 (⚡ 96.7% cached)
Output Tokens 396
Total Session Tokens 352,230
Cost (uncached input) $0.0087
Cost (cached input) $0.0255
Cost (output) $0.0015
Estimated Total Cost $0.0357

Gemini 3.8 Flash: introductory rate $0.75/$3.75 per 1M applied; reverts to $1.5/$7.5 after 2026-12-31.
Gemini 3.8 Flash: standard tier; batch and flex are half again, priority is higher.
Cache reads are priced here, but context-cache STORAGE, where the model charges for it separately per token-hour, is not included, so the figure can run slightly low.

Comment thread tabs/tab.js
Comment on lines +165 to +167
if (this.href) {
return
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 When this.href is present, returning early from handleContentClick means clicking the tab content will not dispatch a click event on the host element (this.click()), nor will activateTab in <md-tabs> be triggered (which listens to @click on the slot). Consequently, clicking an anchor-based tab will navigate to the URL but fail to update activeTabIndex or active states in <md-tabs> when SPA routing or intra-page navigation is used without a full page refresh. Consider allowing the host click or ensuring md-tabs can capture the tab activation.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
material 6d85a24 Commit Preview URL

Branch Preview URL
Sep 03 2026, 03:30 PM

@treeder
treeder merged commit a6b2fef into main Sep 3, 2026
2 checks passed
@treeder
treeder deleted the fix_tab_hover_style branch September 3, 2026 17:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant