Optimize mobile layouts and fix integration tab overflow

Mobile Card Layout Improvements:
- Remove redundant Card/CardContent wrappers in mobile layouts
- Use simple div with border-2 border-border rounded-lg p-4 space-y-3 bg-card
- This provides wider cards without extra padding from wrapper div
- Applied to all admin pages: AdminProducts, AdminOrders, AdminMembers, AdminConsulting, AdminEvents

Integration Tab Fix:
- Remove redundant Calendar ID display in Alert component
- The Calendar ID is already visible in the input field above
- This Alert was causing horizontal overflow on mobile
- Alert showed 'OAuth configured. Calendar ID: {long_email}@group.calendar.google.com'
- Removing this eliminates the overflow issue
This commit is contained in:
dwindown
2025-12-25 10:33:54 +07:00
parent d07c32db1d
commit 3d7408a607
6 changed files with 47 additions and 57 deletions

View File

@@ -410,8 +410,8 @@ export default function AdminConsulting() {
{/* Mobile Card Layout */}
<div className="md:hidden space-y-3 p-4">
{upcomingSlots.map((slot) => (
<Card key={slot.id} className="border-2 border-border">
<CardContent className="p-4 space-y-3">
<div key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
<div>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap mb-1">
@@ -540,8 +540,8 @@ export default function AdminConsulting() {
{/* Mobile Card Layout */}
<div className="md:hidden space-y-3 p-4">
{pastSlots.slice(0, 20).map((slot) => (
<Card key={slot.id} className="border-2 border-border">
<CardContent className="p-4 space-y-2">
<div key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
<div>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<h3 className="font-semibold text-sm">