fix(admin-x-settings): Fix portal links input border rendering in Tailwind v4

[jonhickman]

Problem

In PortalLinks.tsx, the TextField component uses the class border-b-500. In Tailwind v4, this is parsed as border-bottom-width: 500px (a width utility) rather than a border color, because there is no color segment in the class name. This causes a massive ~500px grey rectangle to render below each link input field on the Portal Links settings page.

Fix

Changed border-b-500 → border-b-grey-500 so that Tailwind v4 correctly resolves it as a border color using Ghost's grey color palette. This is consistent with the existing text-grey-700 class on the same element, confirming Ghost uses "grey" (not "gray") throughout its color tokens.

File changed: apps/admin-x-settings/src/components/settings/membership/portal/PortalLinks.tsx

Reproduction steps

1. Navigate to /ghost/#/settings/portal/edit
2. Click the Links tab
3. Observe oversized grey rectangles rendering below each link input field (caused by border-bottom-width: 500px)

After fix

Each link input renders with a standard bottom border using the grey-500 color token, matching the intended design.

---

Note

Low Risk
Low risk UI-only change: adjusts a Tailwind class on a disabled TextField to prevent incorrect border-bottom-width rendering in Tailwind v4.

Overview
Fixes Portal Links input styling by changing the TextField bottom-border utility from border-b-500 to border-b-grey-500, ensuring Tailwind v4 treats it as a color token rather than a 500px border width.

^{Written by Cursor Bugbot for commit 0a447e3. This will update automatically on new commits. Configure here.}

[coderabbitai]

Walkthrough

The change modifies a styling class on a TextField component in the PortalLinks.tsx file. Specifically, the border styling class is updated from "border-b-500" to "border-b-grey-500". This is a CSS class modification only, with no alterations to the component's functional logic, event handlers, data binding, or overall structure. The PortalLink component and surrounding code remain functionally identical.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing a Tailwind v4 border rendering issue in the PortalLinks component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description clearly explains the problem, fix, and impact with specific file changes and reproduction steps.

_{✏️ 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

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[cursor]

Missing border width makes bottom border invisible

Medium Severity

The class border-b-grey-500 only sets border-bottom-color but doesn't set a border-bottom-width. The project's preflight CSS resets all elements to border-width: 0, so the border remains invisible. Every other bottom-border usage in the codebase pairs a width class with a color class — e.g. border-b border-grey-200 in ListItem.tsx, Table.tsx, and SortableList.tsx. This needs something like border-b alongside border-b-grey-500 to actually render a visible border.