feat: complete mobile responsiveness — merchant nav, sticky checkout,…#187
Merged
Conversation
… Instagram-style feed, table-to-card conversions Fix 1 (CRITICAL): Merchant mobile navigation - Created merchant-mobile-nav.tsx (5-item bottom bar with elevated +New button) - Wired existing merchant-header.tsx into merchant layout - Added MobileDrawer with hamburger trigger to merchant layout - Added pb-20 main content padding to clear bottom nav Fix 2 (CRITICAL): Mode Switcher on mobile - Removed isDesktop guard from ModeSwitcher in merchant sidebar - ModeSwitcher now renders inside MobileDrawer when sidebar opens Fix 3 (HIGH): Cart checkout sticky button - Added fixed bottom-20 sticky bar with total + checkout button (lg:hidden) Fix 4 (HIGH): WhatsApp OTP input overflow - Reduced OTP box to w-10 h-12 on mobile (sm:w-12 sm:h-14 on desktop) - Reduced gap to gap-2 sm:gap-3 Fix 5 (HIGH): Merchant profile tabs overflow - Added overflow-x-auto scrollbar-hide on tab container - Added whitespace-nowrap on tab labels - Hidden view-toggle on mobile (hidden sm:flex) Fix 6 (MEDIUM): Merchant products mobile grid - Force grid view on mobile (md:hidden), hide view toggle below md - Fixed filter bar min-width from 300px to 200px Fix 7 (MEDIUM): Merchant wallet mobile cards - Escrow table: md:hidden card view + hidden md:block table Fix 8 (MEDIUM): Catalogue padding - Reduced inner container to px-3 sm:px-8 Fix 9 (MEDIUM): Verification page polish - Heading scaled: text-2xl sm:text-3xl lg:text-4xl - Form indent: pl-0 sm:pl-11 Fix 10 (LOW): Feed full-bleed - Zero gap + divide-y dividers on mobile - ProductCard accepts className prop for rounded-none on mobile Fix 11 (LOW): Sort pill tap targets - min-h-[44px], px-4 py-2.5, gap-2
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughRefactors UI spacing and responsive sizing across buyer and merchant dashboards, adds a merchant mobile navigation bar and a mobile sticky checkout, restructures merchant products rendering for mobile vs desktop, and extends ProductCard with an optional className prop. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/app/(dashboard)/merchant/products/page.tsx (1)
296-565:⚠️ Potential issue | 🟠 MajorAvoid mounting both responsive branches simultaneously.
Both branches map
filteredProducts, so each product card tree is created twice and the hidden branch still mounts its<img>elements. That will scale poorly on larger inventories. Derive an effective view mode from the breakpoint, or resetviewModebelowmd, so only one catalog layout renders.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/app/`(dashboard)/merchant/products/page.tsx around lines 296 - 565, The page currently mounts both responsive branches (mobile section with md:hidden and desktop sections gated by viewMode) causing filteredProducts to be mapped twice and hidden imgs to mount; fix by making rendering mutually exclusive: derive an effective view mode from the breakpoint (e.g., use window.matchMedia or a useMediaQuery hook) and override/reset viewMode for widths < md so only the mobile branch renders, or conditionally render the desktop branches only when the media query matches (instead of relying on CSS classes alone); update references in this file to use the media-query-driven boolean when deciding to map filteredProducts (affecting viewMode, the md:hidden mobile section, and the desktop grid/table sections) so only one product tree is mounted.
🧹 Nitpick comments (2)
apps/web/src/components/layout/merchant-mobile-nav.tsx (1)
29-32: Consider addingaria-labelto the center action button for accessibility.The "New" button only has an icon visible initially (the label is small text below). Adding an
aria-labelimproves screen reader experience.♻️ Suggested fix
- <div className="size-12 rounded-full bg-primary text-white flex items-center justify-center shadow-lg shadow-primary/30 active:scale-95 transition-transform"> + <div + className="size-12 rounded-full bg-primary text-white flex items-center justify-center shadow-lg shadow-primary/30 active:scale-95 transition-transform" + aria-hidden="true" + >And on the Link:
- <Link - key={item.href} - href={item.href} - className="flex flex-col items-center gap-0.5 -mt-4" - > + <Link + key={item.href} + href={item.href} + className="flex flex-col items-center gap-0.5 -mt-4" + aria-label="Add new product" + >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/components/layout/merchant-mobile-nav.tsx` around lines 29 - 32, The center action button in the MerchantMobileNav component renders only an icon (see the div with class "size-12 rounded-full bg-primary..." and the inner span "material-symbols-outlined") so add an accessible name by adding an aria-label (e.g., aria-label="New" or aria-label="Create new item") to that button container or the interactive element that wraps it; also ensure the surrounding Link (if present) includes an aria-label or descriptive aria-labelledby to provide the same screen-reader text.apps/web/src/components/merchant/wallet/merchant-wallet-dashboard.tsx (1)
163-166: Consider expanding status color mapping for better visual distinction.The status badge only maps 2 of 9 possible
OrderStatusvalues to specific colors. Statuses likeCANCELLED,DISPUTE, orDELIVEREDfall back to the neutral gray (bg-slate-300), which may confuse users.Based on
packages/shared/src/enums/order-status.enum.ts, consider a more complete mapping:♻️ Suggested status color mapping
- <span className={cn( - "size-1.5 rounded-full", - order.status === "COMPLETED" ? "bg-emerald-500" : order.status === "PAID" ? "bg-amber-500" : "bg-slate-300" - )} /> + <span className={cn( + "size-1.5 rounded-full", + { + "bg-emerald-500": order.status === "COMPLETED" || order.status === "DELIVERED", + "bg-amber-500": order.status === "PAID" || order.status === "PREPARING" || order.status === "IN_TRANSIT" || order.status === "DISPATCHED", + "bg-rose-500": order.status === "CANCELLED" || order.status === "DISPUTE", + "bg-slate-300": order.status === "PENDING_PAYMENT", + } + )} />Note: The same logic at lines 204-206 in the desktop table view should be updated for consistency.
🤖 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/web/src/components/buyer/cart/cart-view.tsx`:
- Around line 467-472: The visual disabled state is not aligned with the
functional disabled prop: include isSubmitting in the className conditional so
the button gets the "disabled" styles when isSubmitting is true; update the
conditional that currently checks !selectedMerchantId || !isAddressComplete to
also check isSubmitting (e.g., use isSubmitting || !selectedMerchantId ||
!isAddressComplete) so the button in the CartView component (the checkout/submit
button using isSubmitting, selectedMerchantId, isAddressComplete) shows the
"bg-slate-200 text-slate-400 cursor-not-allowed" styling whenever it is
functionally disabled.
---
Outside diff comments:
In `@apps/web/src/app/`(dashboard)/merchant/products/page.tsx:
- Around line 296-565: The page currently mounts both responsive branches
(mobile section with md:hidden and desktop sections gated by viewMode) causing
filteredProducts to be mapped twice and hidden imgs to mount; fix by making
rendering mutually exclusive: derive an effective view mode from the breakpoint
(e.g., use window.matchMedia or a useMediaQuery hook) and override/reset
viewMode for widths < md so only the mobile branch renders, or conditionally
render the desktop branches only when the media query matches (instead of
relying on CSS classes alone); update references in this file to use the
media-query-driven boolean when deciding to map filteredProducts (affecting
viewMode, the md:hidden mobile section, and the desktop grid/table sections) so
only one product tree is mounted.
---
Nitpick comments:
In `@apps/web/src/components/layout/merchant-mobile-nav.tsx`:
- Around line 29-32: The center action button in the MerchantMobileNav component
renders only an icon (see the div with class "size-12 rounded-full
bg-primary..." and the inner span "material-symbols-outlined") so add an
accessible name by adding an aria-label (e.g., aria-label="New" or
aria-label="Create new item") to that button container or the interactive
element that wraps it; also ensure the surrounding Link (if present) includes an
aria-label or descriptive aria-labelledby to provide the same screen-reader
text.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 948dc999-3bc3-403f-b617-d212708e3b57
📒 Files selected for processing (12)
apps/web/src/app/(dashboard)/buyer/catalogue/page.tsxapps/web/src/app/(dashboard)/buyer/feed/page.tsxapps/web/src/app/(dashboard)/buyer/profile/page.tsxapps/web/src/app/(dashboard)/merchant/layout.tsxapps/web/src/app/(dashboard)/merchant/products/page.tsxapps/web/src/app/(dashboard)/merchant/verification/page.tsxapps/web/src/components/buyer/cart/cart-view.tsxapps/web/src/components/layout/merchant-mobile-nav.tsxapps/web/src/components/layout/merchant-sidebar.tsxapps/web/src/components/merchant/profile/merchant-profile-view.tsxapps/web/src/components/merchant/wallet/merchant-wallet-dashboard.tsxapps/web/src/components/shared/product-card.tsx
This was referenced Mar 18, 2026
Merged
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
1 participant
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.
… Instagram-style feed, table-to-card conversions
Fix 1 (CRITICAL): Merchant mobile navigation
Fix 2 (CRITICAL): Mode Switcher on mobile
Fix 3 (HIGH): Cart checkout sticky button
Fix 4 (HIGH): WhatsApp OTP input overflow
Fix 5 (HIGH): Merchant profile tabs overflow
Fix 6 (MEDIUM): Merchant products mobile grid
Fix 7 (MEDIUM): Merchant wallet mobile cards
Fix 8 (MEDIUM): Catalogue padding
Fix 9 (MEDIUM): Verification page polish
Fix 10 (LOW): Feed full-bleed
Fix 11 (LOW): Sort pill tap targets
Summary by CodeRabbit
New Features
UI/UX Improvements