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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user