Fix mobile layout across all rcart pages and remove duplicate nav

- Remove duplicate internal nav (.rapp-nav tabs) from folk-cart-shop —
  the shell subnav pills already provide this navigation
- Read initial-view attribute so shell subnav routing works correctly
- Add margin: 0 auto centering to all narrow page components
  (payment-page, payment-request, payments-dashboard, group-buy-page)
- Add overflow-wrap: break-word to prevent text/address overflow
- Comprehensive mobile breakpoints across all components:
  - folk-cart-shop: 600px + 400px (grid stacking, card sizing, forms)
  - folk-payments-dashboard: 600px + 480px (header, cards, tabs)
  - folk-group-buy-page: already had good breakpoints, added centering
  - cart.css: remove justify-content:center (bad for long pages),
    add horizontal padding for mobile
- Fix share-input overflow with min-width:0 + text-overflow

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

modules/rcart/components/cart.css

@@ -4,7 +4,7 @@ main {
 	padding: 0;
 }
 
-/* Center narrow form pages (payment request, payment page, group buy) */
+/* Center narrow form pages (payment request, payment page, group buy, dashboard) */
 main:has(folk-payment-request),
 main:has(folk-payment-page),
 main:has(folk-group-buy-page),
@@ -12,5 +12,11 @@ main:has(folk-payments-dashboard) {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	justify-content: center;
+	padding: 0 0.5rem;
+}
+
+@media (max-width: 600px) {
+	main {
+		min-height: calc(100vh - 44px);
+	}
 }

modules/rcart/components/folk-cart-shop.ts

@@ -67,7 +67,11 @@ class FolkCartShop extends HTMLElement {
 			this.space = parts.length >= 1 ? parts[0] : "default";
 		}
 
-		// Check URL params for initial tab
+		// Read initial view from attribute (set by server routes) or URL params
+		const initView = this.getAttribute("initial-view");
+		if (initView && ["carts","catalog","orders","payments","group-buys","subscriptions"].includes(initView)) {
+			this.view = initView as any;
+		}
 		const params = new URLSearchParams(window.location.search);
 		if (params.get('tab') === 'catalog') this.view = 'catalog';
 		if (params.get('tab') === 'group-buys') this.view = 'group-buys';
@@ -437,16 +441,8 @@ class FolkCartShop extends HTMLElement {
 
 		this.shadow.innerHTML = `
 		<style>${styles}</style>
-		<div class="rapp-nav">
+		<div class="toolbar">
-			<span class="rapp-nav__title">Shop</span>
+			<button class="tab" id="btn-tour" style="font-size:0.8rem">Tour</button>
-			<div class="tabs">
-				<button class="tab ${this.view === 'carts' || this.view === 'cart-detail' ? 'active' : ''}" data-view="carts">🛒 Carts (${this.carts.length})</button>
-				<button class="tab ${this.view === 'catalog' ? 'active' : ''}" data-view="catalog">📦 Catalog (${this.catalog.length})</button>
-				<button class="tab ${this.view === 'group-buys' ? 'active' : ''}" data-view="group-buys">🤝 Group Buys${this.groupBuys.length > 0 ? ` (${this.groupBuys.filter((g: any) => g.status === 'OPEN').length})` : ''}</button>
-				<button class="tab ${this.view === 'orders' ? 'active' : ''}" data-view="orders">📋 Orders (${this.orders.length})</button>
-				<button class="tab ${this.view === 'payments' ? 'active' : ''}" data-view="payments">💳 Payments (${this.payments.length})</button>
-			</div>
-			<button class="tab" id="btn-tour" style="margin-left:auto;font-size:0.8rem">Tour</button>
 			${this.orderQueue.length > 0 ? `<button class="queue-badge" data-action="toggle-queue">Queue (${this.orderQueue.reduce((s: number, i: any) => s + i.quantity, 0)})</button>` : ''}
 		</div>
 		${this.orderQueueOpen && this.orderQueue.length > 0 ? this.renderOrderQueue() : ''}
@@ -1183,14 +1179,11 @@ class FolkCartShop extends HTMLElement {
 
 	private getStyles(): string {
 		return `
-			:host { display: block; padding: 1.5rem; }
+			:host { display: block; padding: 1.5rem; overflow-wrap: break-word; }
 			* { box-sizing: border-box; }
-			.rapp-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 1rem; min-height: 36px; flex-wrap: wrap; }
+			.toolbar { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 0.75rem; min-height: 28px; flex-wrap: wrap; }
-			.rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: var(--rs-text-primary); }
+			.tab { padding: 0.375rem 0.75rem; border-radius: 8px; border: 1px solid var(--rs-border); background: var(--rs-bg-surface); color: var(--rs-text-secondary); cursor: pointer; font-size: 0.8125rem; }
-			.tabs { display: flex; gap: 0.5rem; }
-			.tab { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--rs-border); background: var(--rs-bg-surface); color: var(--rs-text-secondary); cursor: pointer; font-size: 0.875rem; }
 			.tab:hover { border-color: var(--rs-border-strong); color: var(--rs-text-primary); }
-			.tab.active { background: var(--rs-primary-hover); border-color: var(--rs-primary); color: #fff; }
 
 			.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
 			.card { background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 12px; padding: 1.25rem; }
@@ -1342,12 +1335,29 @@ class FolkCartShop extends HTMLElement {
 			.gb-tier-reached { color: #4ade80; background: rgba(34,197,94,0.08); }
 			.gb-tier-current { border-color: var(--rs-primary); color: var(--rs-primary-hover); background: rgba(99,102,241,0.1); font-weight: 600; }
 
-			@media (max-width: 768px) { .catalog-detail-layout { grid-template-columns: 1fr; } }
+			@media (max-width: 768px) {
+				.catalog-detail-layout { grid-template-columns: 1fr; }
+			}
 			@media (max-width: 600px) {
+				:host { padding: 1rem 0.75rem; }
 				.grid { grid-template-columns: 1fr; }
-				.catalog-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
+				.gb-grid { grid-template-columns: 1fr; }
+				.catalog-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
 				.url-input-row { flex-direction: column; }
 				.detail-actions { flex-direction: column; }
+				.section-title { font-size: 1.0625rem; }
+				.detail-title { font-size: 1.25rem; }
+				.card { padding: 1rem; }
+				.order-card { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
+				.new-cart-form, .contribute-form, .new-payment-form { flex-direction: column; }
+				.item-row { gap: 0.5rem; }
+			}
+			@media (max-width: 400px) {
+				:host { padding: 0.75rem 0.5rem; }
+				.catalog-grid { grid-template-columns: 1fr 1fr; }
+				.card { padding: 0.75rem; border-radius: 8px; }
+				.card-title { font-size: 0.875rem; }
+				.section-title { font-size: 1rem; }
 			}
 		`;
 	}

modules/rcart/components/folk-group-buy-page.ts

@@ -436,7 +436,7 @@ class FolkGroupBuyPage extends HTMLElement {
 
 	private getStyles(): string {
 		return `
-			:host { display: block; padding: 2rem 1.5rem; width: 100%; max-width: 960px; -webkit-tap-highlight-color: transparent; }
+			:host { display: block; padding: 2rem 1.5rem; width: 100%; max-width: 960px; margin: 0 auto; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; }
 			* { box-sizing: border-box; }
 			button, a, input, select, textarea, [role="button"] { touch-action: manipulation; }
 

modules/rcart/components/folk-payments-dashboard.ts

@@ -228,7 +228,7 @@ class FolkPaymentsDashboard extends HTMLElement {
 
 	private getStyles(): string {
 		return `
-			:host { display: block; padding: 1.5rem; width: 100%; max-width: 720px; }
+			:host { display: block; padding: 1.5rem; width: 100%; max-width: 720px; margin: 0 auto; overflow-wrap: break-word; }
 			* { box-sizing: border-box; }
 
 			.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
@@ -279,11 +279,18 @@ class FolkPaymentsDashboard extends HTMLElement {
 			.status-cancelled { background: rgba(239,68,68,0.15); color: #dc2626; }
 			.status-filled { background: rgba(59,130,246,0.15); color: #2563eb; }
 
-			@media (max-width: 480px) {
+			@media (max-width: 600px) {
-				:host { padding: 1rem; }
+				:host { padding: 1rem 0.75rem; }
+				.title { font-size: 1.25rem; }
 				.header { flex-direction: column; align-items: stretch; }
+				.tab { font-size: 0.8125rem; padding: 0.5rem 0.75rem; }
+			}
+			@media (max-width: 480px) {
+				:host { padding: 0.75rem 0.5rem; }
 				.payment-card { flex-direction: column; align-items: stretch; gap: 0.5rem; }
 				.card-right { flex-direction: row; align-items: center; justify-content: space-between; }
+				.card-amount { font-size: 0.875rem; }
+				.empty-state { padding: 2rem 1rem; }
 			}
 		`;
 	}