style: sizing and break points for workout grid dashboard

This commit is contained in:
Yehoshua Sandler 2025-05-19 20:20:09 -05:00
parent db89c3e551
commit 0f5f6409cc
2 changed files with 5 additions and 5 deletions

View File

@ -3,14 +3,14 @@ import { DashboardContent, DashboardContentSection } from '@/components/Dashboar
const WorkoutsPage = () => { const WorkoutsPage = () => {
return ( return (
<DashboardContent className="grid grid-cols-2"> <DashboardContent className="grid grid-cols-1 xl:grid-cols-2">
<DashboardContentSection className="col-span-1"> <DashboardContentSection className="col-span-1 xl:max-w-lg md:ml-0">
<h1>Workouts</h1> <h1>Workouts</h1>
</DashboardContentSection> </DashboardContentSection>
<DashboardContentSection className="col-span-1"> <DashboardContentSection className="col-span-1 xl:max-w-lg md:mr-0">
<h1>Exercises</h1> <h1>Exercises</h1>
</DashboardContentSection> </DashboardContentSection>
<DashboardContentSection className="col-span-2"> <DashboardContentSection className="col-span-1 xl:col-span-2">
<h1>Clients</h1> <h1>Clients</h1>
</DashboardContentSection> </DashboardContentSection>
</DashboardContent> </DashboardContent>

View File

@ -9,7 +9,7 @@ type Props = {
const DashboardContent = (props: Props) => { const DashboardContent = (props: Props) => {
const { children, className } = props const { children, className } = props
return ( return (
<div className={cn('flex flex-1 flex-col gap-4 p-4 mx-auto w-full max-w-5xl', className || '')}> <div className={cn('flex flex-1 flex-col gap-4 p-4 mx-auto w-full max-w-6xl', className || '')}>
{children} {children}
</div> </div>
) )