Fix: alignment and make it responsive!

[ItzNotABug]

What does this PR do?

Fixes the direction based on the viewport!

Test Plan

Manual.

Before -

After -

Related PRs and Issues

N/A.

Have you read the Contributing Guidelines on issues?

Yes.

Summary by CodeRabbit

• New Features
  • Added responsive layout behavior to the empty state card component. The layout now automatically adapts its orientation based on screen size, providing optimized presentation across mobile and desktop devices.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[appwrite]

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

Site	Status	Logs	Preview	QR
console-stage 688b7cf6003b1842c9dc	Ready	View Logs	Preview URL

Tip

Global CDN and DDoS protection come free with every Sites deployment

[coderabbitai]

Walkthrough

The changes introduce responsive design capabilities to the EmptyCardImageCloud component by adding a new public responsive boolean prop. When enabled, the component dynamically controls the Stack layout direction based on viewport size, switching between column (small viewports) and row (larger viewports) configurations. The implementation integrates with the existing viewport store's isSmallViewport value. Two route components (updateMockNumbers.svelte and emailSignature.svelte) are updated to pass the new responsive prop to the component.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Component logic: Simple ternary-based reactive assignment for direction state; straightforward conditional based on responsive and isSmallViewport
• Repetitive changes: The same prop addition across two consumer components follows an identical pattern
• Scope: Minimal file spread (3 files); no structural refactoring or complex business logic

Additional attention may be warranted for:

• Verification that the viewport store import and isSmallViewport observable work correctly in the reactive context
• Testing responsive behavior across breakpoints to ensure layout switches as intended

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix: alignment and make it responsive!' directly relates to the core change: adding responsive behavior with viewport-aware direction toggling to the EmptyCardImageCloud component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-alignment

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/lib/components/emptyCardImageCloud.svelte (1)

1-14: Viewport‑aware direction logic is clean and preserves existing behavior

The responsive prop with the reactive direction assignment correctly switches between 'column' on small viewports and 'row' otherwise, while keeping 'row' as the default for non‑responsive usages, so existing callsites stay unchanged. As a minor style tweak, if you end up reusing this union elsewhere, consider extracting a type StackDirection = 'column' | 'row' | 'row-reverse' | 'column-reverse'; and declaring let direction: StackDirection = 'row'; for reuse.

Also applies to: 17-17

src/routes/(console)/project-[region]-[project]/auth/security/updateMockNumbers.svelte (1)

98-98: Confirm or rename analytics source identifier for mock numbers card

The responsive prop wiring is correct and properly enables viewport-aware direction logic. However, the source="email_signature_card" identifier is reused from the email signature template (line 18 of emailSignature.svelte), even though this card serves a different purpose. Confirm this reuse is intentional, or rename it to mock_numbers_card for clearer analytics tracking.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a5c9df2 and 9e8c3e2.

📒 Files selected for processing (3)

• src/lib/components/emptyCardImageCloud.svelte (1 hunks)
• src/routes/(console)/project-[region]-[project]/auth/security/updateMockNumbers.svelte (1 hunks)
• src/routes/(console)/project-[region]-[project]/auth/templates/emailSignature.svelte (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2025-11-19T11:22:42.553Z

Learnt from: atharvadeosthale
Repo: appwrite/console PR: 2512
File: src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte:51-83
Timestamp: 2025-11-19T11:22:42.553Z
Learning: In src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte, the Lovable integration URL format `https://lovable.dev/` with `autosubmit` and `prompt` as query parameters (set via searchParams) is correct and functional.

Applied to files:

• src/routes/(console)/project-[region]-[project]/auth/security/updateMockNumbers.svelte

📚 Learning: 2025-11-19T11:22:42.553Z

Learnt from: atharvadeosthale
Repo: appwrite/console PR: 2512
File: src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte:51-83
Timestamp: 2025-11-19T11:22:42.553Z
Learning: In src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte, the Cursor integration URL format `https://cursor.com/link/prompt` with the `text` query parameter is correct and functional.

Applied to files:

• src/routes/(console)/project-[region]-[project]/auth/security/updateMockNumbers.svelte

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: build
• GitHub Check: e2e

🔇 Additional comments (1)

src/routes/(console)/project-[region]-[project]/auth/templates/emailSignature.svelte (1)

18-18: EmptyCardImageCloud responsive usage in email signature looks good

Adding the boolean responsive attribute here correctly opts this card into the new viewport‑aware Layout.Stack direction behavior without impacting other callsites; the slot contracts remain intact.