fix: resolve hydration error caused by nested interactive elements

[prathik-05]

Summary

• What changed: Added the asChild prop to the SidebarGroupAction component that wraps the Link navigating to the /dashboard route.

• Why it changed: By default, SidebarGroupAction renders as a native <button>. This caused the Next.js Link component (<a>) to be nested inside a <button>, resulting in invalid HTML semantics (<a> cannot appear as a descendant of <button>) and triggering hydration warnings/errors on the dashboard/profile pages. Using asChild delegates rendering responsibility to the child Link, eliminating the invalid nesting while preserving the existing behavior, styling, and accessibility.

Type of Change

• Bug fix
• New feature
• Refactor
• Documentation
• Test or CI improvement
• Starter template change

Related Issue

Closes #423

Validation

• npm run build — Verified that the Next.js production build completes successfully.
• npm test — Verified that all 81 tests across 9 test files pass successfully.
• npm run lint — Not executed locally. (Mark this as completed only if you actually ran it.)

Additional Manual Verification

• Verified that using the asChild prop delegates rendering responsibility to the child Link component, eliminating the invalid <button> → <a> nesting.
• Verified that the previously observed hydration warning (<a> cannot appear as a descendant of <button>) no longer appears in the browser console.
• Verified that navigation to /dashboard continues to work correctly.
• Verified that hover styles, focus outlines, and click interactions remain unchanged.
• Verified that keyboard navigation (Tab/Enter) behaves as expected.

Screenshots or Recordings

N/A — This change resolves an underlying HTML semantics and hydration issue without introducing visible UI changes.

Checklist

• I kept this PR focused on one primary change.
• I did not commit secrets, local logs, or scratch files.
• I am requesting review on the correct scope.
• I updated documentation if behavior changed (not applicable for this fix).

Summary by CodeRabbit

• Refactor

  • Improved composition of the "Create new playground" action in the dashboard sidebar for more consistent rendering and styling flexibility.

• Style

  • Enhanced playground environment manager buttons with clearer sizing, titles and accessible labels for improved usability and assistive‑technology support.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[github-actions]

👋 Thanks for opening a PR, @prathik-05!

Your PR has entered the 🚦 PR Review Pipeline.

⚪ Standard PR detected — your PR will follow the standard review pipeline.

---

What happens next

Stage	Reviewer	Checks
Stage 1 — Automated Validation	🤖 Bot	DCO · Format · AI/Slop · Duplicate
Stage 2 — Human Review	👥 Maintainer	Code + Quality Review
Stage 3 — PA / Maintainer Review	🔑 Project Admin	Final Merge Decision

A pipeline status comment will appear below and update automatically as your PR progresses.

---

While you wait

• Sign all commits (git commit -s)
• Link your issue (Closes #123)
• Use a feature branch (not main)
• Avoid unrelated changes

This comment is posted only once.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: dcfda2fb-89ae-43ae-b5ed-fc5edc290200

📥 Commits

Reviewing files that changed from the base of the PR and between 3564594 and d97d7d5.

📒 Files selected for processing (1)

• modules/playground/components/env-manager.tsx

---

Walkthrough

The PR composes the dashboard "Create new playground" action with asChild to avoid an extra wrapper element and adds aria-label/title attributes (and a className) to EnvManager's add and delete variable icon buttons for accessibility; no logic or state behavior was changed.

Changes

UI composition and accessibility

Layer / File(s)	Summary
Create Playground Action asChild Composition modules/dashboard/components/dashboard-sidebar.tsx	SidebarGroupAction for "Create new playground" now uses asChild to render as its child element instead of adding its own wrapper.
EnvManager icon buttons accessibility modules/playground/components/env-manager.tsx	Add aria-label and className to the header "Add Variable" icon button, and add title and aria-label to per-row "Delete Variable" icon buttons; no behavioral changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• piyushdotcomm/Editron#421: Related accessibility updates to EnvManager icon buttons.

Suggested labels

type:bug, mentor:piyushdotcomm

Suggested reviewers

• piyushdotcomm
• Maxd646

Poem

🐰 I hopped through JSX, so tidy and spry,
Wrapped buttons unwrapped, now no nested cry.
Labels and titles for keys that we press,
Accessibility blooms — the UI says "yes!" 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR includes changes to env-manager.tsx adding accessibility attributes, which appear unrelated to the hydration error fix or the #423 issue requirements.	Remove the env-manager.tsx changes or provide justification for their inclusion, as they are not related to fixing nested interactive elements in the dashboard/profile hydration error.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check	❓ Inconclusive	The PR addresses issue #423 by using asChild to eliminate nested interactive elements, though the summary mentions dashboard-sidebar changes while #423 specifically reports a logout button issue.	Clarify whether the dashboard-sidebar fix fully addresses the nested elements reported in #423, or if additional changes are needed for the LogoutButton component.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly describes the main fix: resolving hydration errors caused by nested interactive elements, which aligns with the primary change of adding asChild prop.
Description check	✅ Passed	The description covers all required sections including a clear summary, type of change, related issue, validation steps, and manual verification of the fix.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed due to a network error.

---

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