fix: AddCardModal - always show Add button and preview panel by clubanderson · Pull Request #3849 · kubestellar/console

clubanderson · 2026-03-29T05:52:29Z

Closes #3836
Closes #3837

Summary

No way to add cards #3836 fix: Moved the browse tab's "Add X Cards" button from inside BaseModal.Content (where it was hidden below the scrollable card catalog) to a sticky BaseModal.Footer. The button is now always visible at the bottom of the modal when cards are selected.
Bad UI in AddCardModal #3837 fix: The right-side preview panel is now always rendered. When no card is hovered, it shows a placeholder with an eye icon and the message "Hover over a card to see a preview". This eliminates dead space at the bottom and removes the layout shift caused by the panel appearing/disappearing on hover.

Test plan

Open the Add Cards modal, select cards by clicking -- the "Add X Cards" button should always be visible in the footer
Verify the preview panel is always visible on the right side with placeholder text
Hover over different cards and confirm the preview updates in the right panel
Stop hovering and confirm the placeholder returns
Verify AI tab footer still works correctly

Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com

…3836, #3837) - Move the browse tab's "Add X Cards" button from inside the scrollable content area to a sticky BaseModal.Footer, so it is always visible when cards are selected (fixes #3836) - Always render the right-side preview panel with a placeholder message ("Hover over a card to see a preview") when nothing is hovered, eliminating dead space and layout shift (fixes #3837) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kubestellar-prow · 2026-03-29T05:52:33Z

Thanks for your pull request. Before we can look at it, you'll need to add a 'DCO signoff' to your commits.

📝 Please follow instructions in the contributing guide to update your commits with the DCO

Full details of the Developer Certificate of Origin can be found at developercertificate.org.

The list of commits missing DCO signoff:

d68f755 fix: move Add Cards button to footer and always show preview panel (No way to add cards #3836, Bad UI in AddCardModal #3837)

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

kubestellar-prow · 2026-03-29T05:52:34Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign clubanderson for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

netlify · 2026-03-29T05:52:35Z

✅ Deploy Preview for kubestellarconsole ready!

Name	Link
🔨 Latest commit	`d68f755`
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellarconsole/deploys/69c8be20dfc72d00086efacb
😎 Deploy Preview	https://deploy-preview-3849.console-deploy-preview.kubestellar.io
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

github-actions · 2026-03-29T05:52:37Z

👋 Hey @clubanderson — thanks for opening this PR!

🤖 This project is developed exclusively using AI coding assistants.

Please do not attempt to code anything for this project manually.
All contributions should be authored using an AI coding tool such as:

Claude Code (Opus 4.5 / 4.6) — recommended

GitHub Copilot

Cursor

Other AI coding assistants

This ensures consistency in code style, architecture patterns, test coverage,
and commit quality across the entire codebase.

This is an automated message.

github-actions · 2026-03-29T05:52:43Z

Thank you for your contribution! Your PR has been merged.

Check out what's new:

KubeStellar Console — Live multi-cluster dashboard
Marketplace — Community extensions
Knowledge Base — Troubleshooting and how-tos

Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey

Copilot

Pull request overview

This PR updates the Add Cards modal UX to address reported issues where the browse-tab “Add X Cards” action could be hidden and the preview area caused layout shifts.

Changes:

Moves the browse tab’s “Add X Cards” controls into a persistent BaseModal.Footer so the primary action stays visible.
Makes the right-side preview panel always render, showing a placeholder when no card is hovered.
Adds an eye icon for the preview placeholder state.

Copilot · 2026-03-29T05:55:01Z

web/src/components/dashboard/AddCardModal.tsx

+                  <div className="flex flex-col items-center justify-center h-32 rounded-lg border border-dashed border-border/50 bg-secondary/20">
+                    <Eye className="w-6 h-6 text-muted-foreground/40 mb-2" />
+                    <p className="text-xs text-muted-foreground/60 text-center px-4">
+                      {t('dashboard.addCard.hoverToPreview', 'Hover over a card to see a preview')}


The placeholder text uses the existing i18n key dashboard.addCard.hoverToPreview, so the fallback string here won’t be shown for en. In web/src/locales/en/common.json this key currently maps to “Hover over a card to see preview” (missing “a”), so the UI won’t match the intended copy; update the locale string(s) (and other languages if applicable) or remove/align the fallback to avoid divergence.

Suggested change

{t('dashboard.addCard.hoverToPreview', 'Hover over a card to see a preview')}

{t('dashboard.addCard.hoverToPreview', 'Hover over a card to see preview')}

Copilot · 2026-03-29T05:55:02Z

web/src/components/dashboard/AddCardModal.tsx

+                {hoveredCard ? (
+                  <div>
                    {/* Card preview - looks like actual card */}


Preview updates are driven by hoveredCard, which is only set via onMouseEnter/onMouseLeave in the catalog buttons. Keyboard users tabbing through the card buttons won’t ever see a preview, and the placeholder copy also suggests hover-only. Consider also setting/clearing hoveredCard on onFocus/onBlur (and potentially touch interactions) and updating the message to reflect that (e.g., “Hover or focus a card…”).

clubanderson · 2026-03-29T05:55:11Z

🔄 Auto-Applying Copilot Code Review

Copilot code review found 1 code suggestion(s) and 1 general comment(s).

@copilot Please apply all of the following code review suggestions:

web/src/components/dashboard/AddCardModal.tsx (line 1485): {t('dashboard.addCard.hoverToPreview', 'Hover over a card to see preview')}

Also address these general comments:

web/src/components/dashboard/AddCardModal.tsx (line 1459): Preview updates are driven by hoveredCard, which is only set via onMouseEnter/onMouseLeave in the catalog buttons. K

Push all fixes in a single commit. Run cd web && npm run build && npm run lint before committing.

Auto-generated by copilot-review-apply workflow.

Copilot AI review requested due to automatic review settings March 29, 2026 05:52

kubestellar-prow bot added the dco-signoff: no Indicates the PR's author has not signed the DCO. label Mar 29, 2026

clubanderson merged commit e6217ef into main Mar 29, 2026

kubestellar-prow bot deleted the fix/issue-3836-3837-addcardmodal-ux branch March 29, 2026 05:52

kubestellar-prow bot added the size/M Denotes a PR that changes 30-99 lines, ignoring generated files. label Mar 29, 2026

Copilot started reviewing on behalf of clubanderson March 29, 2026 05:53 View session

Copilot AI reviewed Mar 29, 2026

View reviewed changes

clubanderson assigned Copilot Mar 29, 2026

github-actions bot mentioned this pull request Mar 29, 2026

📋 [aw] No-Op Runs #3237

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: AddCardModal - always show Add button and preview panel#3849

fix: AddCardModal - always show Add button and preview panel#3849
clubanderson merged 1 commit intomainfrom
fix/issue-3836-3837-addcardmodal-ux

clubanderson commented Mar 29, 2026

Uh oh!

kubestellar-prow bot commented Mar 29, 2026

Uh oh!

kubestellar-prow bot commented Mar 29, 2026

Uh oh!

netlify bot commented Mar 29, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 29, 2026

Uh oh!

github-actions bot commented Mar 29, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 29, 2026

Uh oh!

Copilot AI Mar 29, 2026

Uh oh!

clubanderson commented Mar 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	{t('dashboard.addCard.hoverToPreview', 'Hover over a card to see a preview')}
	{t('dashboard.addCard.hoverToPreview', 'Hover over a card to see preview')}

Conversation

clubanderson commented Mar 29, 2026

Summary

Test plan

Uh oh!

kubestellar-prow bot commented Mar 29, 2026

Uh oh!

kubestellar-prow bot commented Mar 29, 2026

Uh oh!

netlify bot commented Mar 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for kubestellarconsole ready!

Uh oh!

github-actions bot commented Mar 29, 2026

Uh oh!

github-actions bot commented Mar 29, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

clubanderson commented Mar 29, 2026

🔄 Auto-Applying Copilot Code Review

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Mar 29, 2026 •

edited

Loading