fix: weird scrolly issue on mobile

Author: izadoesdev

apps/dashboard/app/(main)/layout.tsx

@@ -21,7 +21,7 @@ export default function MainLayout({
 			<div className="h-screen overflow-hidden text-foreground">
 				<Sidebar />
 				<div className="relative h-screen pt-16 md:pl-64">
-					<div className="h-[calc(100vh-4rem)] overflow-y-scroll">
+					<div className="h-[calc(100vh-4rem)] overflow-y-auto overflow-x-hidden">
 						{children}
 					</div>
 				</div>

apps/dashboard/app/(main)/websites/page.tsx

@@ -189,7 +189,7 @@ export default function WebsitesPage() {
 									weight="fill"
 								/>
 							</div>
-							<div>
+							<div className="min-w-0 flex-1">
 								<h1 className="truncate font-bold text-foreground text-xl tracking-tight sm:text-2xl">
 									Websites
 								</h1>
@@ -213,7 +213,7 @@ export default function WebsitesPage() {
 						</Button>
 						<Button
 							className={cn(
-								'w-full gap-2 px-6 py-3 font-medium sm:w-auto',
+								'gap-2 px-3 py-2 font-medium sm:px-4 sm:py-2',
 								'bg-gradient-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary',
 								'group relative overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl'
 							)}
@@ -243,7 +243,7 @@ export default function WebsitesPage() {
 								size={24}
 								weight="duotone"
 							/>
-							<span>
+							<span className="truncate">
 								Tracking{' '}
 								<span className="font-medium text-foreground">
 									{websites.length}

apps/dashboard/components/website-dialog.tsx

@@ -6,7 +6,7 @@ import { LoaderCircle } from 'lucide-react';
 import { useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
-import * as z from 'zod';
+import { z } from 'zod';
 import { Button } from '@/components/ui/button';
 import {
 	Dialog,
@@ -108,7 +108,7 @@ export function WebsiteDialog({
 
 	return (
 		<Dialog onOpenChange={onOpenChange} open={open}>
-			<DialogContent>
+			<DialogContent className="w-[95vw] max-w-md sm:w-full">
 				<DialogHeader>
 					<DialogTitle>
 						{isEditing ? 'Edit Website' : 'Create a new website'}
@@ -180,6 +180,7 @@ export function WebsiteDialog({
 				</Form>
 				<DialogFooter>
 					<Button
+						className="w-full sm:w-auto"
 						disabled={
 							createWebsiteMutation.isPending || updateWebsiteMutation.isPending
 						}