fix(dashboard): resolve UI issues across email-* pages#1345
Merged
Conversation
- email-sent: stack the log table and domain reputation card vertically below lg breakpoint instead of crushing them side-by-side on mobile/tablet - email-settings: render managed-domain statuses through a human-readable label map so users don't see raw enums like "pending_dns" - email-themes: make the Select Theme dialog grid one column on mobile, two on sm+, instead of forcing cramped 2 columns everywhere - email-templates: allow the template name row to shrink and truncate so long names don't push the Edit button off-card - email-sent: annotate the boosted capacity label with an arrow and a "(boosted)" text marker so the red/blue strikethrough isn't the only cue - email-drafts: shrink the step connectors on mobile so the 4-step progress bar no longer overflows the viewport at 375px
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📝 WalkthroughWalkthroughSix dashboard email UI components receive responsive design enhancements and display logic refinements: progress bar separators gain mobile-responsive widths, domain reputation card's capacity display adds visual indicators with tooltips and responsive layout, sent page adopts responsive flex stacking, domain settings introduce status label mapping, email template rows improve text truncation and sizing, and email themes implement responsive grid columns. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
Contributor
Greptile SummaryThis PR addresses six UI bugs across the Confidence Score: 5/5Safe to merge — all changes are scoped to presentation and the single comment is a non-blocking style suggestion. Every fix directly addresses a reported layout or accessibility regression with a minimal, correct change. No logic, data, or API paths are altered. The only finding is a redundant type cast that doesn't affect runtime behaviour. No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Viewport width] --> B{≥ lg\n1024 px?}
B -- Yes --> C[flex-row\nTable ↔ Reputation card side-by-side\ncard: w-72 fixed\nConnectors: w-20\nTheme grid: grid-cols-2]
B -- No --> D{≥ sm\n640 px?}
D -- Yes --> E[flex-col\nTable stacked above card\ncard: w-full\nConnectors: w-20\nTheme grid: grid-cols-2]
D -- No --> F[flex-col\nTable stacked above card\ncard: w-full\nConnectors: w-8\nTheme grid: grid-cols-1]
Prompt To Fix All With AIThis is a comment left during a code review.
Path: apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx
Line: 328
Comment:
**Unnecessary type cast and dead fallback**
`domain.status` is typed as `ManagedDomainStatus` and `MANAGED_DOMAIN_STATUS_LABELS` is `Record<ManagedDomainStatus, string>`, so the lookup can never return `undefined` — the cast to `Record<string, string>` and the `?? domain.status` fallback are unreachable. A direct lookup keeps the full type safety.
```suggestion
<span className="text-xs">Status: {MANAGED_DOMAIN_STATUS_LABELS[domain.status]}</span>
```
How can I resolve this? If you propose a fix, please make it concise.Reviews (1): Last reviewed commit: "fix(dashboard): resolve UI issues across..." | Re-trigger Greptile |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@apps/dashboard/src/app/`(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx:
- Around line 43-50: The constant MANAGED_DOMAIN_STATUS_LABELS currently typed
as Record<ManagedDomainStatus, string> forces a type cast where it's looked up;
replace it with an ES6 Map (e.g., new Map<ManagedDomainStatus, string>([...]))
so missing keys return undefined naturally, then update the lookup site that
currently casts the record (the spot using MANAGED_DOMAIN_STATUS_LABELS[...] and
providing a fallback) to use MANAGED_DOMAIN_STATUS_LABELS.get(status) with the
same fallback string; remove the type cast and any related hacks so the type
system safely handles unknown ManagedDomainStatus values.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 3e10a443-67c3-46e9-aab9-cf60b5811ad4
📒 Files selected for processing (6)
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/draft-progress-bar.tsxapps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/domain-reputation-card.tsxapps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsxapps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsxapps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/page-client.tsxapps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Six UI issues found across the email-* dashboard pages, ranked by impact, fixed here:
lg, and let the reputation card span full width on narrow viewports.<span>Status: {domain.status}</span>rendered raw values likepending_dns/pending_verification. Added aMANAGED_DOMAIN_STATUS_LABELSmap and route through it before rendering.grid-cols-2, so at 375px each theme card had ~150px and the preview images were illegible. Changed togrid-cols-1 sm:grid-cols-2.min-w-0/truncate. Fixed both, and made the action columnshrink-0.→arrow between the two numbers,titletooltips on each, and a visible "(boosted)" marker after/h max.w-8 sm:w-20(32px on mobile, 80px otherwise) so all four steps and their labels fit below 640px.Before / after
Each GIF below loops "before" (1s) → "after" (1s) with a red pill in the top-right indicating which frame is which. Full-size stills (before + after + extra viewports) are listed under All screenshots at the bottom.
1. email-sent — two-column layout collapses on narrow viewports
Mobile (375px):
Tablet (900px):
2. email-settings — managed-domain status label
3. email-themes — Change Theme dialog on mobile
4. email-templates — long name overflow
5. email-sent — boosted capacity label
7. email-drafts — draft progress bar on mobile
Test plan
Notes
bg-zinc-900/0.82overlay inside the boost card, so it reads fine in light and dark mode. Not fixing; that part of the review was a false positive.All screenshots
Gist with all the individual before/after PNGs and the GIFs themselves:
https://gist.github.com/BilalG1/edb04740a19c3f2d048da6e602209d45
Summary by CodeRabbit
Release Notes
New Features
Improvements