fix(subscription): plan cards fill row, popular = professional

- Replace wrapping flex (maxWidth cap) with a fills-the-row grid
  (repeat(auto-fit, minmax(230px, 1fr))) so the three cards sit in one row
  and grow to the content width — removes the empty gap and stray wrap
- Move the most-popular highlight to the professional (top) plan, matching
  clinic-pro-tauri

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
hamed
2026-07-14 14:49:58 +03:30
co-authored by Claude Opus 4.8
parent 37fc56dc75
commit 1c1cdfab07
2 changed files with 11 additions and 8 deletions
+4 -2
View File
@@ -44,12 +44,14 @@ function mockApi({ my = DEFAULT_MY, plans = PLANS }: { my?: any; plans?: any[] }
beforeEach(() => { get.mockReset(); mockApi(); });
describe('SubscriptionPage', () => {
it('renders the three plans with the most-popular badge on the basic plan', async () => {
it('renders the three plans with the most-popular badge on the professional plan', async () => {
renderWithProviders(<SubscriptionPage />, { route: '/admin/subscription' });
expect(await screen.findByText('پلن پایه')).toBeInTheDocument();
expect(screen.getByText('پلن رایگان')).toBeInTheDocument();
expect(screen.getByText('پلن حرفه‌ای')).toBeInTheDocument();
expect(screen.getByText('محبوب‌ترین')).toBeInTheDocument();
// most-popular badge sits on the professional (top) card, matching tauri
const proCard = within(screen.getByTestId('plan-card-professional'));
expect(proCard.getByText('محبوب‌ترین')).toBeInTheDocument();
});
it('shows the current-plan card without an expiry warning when the plan is healthy', async () => {