fix: add clip-path prevents the clickable area of ​​the last link from expanding below the table

[RYGRIT]

🔗 Linked issue

🧭 Context

Further supplement to #1579

#1579 (comment)

📚 Description

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 23, 2026 4:45am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 23, 2026 4:45am
npmx-lunaria	Ignored		Feb 23, 2026 4:45am

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request modifies the root table row element's class attribute in the TableRow component. The change removes the transform and scale-100 utility classes and replaces them with clip-path inset(0), whilst maintaining all other styling and interaction classes. No changes have been made to data handling, event emission, or control flow logic.

Possibly related PRs

• fix(ui): implement clickable package table rows #1277: Both PRs modify the root row element classes in TableRow.vue affecting row presentation and interaction.
• fix: add workaround for safari + position: relative on <tr> #1579: Both PRs modify the same <tr> element's root class using Tailwind utilities to address browser-specific row positioning and click interaction issues.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description references a linked issue (#1579) and provides context about the change being a follow-up supplement, though specific technical details are minimal.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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]

Actionable comments posted: 1

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

Safari clip-path inset(0) tr border paint artifacts workaround transform

💡 Result:

Safari/WebKit can show 1px “border/edge” paint artifacts when an element is clipped (e.g., clip-path: inset(0)) and/or promoted to a composited layer by transform (or translateZ(0)). Common workarounds:

1) Don’t put the border on the clipped element (use a wrapper)

<div class="frame"><div class="clip">…</div></div>

.frame { border: 1px solid rgba(0,0,0,.2); border-radius: 12px; }
.clip  { border-radius: 12px; clip-path: inset(0); -webkit-clip-path: inset(0); }

This avoids Safari having to anti-alias the border and the clip edge in the same layer (a frequent source of seams).

2) Force WebKit to clip against the box explicitly (border-box / content-box)

.clip { clip-path: border-box; } /* or: content-box */

border-box/content-box are valid clip-path geometry-box values. [4]
This has been cited as a workaround for WebKit clipping issues when transforms/compositing are involved. [1][2]

3) Add a “transparent outline” (often kills the 1px seam during transforms)

.clip { outline: 1px solid transparent; }

This is a known Safari artifact workaround for flickering/jagged 1px lines on transformed/scaled elements. [3]

If you share a minimal HTML/CSS repro (especially whether the border is on the same element as the clip-path, and which transforms are applied), I can suggest the smallest combination that fixes it for your case.

Sources: WebKit bug discussion/workaround (clip-path: border-box) [1], Safari clipping workaround using clip-path: content-box [2], Safari 1px line artifact workaround (outline: 1px solid transparent) [3], MDN clip-path geometry-box values [4].

---

🌐 Web query:

mtsknn.fi relative tr Safari clip-path inset(0) workaround

💡 Result:

Safari ignores position: relative on <tr>, so absolutely-positioned overlays (e.g., an <a>::after { inset: 0; position: absolute; } “make whole row clickable” trick) can expand to the viewport/table instead of the row.

Workaround (from mtsknn.fi): use a transform to create the containing block, then clip the row. Also move focus styling to the row because clip-path can clip outlines. [1]

tr{
  transform: translate(0); /* workaround for Safari <tr> positioning */
  clip-path: inset(0);     /* clips the absolutely-positioned overlay to the row */
}

tr:focus-within{
  outline: 2px solid hotpink;
  outline-offset: -2px;    /* negative so it isn’t clipped */
}

a:focus{ outline: 0; }     /* focus ring is on the row */
a::after{
  content:"";
  position:absolute;
  inset:0;
}

Note: clip-path: inset(0) may cause Safari paint quirks (e.g., borders sometimes disappearing). [1]

Sources: [1]

---

Verify Safari border rendering with clip-path: inset(0) on <tr>; consider translate(0) as a more conservative transform.

The clip-path: inset(0) on <tr> is a documented Safari workaround (per mtsknn.fi) for creating a containing block when position: relative is ignored. The established pattern pairs it with a transform, and the code does apply scale-100 (which generates transform: scaleX(1) scaleY(1)). However, the mtsknn.fi source specifically recommends transform: translate(0), which is more minimal. Both create a stacking context, but if paint artefacts (such as borders disappearing) appear in Safari, consider replacing scale-100 with translate(0) as the tested alternative. A quick visual smoke-test in Safari would confirm whether the border-b border-border on table rows renders correctly.