Skip to content

Commit 8b7fcf7

Browse files
ParikshitAgarwalParikshitAgarwal
committed
fix example-responsiveness
1 parent d1189a0 commit 8b7fcf7

File tree

3 files changed

+36
-41
lines changed

3 files changed

+36
-41
lines changed

‎app/examples/page.tsx

+20-27
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@ export default function Component() {
9999
}
100100

101101
return (
102-
<Card className="min-h-screen text-gray-100 md:p-8">
103-
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
102+
<Card className="min-h-screen mt-7 text-gray-100 md:p-8">
103+
<div className="grid grid-cols-1 md:grid-cols-3 mid-lg:grid-cols-4 gap-3 xl:gap-6">
104104
{/* Revenue Card */}
105105
<Card className="md:col-span-2 border-gray-800">
106106
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@@ -131,7 +131,7 @@ export default function Component() {
131131
</Card>
132132

133133
{/* Subscriptions Card */}
134-
<Card className="md:row-span-` border-gray-800">
134+
<Card className="md:col-span-1 border-gray-800">
135135
<CardHeader>
136136
<CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
137137
</CardHeader>
@@ -174,7 +174,7 @@ export default function Component() {
174174
<CardHeader>
175175
<CardTitle className="text-sm font-medium">Schedule</CardTitle>
176176
</CardHeader>
177-
<CardContent className="w-[93%] mx-auto rounded-md border border-gray-800">
177+
<CardContent className="p-2 mx-auto w-[93%] rounded-md border border-gray-800">
178178
<Calendar
179179
mode="single"
180180
selected={date}
@@ -191,7 +191,7 @@ export default function Component() {
191191
<Users className="h-4 w-4 text-purple-400" />
192192
</CardHeader>
193193
<CardContent>
194-
<ScrollArea className="h-[200px]">
194+
<ScrollArea className="pt-5 h-[240px]" >
195195
<div className="space-y-4">
196196
{[
197197
{ name: "Sofia Davis", role: "Product Manager", image: "/placeholder.svg?height=32&width=32" },
@@ -207,7 +207,7 @@ export default function Component() {
207207
</Avatar>
208208
<div>
209209
<div className="font-medium">{member.name}</div>
210-
<div className="text-sm text-gray-400">{member.role}</div>
210+
<div className="text-xs text-gray-400">{member.role}</div>
211211
</div>
212212
</div>
213213
))}
@@ -222,27 +222,20 @@ export default function Component() {
222222
<CardTitle className="text-sm font-medium">App Settings</CardTitle>
223223
</CardHeader>
224224
<CardContent className="space-y-4">
225-
<div className="flex items-center justify-between">
226-
<div className="space-y-0.5">
227-
<Label>Dark Mode</Label>
228-
<div className="text-xs text-gray-400">Toggle dark mode on/off</div>
229-
</div>
230-
<Switch />
231-
</div>
232-
<div className="flex items-center justify-between">
233-
<div className="space-y-0.5">
234-
<Label>Notifications</Label>
235-
<div className="text-xs text-gray-400">Receive push notifications</div>
236-
</div>
237-
<Switch />
238-
</div>
239-
<div className="flex items-center justify-between">
240-
<div className="space-y-0.5">
241-
<Label>Data Saver</Label>
242-
<div className="text-xs text-gray-400">Reduce data usage</div>
225+
{[
226+
{ label: "Dark Mode", description: "Toggle dark mode on/off" },
227+
{ label: "Notifications", description: "Receive push notifications" },
228+
{ label: "Data Saver", description: "Reduce data usage" },
229+
{ label: "Auto Updates", description: "Automatically install updates" },
230+
].map((setting, index) => {
231+
return <div key={index} className="flex items-center justify-between">
232+
<div className="space-y-0.5">
233+
<Label>{setting.label}</Label>
234+
<div className="text-[11px] text-gray-400">{setting.description}</div>
235+
</div>
236+
<Switch />
243237
</div>
244-
<Switch />
245-
</div>
238+
})}
246239
</CardContent>
247240
</Card>
248241

@@ -354,7 +347,7 @@ export default function Component() {
354347
</div>
355348
</CardContent>
356349
</Card>
357-
<Card className="md:col-span-1 lg:col-span-1 border-gray-800">
350+
<Card className="md:col-span-1 lg:col-span-2 border-gray-800">
358351
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
359352
<CardTitle className="text-sm font-medium">Customize</CardTitle>
360353
<Palette className="h-4 w-4 " />

‎components/ui/calendar.tsx

+13-14
Original file line numberDiff line numberDiff line change
@@ -13,36 +13,35 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
1313
return (
1414
<DayPicker
1515
showOutsideDays={showOutsideDays}
16-
className={cn('p-3', className)}
16+
className={cn('py-3', className)}
1717
classNames={{
18-
months:
19-
"flex flex-col sm:flex-row space-y-4 sm:space-y-0 justify-center",
20-
month: "flex flex-col items-center space-y-4",
21-
month_caption: "flex justify-center pt-1 relative items-center",
18+
months: "relative space-y-4 sm:space-y-0 ",
19+
month: "flex flex-col w-full items-center space-y-4 ",
20+
month_caption: "flex justify-center mt-2 relative items-center",
2221
caption_label: "text-sm font-medium",
2322
nav: "space-x-1 flex items-center ",
2423
button_previous: cn(
2524
buttonVariants({ variant: "outline" }),
26-
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-5 top-5",
25+
"h-7 w-7 bg-transparent p-0 opacity-50 absolute top-1 hover:opacity-100",
2726
),
2827
button_next: cn(
2928
buttonVariants({ variant: "outline" }),
30-
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-5 top-5",
29+
"h-7 w-7 bg-transparent p-0 opacity-50 absolute right-0 top-1 hover:opacity-100",
3130
),
3231
month_grid: "w-full border-collapse space-y-1",
33-
weekdays: "flex",
32+
weekdays: "flex justify-evenly",
3433
weekday:
35-
"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
36-
week: "flex w-full mt-2",
37-
day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 rounded-1",
34+
"w-5 xl:w-7 text-muted-foreground rounded-md font-normal text-sm",
35+
week: "flex w-full mt-2 justify-evenly items-center",
36+
day: "w-5 xl:w-7 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 rounded-1",
3837
day_button: cn(
3938
buttonVariants({ variant: "ghost" }),
40-
"h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-l-md rounded-r-md",
39+
"w-5 xl:w-7 p-0 font-normal aria-selected:opacity-100 rounded-l-md rounded-r-md",
4140
),
4241
range_end: "day-range-end",
4342
selected:
44-
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-l-md rounded-r-md",
45-
today: "bg-accent text-accent-foreground",
43+
" bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-l-md rounded-r-md",
44+
today: "bg-accent text-accent-foreground rounded-l-md rounded-r-md",
4645
outside:
4746
"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
4847
disabled: "text-muted-foreground opacity-50",

‎tailwind.config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,9 @@ const config = {
150150
transitionDuration: {
151151
mid: "4s",
152152
},
153+
screens: {
154+
"mid-lg": "1200px",
155+
},
153156
},
154157
},
155158
plugins: [

0 commit comments

Comments
 (0)