Fix responsiveness in remaining admin pages
AdminMembers.tsx: - Wrap table in overflow-x-auto div for horizontal scrolling - Add whitespace-nowrap to TableHead cells AdminConsulting.tsx: - Wrap both tables (upcoming and past) in overflow-x-auto div - Add whitespace-nowrap to all TableHead cells - Change stats grid from grid-cols-1 md:grid-cols-4 to grid-cols-2 md:grid-cols-4 for better mobile layout AdminEvents.tsx: - Wrap both tables (events and availability) in overflow-x-auto div - Add whitespace-nowrap to all TableHead cells - Change dialog form grids from grid-cols-2 to grid-cols-1 md:grid-cols-2 CurriculumEditor.tsx: - Make curriculum header responsive (flex-col sm:flex-row) - Make module card headers responsive (stack title and buttons on mobile) - Make lesson items responsive (stack title and buttons on mobile) All admin pages are now fully responsive with proper horizontal scrolling for tables on mobile and stacked layouts for forms and button groups.
This commit is contained in:
@@ -279,7 +279,7 @@ export function CurriculumEditor({ productId }: CurriculumEditorProps) {
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
|
||||
<h3 className="text-lg font-semibold">Curriculum</h3>
|
||||
<Button onClick={handleNewModule} size="sm" className="shadow-sm">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
@@ -298,7 +298,7 @@ export function CurriculumEditor({ productId }: CurriculumEditorProps) {
|
||||
{modules.map((module, moduleIndex) => (
|
||||
<Card key={module.id} className="border-2 border-border">
|
||||
<CardHeader className="py-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
|
||||
<button
|
||||
onClick={() => toggleModule(module.id)}
|
||||
className="flex items-center gap-2 text-left"
|
||||
@@ -341,7 +341,7 @@ export function CurriculumEditor({ productId }: CurriculumEditorProps) {
|
||||
{getLessonsForModule(module.id).map((lesson, lessonIndex) => (
|
||||
<div
|
||||
key={lesson.id}
|
||||
className="flex items-center justify-between p-2 bg-muted rounded-md"
|
||||
className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-2 bg-muted rounded-md"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<GripVertical className="w-4 h-4 text-muted-foreground" />
|
||||
|
||||
Reference in New Issue
Block a user