fix: Apple HIG mobile responsiveness - hero typography, tables, SEO metadata
Mobile: - HeroSection: scale typography 7xl → 4xl sm:5xl md:6xl lg:7xl, responsive px/py - StorefrontFooter: newsletter input responsive w-full sm:w-52, larger touch targets - AdminTable: add overflow-x-auto + min-w-[600px] for horizontal scroll - AdminOrdersPanel: same table overflow fix - AdminFilterTabs: increase text sizes sm:text-xs, add padding - Tuxedo page: SectionHeader mobile-first sizing, feature grid grid-cols-1 sm:2 - Tuxedo feature labels: show on all screens (remove hidden sm:block) SEO: - Root layout: add viewport export, full OG/Twitter metadata, metadataBase - Tuxedo layout: complete OG + Twitter card + canonical + keywords + robots - Indian River layout: same complete SEO treatment All TypeScript checks pass.
This commit is contained in:
@@ -306,8 +306,8 @@ export default function AdminOrdersPanel({
|
||||
<p className="text-xs text-stone-400 mt-1">Try adjusting your filters</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-hidden rounded-xl border border-[var(--admin-border)] bg-white">
|
||||
<table className="w-full text-sm">
|
||||
<div className="overflow-x-auto rounded-xl border border-[var(--admin-border)] bg-white">
|
||||
<table className="w-full text-sm min-w-[700px]">
|
||||
<thead className="bg-stone-50">
|
||||
<tr className="border-b border-[var(--admin-border)]">
|
||||
<th className="text-left px-4 py-3 font-semibold text-[var(--admin-text-muted)] text-xs">Order</th>
|
||||
|
||||
@@ -31,11 +31,11 @@ type AdminFilterTabsProps = {
|
||||
const sizeClasses = {
|
||||
sm: {
|
||||
container: "p-0.5 gap-0.5",
|
||||
tab: "px-2.5 py-1.5 text-[10px]",
|
||||
tab: "px-2.5 sm:px-3 py-2 sm:py-1.5 text-xs sm:text-[10px]",
|
||||
},
|
||||
md: {
|
||||
container: "p-1 gap-0.5",
|
||||
tab: "px-3 py-1.5 text-xs",
|
||||
tab: "px-3 sm:px-4 py-2.5 sm:py-1.5 text-sm sm:text-xs",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -27,12 +27,12 @@ export default function AdminTable<T extends Record<string, unknown>>({
|
||||
className = "",
|
||||
}: AdminTableProps<T>) {
|
||||
return (
|
||||
<div className={`overflow-hidden rounded-2xl border border-[var(--admin-border)] bg-white shadow-[var(--admin-shadow-sm)] ${className}`}>
|
||||
<table className="w-full text-left text-sm">
|
||||
<div className={`overflow-x-auto rounded-2xl border border-[var(--admin-border)] bg-white shadow-[var(--admin-shadow-sm)] ${className}`}>
|
||||
<table className="w-full text-left text-sm min-w-[600px]">
|
||||
<thead>
|
||||
<tr className="border-b border-[var(--admin-border)] bg-[var(--admin-bg-subtle)]">
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} className={`px-5 py-3.5 text-[10px] font-bold uppercase tracking-widest text-[var(--admin-text-muted)] ${col.className ?? ""}`}>
|
||||
<th key={col.key} className={`px-3 sm:px-5 py-3 text-xs sm:text-[10px] font-bold uppercase tracking-widest text-[var(--admin-text-muted)] whitespace-nowrap ${col.className ?? ""}`}>
|
||||
{col.header}
|
||||
</th>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user