Settings: show Edit Profile/Organization buttons

[romanivan-flamingo]

The Edit Profile and Edit Organization buttons kept their full label on small screens. Render them as labeled buttons on desktop (md+) and icon-only (size="icon" + aria-label) on mobile, mirroring the page-action buttons (e.g. "Edit Settings").

Summary by CodeRabbit

• New Features
  • Introduced a shared ResponsiveActionButton that automatically shows a labeled button on desktop and an icon-only button on mobile (with accessible labels).
• UI Improvements
  • Updated settings edit controls to use the responsive button for consistent desktop/mobile behavior.
  • Updated the customer New Ticket action to use the same responsive button styling and accessibility.
• Accessibility
  • Added/ensured aria-label for icon-only actions to improve usability with assistive technologies.

[coderabbitai]

📝 Walkthrough

Walkthrough

A shared responsive action button was added and adopted by three app cards. Desktop shows labeled actions, while mobile shows icon-only buttons with accessibility labels. Existing callbacks and navigation behavior remain in place.

Changes

Responsive action button adoption

Layer / File(s)	Summary
Shared responsive button openframe/services/openframe-frontend/src/app/components/shared/responsive-action-button.tsx	A client-side shared button component renders a labeled desktop button and an icon-only mobile button from the same props.
Card action updates openframe/services/openframe-frontend/src/app/(app)/customers/components/details-tabs/customer-tickets-tab.tsx, openframe/services/openframe-frontend/src/app/(app)/settings/components/profile-card.tsx, openframe/services/openframe-frontend/src/app/(app)/settings/components/msp-organization-card.tsx	Three card actions switch from inline Button JSX to ResponsiveActionButton while keeping the existing click handlers, labels, and icons.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

A bunny built a button two-in-one,
For screen-size hops when day is done.
One label, one icon, both in a row,
Then off to tickets and settings they'd go.
🐇✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
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.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main Settings UI change by calling out the Edit Profile and Organization buttons.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch hotfix/settings-edit-buttons-mobile

---

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

[coderabbitai]

🧹 Nitpick comments (1)

openframe/services/openframe-frontend/src/app/components/shared/responsive-action-button.tsx (1)

27-59: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Solid responsive pattern; consider widening prop pass-through.

The dual-button CSS toggle correctly avoids hydration flash, and using label as both visible text and the icon-only aria-label keeps the mobile button accessible.

One optional consideration: only onClick, variant, and disabled are forwarded. If a consumer later needs type, loading, id, etc., they can't pass them. A small ...rest spread (typed via the existing ButtonProps) would future-proof this without changing current behavior.

♻️ Optional: forward remaining Button props

 export function ResponsiveActionButton({
   label,
   icon,
   onClick,
   variant = 'outline',
   disabled,
   className,
+  ...rest
 }: ResponsiveActionButtonProps) {

(Update the props interface to extend/pick from ButtonProps, then spread {...rest} onto both buttons.)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@openframe/services/openframe-frontend/src/app/components/shared/responsive-action-button.tsx`
around lines 27 - 59, The ResponsiveActionButton component is only forwarding a
small subset of Button props, so consumers cannot pass through common options
like type, loading, id, or data attributes. Update ResponsiveActionButtonProps
to inherit the remaining ButtonProps and add a rest prop, then spread that rest
onto both Button instances while keeping the existing responsive desktop/mobile
behavior in ResponsiveActionButton unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@openframe/services/openframe-frontend/src/app/components/shared/responsive-action-button.tsx`:
- Around line 27-59: The ResponsiveActionButton component is only forwarding a
small subset of Button props, so consumers cannot pass through common options
like type, loading, id, or data attributes. Update ResponsiveActionButtonProps
to inherit the remaining ButtonProps and add a rest prop, then spread that rest
onto both Button instances while keeping the existing responsive desktop/mobile
behavior in ResponsiveActionButton unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 9a363f4c-f5e3-4290-8c4d-33f724e79a6e

📥 Commits

Reviewing files that changed from the base of the PR and between cad6e49 and 5759297.

📒 Files selected for processing (4)

• openframe/services/openframe-frontend/src/app/(app)/customers/components/details-tabs/customer-tickets-tab.tsx
• openframe/services/openframe-frontend/src/app/(app)/settings/components/msp-organization-card.tsx
• openframe/services/openframe-frontend/src/app/(app)/settings/components/profile-card.tsx
• openframe/services/openframe-frontend/src/app/components/shared/responsive-action-button.tsx