fix(clerk-js): Ensure scrollbox fills the available height - #7222

Merged
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height
Nov 14, 2025
Merged

fix(clerk-js): Ensure scrollbox fills the available height#7222
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Nov 14, 2025

Copy link
Copy Markdown
Member

Description

BEFOREAFTER
Screenshot 2025-11-14 at 1 44 04 PMScreenshot 2025-11-14 at 1 43 54 PM

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Summary by CodeRabbit

  • Style
    • Improved the profile card layout to ensure the scrollable content area properly utilizes available vertical space.

@vercel

vercelBot commented Nov 14, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 14, 2025 7:59pm

@changeset-bot

changeset-botBot commented Nov 14, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b201c42

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitaiBot commented Nov 14, 2025

Copy link
Copy Markdown
Contributor

Walkthrough

A changeset entry marks a patch release for @clerk/clerk-js alongside a single styling adjustment that adds flex: 1 to the ProfileCard outer container, enabling the scrollbox to dynamically fill available vertical space.

Changes

Cohort / File(s)Summary
Release Management
.changeset/proud-months-go.md
Changeset entry documenting patch release notes for @clerk/clerk-js
Component Styling
packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
Added flex: 1 to outer container sx style to enable scrollbox to fill available vertical space

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

  • Minimal scope: single style property addition and metadata file
  • No logic, control flow, or API changes
  • Straightforward layout adjustment with low risk of unintended side effects

Poem

🐰 A scrollbox that stretches with grace,
Now fills every bit of its space,
Flex one takes the lead,
Doing all that we need,
A patch for a prettier place! 📦✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check nameStatusExplanation
Title check✅ PassedThe title directly describes the main change: adding flex: 1 styling to ensure the scrollbox fills available height in ProfileCard component.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch alexcarpenter/fix-scrollbox-height

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.


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

@pkg-pr-new

pkg-pr-newBot commented Nov 14, 2025

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7222

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7222

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7222

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7222

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7222

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7222

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7222

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7222

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7222

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7222

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7222

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7222

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7222

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7222

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7222

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7222

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7222

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7222

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7222

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7222

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7222

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7222

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7222

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7222

commit: b201c42

@barvianbarvian 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.

🙌 fixes it on dashboard at least

@alexcarpenter
alexcarpenter merged commit 4d7a6e0 into mainNov 14, 2025
43 checks passed
@alexcarpenter
alexcarpenter deleted the alexcarpenter/fix-scrollbox-height branch November 14, 2025 20:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@alexcarpenter@barvian@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

fix(clerk-js): Ensure scrollbox fills the available height - #7222

Merged
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height
Nov 14, 2025
Merged

fix(clerk-js): Ensure scrollbox fills the available height#7222
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Nov 14, 2025

Copy link
Copy Markdown
Member

Description

BEFOREAFTER
Screenshot 2025-11-14 at 1 44 04 PMScreenshot 2025-11-14 at 1 43 54 PM

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Summary by CodeRabbit

  • Style
    • Improved the profile card layout to ensure the scrollable content area properly utilizes available vertical space.

@vercel

vercelBot commented Nov 14, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 14, 2025 7:59pm

@changeset-bot

changeset-botBot commented Nov 14, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b201c42

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitaiBot commented Nov 14, 2025

Copy link
Copy Markdown
Contributor

Walkthrough

A changeset entry marks a patch release for @clerk/clerk-js alongside a single styling adjustment that adds flex: 1 to the ProfileCard outer container, enabling the scrollbox to dynamically fill available vertical space.

Changes

Cohort / File(s)Summary
Release Management
.changeset/proud-months-go.md
Changeset entry documenting patch release notes for @clerk/clerk-js
Component Styling
packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
Added flex: 1 to outer container sx style to enable scrollbox to fill available vertical space

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

  • Minimal scope: single style property addition and metadata file
  • No logic, control flow, or API changes
  • Straightforward layout adjustment with low risk of unintended side effects

Poem

🐰 A scrollbox that stretches with grace,
Now fills every bit of its space,
Flex one takes the lead,
Doing all that we need,
A patch for a prettier place! 📦✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check nameStatusExplanation
Title check✅ PassedThe title directly describes the main change: adding flex: 1 styling to ensure the scrollbox fills available height in ProfileCard component.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch alexcarpenter/fix-scrollbox-height

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.


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

@pkg-pr-new

pkg-pr-newBot commented Nov 14, 2025

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7222

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7222

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7222

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7222

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7222

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7222

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7222

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7222

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7222

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7222

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7222

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7222

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7222

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7222

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7222

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7222

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7222

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7222

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7222

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7222

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7222

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7222

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7222

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7222

commit: b201c42

@barvianbarvian 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.

🙌 fixes it on dashboard at least

@alexcarpenter
alexcarpenter merged commit 4d7a6e0 into mainNov 14, 2025
43 checks passed
@alexcarpenter
alexcarpenter deleted the alexcarpenter/fix-scrollbox-height branch November 14, 2025 20:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@alexcarpenter@barvian@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(clerk-js): Ensure scrollbox fills the available height - #7222

Merged
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height
Nov 14, 2025
Merged

fix(clerk-js): Ensure scrollbox fills the available height#7222
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Nov 14, 2025

Copy link
Copy Markdown
Member

Description

BEFOREAFTER
Screenshot 2025-11-14 at 1 44 04 PMScreenshot 2025-11-14 at 1 43 54 PM

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Summary by CodeRabbit

  • Style
    • Improved the profile card layout to ensure the scrollable content area properly utilizes available vertical space.

@vercel

vercelBot commented Nov 14, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 14, 2025 7:59pm

@changeset-bot

changeset-botBot commented Nov 14, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b201c42

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitaiBot commented Nov 14, 2025

Copy link
Copy Markdown
Contributor

Walkthrough

A changeset entry marks a patch release for @clerk/clerk-js alongside a single styling adjustment that adds flex: 1 to the ProfileCard outer container, enabling the scrollbox to dynamically fill available vertical space.

Changes

Cohort / File(s)Summary
Release Management
.changeset/proud-months-go.md
Changeset entry documenting patch release notes for @clerk/clerk-js
Component Styling
packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
Added flex: 1 to outer container sx style to enable scrollbox to fill available vertical space

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

  • Minimal scope: single style property addition and metadata file
  • No logic, control flow, or API changes
  • Straightforward layout adjustment with low risk of unintended side effects

Poem

🐰 A scrollbox that stretches with grace,
Now fills every bit of its space,
Flex one takes the lead,
Doing all that we need,
A patch for a prettier place! 📦✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check nameStatusExplanation
Title check✅ PassedThe title directly describes the main change: adding flex: 1 styling to ensure the scrollbox fills available height in ProfileCard component.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch alexcarpenter/fix-scrollbox-height

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.


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

@pkg-pr-new

pkg-pr-newBot commented Nov 14, 2025

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7222

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7222

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7222

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7222

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7222

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7222

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7222

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7222

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7222

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7222

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7222

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7222

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7222

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7222

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7222

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7222

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7222

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7222

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7222

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7222

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7222

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7222

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7222

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7222

commit: b201c42

@barvianbarvian 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.

🙌 fixes it on dashboard at least

@alexcarpenter
alexcarpenter merged commit 4d7a6e0 into mainNov 14, 2025
43 checks passed
@alexcarpenter
alexcarpenter deleted the alexcarpenter/fix-scrollbox-height branch November 14, 2025 20:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@alexcarpenter@barvian@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(clerk-js): Ensure scrollbox fills the available height - #7222

Merged
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height
Nov 14, 2025
Merged

fix(clerk-js): Ensure scrollbox fills the available height#7222
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Nov 14, 2025

Copy link
Copy Markdown
Member

Description

BEFOREAFTER
Screenshot 2025-11-14 at 1 44 04 PMScreenshot 2025-11-14 at 1 43 54 PM

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Summary by CodeRabbit

  • Style
    • Improved the profile card layout to ensure the scrollable content area properly utilizes available vertical space.

@vercel

vercelBot commented Nov 14, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 14, 2025 7:59pm

@changeset-bot

changeset-botBot commented Nov 14, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b201c42

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitaiBot commented Nov 14, 2025

Copy link
Copy Markdown
Contributor

Walkthrough

A changeset entry marks a patch release for @clerk/clerk-js alongside a single styling adjustment that adds flex: 1 to the ProfileCard outer container, enabling the scrollbox to dynamically fill available vertical space.

Changes

Cohort / File(s)Summary
Release Management
.changeset/proud-months-go.md
Changeset entry documenting patch release notes for @clerk/clerk-js
Component Styling
packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
Added flex: 1 to outer container sx style to enable scrollbox to fill available vertical space

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

  • Minimal scope: single style property addition and metadata file
  • No logic, control flow, or API changes
  • Straightforward layout adjustment with low risk of unintended side effects

Poem

🐰 A scrollbox that stretches with grace,
Now fills every bit of its space,
Flex one takes the lead,
Doing all that we need,
A patch for a prettier place! 📦✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check nameStatusExplanation
Title check✅ PassedThe title directly describes the main change: adding flex: 1 styling to ensure the scrollbox fills available height in ProfileCard component.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch alexcarpenter/fix-scrollbox-height

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.


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

@pkg-pr-new

pkg-pr-newBot commented Nov 14, 2025

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7222

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7222

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7222

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7222

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7222

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7222

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7222

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7222

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7222

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7222

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7222

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7222

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7222

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7222

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7222

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7222

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7222

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7222

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7222

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7222

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7222

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7222

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7222

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7222

commit: b201c42

@barvianbarvian 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.

🙌 fixes it on dashboard at least

@alexcarpenter
alexcarpenter merged commit 4d7a6e0 into mainNov 14, 2025
43 checks passed
@alexcarpenter
alexcarpenter deleted the alexcarpenter/fix-scrollbox-height branch November 14, 2025 20:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@alexcarpenter@barvian@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

fix(clerk-js): Ensure scrollbox fills the available height - #7222

Merged
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height
Nov 14, 2025
Merged

fix(clerk-js): Ensure scrollbox fills the available height#7222
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Nov 14, 2025

Copy link
Copy Markdown
Member

Description

BEFOREAFTER
Screenshot 2025-11-14 at 1 44 04 PMScreenshot 2025-11-14 at 1 43 54 PM

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Summary by CodeRabbit

  • Style
    • Improved the profile card layout to ensure the scrollable content area properly utilizes available vertical space.

@vercel

vercelBot commented Nov 14, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 14, 2025 7:59pm

@changeset-bot

changeset-botBot commented Nov 14, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b201c42

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitaiBot commented Nov 14, 2025

Copy link
Copy Markdown
Contributor

Walkthrough

A changeset entry marks a patch release for @clerk/clerk-js alongside a single styling adjustment that adds flex: 1 to the ProfileCard outer container, enabling the scrollbox to dynamically fill available vertical space.

Changes

Cohort / File(s)Summary
Release Management
.changeset/proud-months-go.md
Changeset entry documenting patch release notes for @clerk/clerk-js
Component Styling
packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
Added flex: 1 to outer container sx style to enable scrollbox to fill available vertical space

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

  • Minimal scope: single style property addition and metadata file
  • No logic, control flow, or API changes
  • Straightforward layout adjustment with low risk of unintended side effects

Poem

🐰 A scrollbox that stretches with grace,
Now fills every bit of its space,
Flex one takes the lead,
Doing all that we need,
A patch for a prettier place! 📦✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check nameStatusExplanation
Title check✅ PassedThe title directly describes the main change: adding flex: 1 styling to ensure the scrollbox fills available height in ProfileCard component.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch alexcarpenter/fix-scrollbox-height

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.


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

@pkg-pr-new

pkg-pr-newBot commented Nov 14, 2025

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7222

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7222

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7222

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7222

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7222

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7222

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7222

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7222

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7222

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7222

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7222

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7222

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7222

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7222

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7222

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7222

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7222

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7222

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7222

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7222

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7222

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7222

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7222

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7222

commit: b201c42

@barvianbarvian 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.

🙌 fixes it on dashboard at least

@alexcarpenter
alexcarpenter merged commit 4d7a6e0 into mainNov 14, 2025
43 checks passed
@alexcarpenter
alexcarpenter deleted the alexcarpenter/fix-scrollbox-height branch November 14, 2025 20:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@alexcarpenter@barvian@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(clerk-js): Ensure scrollbox fills the available height - #7222

Merged
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height
Nov 14, 2025
Merged

fix(clerk-js): Ensure scrollbox fills the available height#7222
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Nov 14, 2025

Copy link
Copy Markdown
Member

Description

BEFOREAFTER
Screenshot 2025-11-14 at 1 44 04 PMScreenshot 2025-11-14 at 1 43 54 PM

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Summary by CodeRabbit

  • Style
    • Improved the profile card layout to ensure the scrollable content area properly utilizes available vertical space.

@vercel

vercelBot commented Nov 14, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 14, 2025 7:59pm

@changeset-bot

changeset-botBot commented Nov 14, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b201c42

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitaiBot commented Nov 14, 2025

Copy link
Copy Markdown
Contributor

Walkthrough

A changeset entry marks a patch release for @clerk/clerk-js alongside a single styling adjustment that adds flex: 1 to the ProfileCard outer container, enabling the scrollbox to dynamically fill available vertical space.

Changes

Cohort / File(s)Summary
Release Management
.changeset/proud-months-go.md
Changeset entry documenting patch release notes for @clerk/clerk-js
Component Styling
packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
Added flex: 1 to outer container sx style to enable scrollbox to fill available vertical space

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

  • Minimal scope: single style property addition and metadata file
  • No logic, control flow, or API changes
  • Straightforward layout adjustment with low risk of unintended side effects

Poem

🐰 A scrollbox that stretches with grace,
Now fills every bit of its space,
Flex one takes the lead,
Doing all that we need,
A patch for a prettier place! 📦✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check nameStatusExplanation
Title check✅ PassedThe title directly describes the main change: adding flex: 1 styling to ensure the scrollbox fills available height in ProfileCard component.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch alexcarpenter/fix-scrollbox-height

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.


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

@pkg-pr-new

pkg-pr-newBot commented Nov 14, 2025

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7222

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7222

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7222

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7222

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7222

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7222

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7222

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7222

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7222

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7222

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7222

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7222

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7222

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7222

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7222

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7222

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7222

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7222

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7222

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7222

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7222

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7222

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7222

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7222

commit: b201c42

@barvianbarvian 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.

🙌 fixes it on dashboard at least

@alexcarpenter
alexcarpenter merged commit 4d7a6e0 into mainNov 14, 2025
43 checks passed
@alexcarpenter
alexcarpenter deleted the alexcarpenter/fix-scrollbox-height branch November 14, 2025 20:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@alexcarpenter@barvian@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(clerk-js): Ensure scrollbox fills the available height - #7222

Merged
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height
Nov 14, 2025
Merged

fix(clerk-js): Ensure scrollbox fills the available height#7222
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Nov 14, 2025

Copy link
Copy Markdown
Member

Description

BEFOREAFTER
Screenshot 2025-11-14 at 1 44 04 PMScreenshot 2025-11-14 at 1 43 54 PM

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Summary by CodeRabbit

  • Style
    • Improved the profile card layout to ensure the scrollable content area properly utilizes available vertical space.

@vercel

vercelBot commented Nov 14, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 14, 2025 7:59pm

@changeset-bot

changeset-botBot commented Nov 14, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b201c42

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitaiBot commented Nov 14, 2025

Copy link
Copy Markdown
Contributor

Walkthrough

A changeset entry marks a patch release for @clerk/clerk-js alongside a single styling adjustment that adds flex: 1 to the ProfileCard outer container, enabling the scrollbox to dynamically fill available vertical space.

Changes

Cohort / File(s)Summary
Release Management
.changeset/proud-months-go.md
Changeset entry documenting patch release notes for @clerk/clerk-js
Component Styling
packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
Added flex: 1 to outer container sx style to enable scrollbox to fill available vertical space

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

  • Minimal scope: single style property addition and metadata file
  • No logic, control flow, or API changes
  • Straightforward layout adjustment with low risk of unintended side effects

Poem

🐰 A scrollbox that stretches with grace,
Now fills every bit of its space,
Flex one takes the lead,
Doing all that we need,
A patch for a prettier place! 📦✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check nameStatusExplanation
Title check✅ PassedThe title directly describes the main change: adding flex: 1 styling to ensure the scrollbox fills available height in ProfileCard component.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch alexcarpenter/fix-scrollbox-height

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.


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

@pkg-pr-new

pkg-pr-newBot commented Nov 14, 2025

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7222

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7222

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7222

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7222

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7222

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7222

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7222

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7222

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7222

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7222

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7222

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7222

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7222

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7222

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7222

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7222

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7222

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7222

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7222

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7222

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7222

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7222

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7222

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7222

commit: b201c42

@barvianbarvian 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.

🙌 fixes it on dashboard at least

@alexcarpenter
alexcarpenter merged commit 4d7a6e0 into mainNov 14, 2025
43 checks passed
@alexcarpenter
alexcarpenter deleted the alexcarpenter/fix-scrollbox-height branch November 14, 2025 20:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@alexcarpenter@barvian@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

fix(clerk-js): Ensure scrollbox fills the available height - #7222

Merged
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height
Nov 14, 2025
Merged

fix(clerk-js): Ensure scrollbox fills the available height#7222
alexcarpenter merged 3 commits into
mainfrom
alexcarpenter/fix-scrollbox-height

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Nov 14, 2025

Copy link
Copy Markdown
Member

Description

BEFOREAFTER
Screenshot 2025-11-14 at 1 44 04 PMScreenshot 2025-11-14 at 1 43 54 PM

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Summary by CodeRabbit

  • Style
    • Improved the profile card layout to ensure the scrollable content area properly utilizes available vertical space.

@vercel

vercelBot commented Nov 14, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 14, 2025 7:59pm

@changeset-bot

changeset-botBot commented Nov 14, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b201c42

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitaiBot commented Nov 14, 2025

Copy link
Copy Markdown
Contributor

Walkthrough

A changeset entry marks a patch release for @clerk/clerk-js alongside a single styling adjustment that adds flex: 1 to the ProfileCard outer container, enabling the scrollbox to dynamically fill available vertical space.

Changes

Cohort / File(s)Summary
Release Management
.changeset/proud-months-go.md
Changeset entry documenting patch release notes for @clerk/clerk-js
Component Styling
packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
Added flex: 1 to outer container sx style to enable scrollbox to fill available vertical space

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

  • Minimal scope: single style property addition and metadata file
  • No logic, control flow, or API changes
  • Straightforward layout adjustment with low risk of unintended side effects

Poem

🐰 A scrollbox that stretches with grace,
Now fills every bit of its space,
Flex one takes the lead,
Doing all that we need,
A patch for a prettier place! 📦✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check nameStatusExplanation
Title check✅ PassedThe title directly describes the main change: adding flex: 1 styling to ensure the scrollbox fills available height in ProfileCard component.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch alexcarpenter/fix-scrollbox-height

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.


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

@pkg-pr-new

pkg-pr-newBot commented Nov 14, 2025

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7222

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7222

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7222

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7222

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7222

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7222

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7222

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7222

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7222

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7222

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7222

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7222

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7222

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7222

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7222

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7222

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7222

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7222

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7222

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7222

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7222

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7222

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7222

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7222

commit: b201c42

@barvianbarvian 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.

🙌 fixes it on dashboard at least

@alexcarpenter
alexcarpenter merged commit 4d7a6e0 into mainNov 14, 2025
43 checks passed
@alexcarpenter
alexcarpenter deleted the alexcarpenter/fix-scrollbox-height branch November 14, 2025 20:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@alexcarpenter@barvian@clerk-cookie