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 = () => {
return (
<DashboardContent className="grid grid-cols-2">
<DashboardContentSection className="col-span-1">
<DashboardContent className="grid grid-cols-1 xl:grid-cols-2">
<DashboardContentSection className="col-span-1 xl:max-w-lg md:ml-0">
<h1>Workouts</h1>
</DashboardContentSection>
<DashboardContentSection className="col-span-1">
<DashboardContentSection className="col-span-1 xl:max-w-lg md:mr-0">
<h1>Exercises</h1>
</DashboardContentSection>
<DashboardContentSection className="col-span-2">
<DashboardContentSection className="col-span-1 xl:col-span-2">
<h1>Clients</h1>
</DashboardContentSection>
</DashboardContent>

View File

@ -9,7 +9,7 @@ type Props = {
const DashboardContent = (props: Props) => {
const { children, className } = props
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}
</div>
)