mobile fixes

Author: izadoesdev

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

@@ -9,7 +9,7 @@ export default function MainLayout({
 		<div className="h-screen overflow-hidden text-foreground">
 			<Sidebar />
 			<div className="relative h-screen pl-0 md:pl-76 lg:pl-84">
-				<div className="h-screen overflow-y-auto overflow-x-hidden pt-16 md:pt-0">
+				<div className="h-screen overflow-y-auto overflow-x-hidden pt-12 md:pt-0">
 					{children}
 				</div>
 			</div>

apps/dashboard/app/(main)/websites/[id]/_components/tabs/overview-tab.tsx

@@ -961,7 +961,7 @@ export function WebsiteOverviewTab({
 					minHeight={350}
 					onAddFilter={onAddFilter}
 					tabs={pagesTabs as any}
-					title="Pages"
+					title="Pages"	
 				/>
 			</div>
 

apps/dashboard/app/(main)/websites/[id]/map/page.tsx

@@ -33,18 +33,18 @@ const MapComponent = dynamic(
 	}
 );
 
-interface CountryData {
+type CountryData = {
 	country: string;
 	country_code?: string;
 	visitors: number;
 	pageviews: number;
-}
+};
 
-interface CountryRowProps {
+type CountryRowProps = {
 	country: CountryData;
 	totalVisitors: number;
 	onCountrySelect: (countryCode: string) => void;
-}
+};
 
 function CountryRow({
 	country,
@@ -66,7 +66,7 @@ function CountryRow({
 
 	return (
 		<button
-			className="flex w-full items-center gap-2.5 rounded px-2.5 py-2 text-left transition-colors hover:bg-accent"
+			className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left transition-colors hover:bg-accent sm:gap-2.5 sm:px-2.5 sm:py-2"
 			onClick={() =>
 				onCountrySelect(
 					country.country_code?.toUpperCase() || country.country.toUpperCase()
@@ -80,10 +80,11 @@ function CountryRow({
 			type="button"
 		>
 			<CountryFlag
+				className="sm:size-4"
 				country={
 					country.country_code?.toUpperCase() || country.country.toUpperCase()
 				}
-				size={16}
+				size={14}
 			/>
 			<div className="min-w-0 flex-1">
 				<p className="truncate font-medium text-xs">{country.country}</p>
@@ -171,30 +172,33 @@ function WebsiteMapPage() {
 				selectedCountry={selectedCountry}
 			/>
 
-			<div className="absolute top-3 right-3 z-20">
-				<Card className="w-60 gap-0 border bg-card/95 py-0 shadow-lg backdrop-blur-sm">
-					<CardHeader className="border-b bg-accent px-3 py-2.5">
-						<CardTitle className="flex items-center gap-2 font-semibold text-sm">
-							<GlobeIcon className="size-4 text-primary" weight="duotone" />
+			<div className="absolute right-3 bottom-3 left-3 z-20 sm:top-3 sm:right-3 sm:bottom-auto sm:left-auto sm:w-60">
+				<Card className="w-full gap-0 border bg-card/95 py-0 shadow-lg backdrop-blur-sm">
+					<CardHeader className="border-b bg-accent px-2.5 py-2 sm:px-3 sm:py-2.5">
+						<CardTitle className="flex items-center gap-2 font-semibold text-xs sm:text-sm">
+							<GlobeIcon
+								className="size-3.5 text-primary sm:size-4"
+								weight="duotone"
+							/>
 							Top Countries
 						</CardTitle>
 					</CardHeader>
 					<CardContent className="p-0">
 						{isLoading ? (
-							<div className="space-y-1 p-3">
+							<div className="space-y-1 p-2 sm:p-3">
 								{Array.from({ length: 5 }).map((_, i) => (
 									<div
-										className="flex items-center gap-2.5 py-1.5"
+										className="flex items-center gap-2 py-1 sm:gap-2.5 sm:py-1.5"
 										key={`country-skeleton-${i + 1}`}
 									>
-										<Skeleton className="size-4 rounded" />
+										<Skeleton className="size-3.5 rounded sm:size-4" />
 										<Skeleton className="h-3 flex-1" />
 										<Skeleton className="h-3 w-8" />
 									</div>
 								))}
 							</div>
 						) : topCountries.length > 0 ? (
-							<div className="space-y-0.5 p-1.5">
+							<div className="max-h-[40vh] space-y-0.5 overflow-y-auto p-1 sm:max-h-none sm:p-1.5">
 								{topCountries.map((country) => (
 									<CountryRow
 										country={country}
@@ -205,9 +209,9 @@ function WebsiteMapPage() {
 								))}
 							</div>
 						) : (
-							<div className="flex flex-col items-center justify-center p-6 text-center">
+							<div className="flex flex-col items-center justify-center p-4 text-center sm:p-6">
 								<GlobeIcon
-									className="size-8 text-muted-foreground/30"
+									className="size-6 text-muted-foreground/30 sm:size-8"
 									weight="duotone"
 								/>
 								<p className="mt-2 text-muted-foreground text-xs">
@@ -217,9 +221,9 @@ function WebsiteMapPage() {
 						)}
 
 						{topCountries.length > 0 && (
-							<div className="flex items-center justify-between border-t bg-accent px-3 py-2">
+							<div className="flex items-center justify-between border-t bg-accent px-2.5 py-1.5 sm:px-3 sm:py-2">
 								<span className="text-muted-foreground text-xs">Total</span>
-								<span className="font-semibold text-sm tabular-nums">
+								<span className="font-semibold text-xs tabular-nums sm:text-sm">
 									{totalVisitors.toLocaleString()}
 								</span>
 							</div>

apps/dashboard/components/layout/navigation/mobile-category-selector.tsx

@@ -83,7 +83,7 @@ export function MobileCategorySelector({
 						<CaretDownIcon className="size-4" />
 					</Button>
 				</DropdownMenuTrigger>
-				<DropdownMenuContent className="w-full min-w-(--radix-dropdown-menu-trigger-width)">
+				<DropdownMenuContent className="z-120 w-full min-w-(--radix-dropdown-menu-trigger-width)">
 					{categories.map((category) => {
 						const Icon = category.icon;
 						const isActive = activeCategory === category.id;

apps/dashboard/components/layout/sidebar.tsx

@@ -159,7 +159,7 @@ export function Sidebar() {
 	return (
 		<>
 			{/* Mobile Header */}
-			<header className="fixed top-0 right-0 left-0 z-50 h-12 w-full border-b bg-background md:hidden">
+			<header className="fixed top-0 right-0 left-0 z-40 h-12 w-full border-b bg-background md:hidden">
 				<div className="flex h-full items-center justify-between px-4">
 					<div className="flex items-center gap-3">
 						<Button
@@ -204,7 +204,7 @@ export function Sidebar() {
 
 			{isMobileOpen && (
 				<button
-					className="fixed inset-0 z-30 bg-black/20 md:hidden"
+					className="fixed inset-0 z-[90] bg-black/20 md:hidden"
 					onClick={closeSidebar}
 					onKeyDown={(e) => {
 						if (e.key === "Escape") {
@@ -219,7 +219,7 @@ export function Sidebar() {
 			<nav
 				aria-hidden={!isMobileOpen}
 				className={cn(
-					"fixed inset-y-0 z-40 w-56 bg-sidebar sm:w-60 md:w-64 lg:w-72",
+					"fixed inset-y-0 z-[100] w-56 bg-sidebar sm:w-60 md:w-64 lg:w-72",
 					"border-r transition-transform duration-200 ease-out",
 					"left-0 md:left-12",
 					"pt-12 md:pt-0",
@@ -230,14 +230,14 @@ export function Sidebar() {
 			>
 				<Button
 					aria-label="Close sidebar"
-					className="absolute top-3 right-3 z-50 h-8 w-8 p-0 md:hidden"
+					className="absolute top-3 right-3 z-110 h-8 w-8 p-0 md:hidden"
 					data-track="sidebar-close"
 					onClick={closeSidebar}
 					size="sm"
 					type="button"
 					variant="ghost"
 				>
-					<XIcon className="h-4 w-4" size={32} weight="duotone" />
+					<XIcon className="h-4 w-4" size={32} />
 					<span className="sr-only">Close sidebar</span>
 				</Button>