Merge pull request #139 from devxtra-community/dev

Dev

Author: Shiljababu

apps/web/app/brand-dashboard/bookings/page.tsx

@@ -149,7 +149,7 @@ function BrandBookingsContent() {
     };
 
     return (
-        <div className="px-4 sm:px-8 lg:px-10 py-8 h-full flex flex-col min-h-0 bg-transparent max-w-[1600px] mx-auto w-full">
+        <div className="px-4 sm:px-8 lg:px-10 py-8 flex flex-col bg-transparent max-w-[1600px] mx-auto w-full">
             {/* Header Area */}
             <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-8">
                 <div>
@@ -188,10 +188,10 @@ function BrandBookingsContent() {
                 </div>
             </div>
 
-            <div className="flex flex-col lg:flex-row gap-8 flex-1 lg:overflow-hidden overflow-visible">
+            <div className="flex flex-col lg:flex-row gap-8 flex-1">
                 {/* Left Column: Table */}
-                <div className={`flex-1 bg-white rounded-[32px] border border-slate-100 shadow-sm shadow-slate-200/50 overflow-hidden flex-col lg:min-h-0 ${selectedId ? "hidden lg:flex" : "flex"}`}>
-                    <div className="overflow-x-auto flex-1 h-full custom-scrollbar">
+                <div className={`flex-1 bg-white rounded-[32px] border border-slate-100 shadow-sm shadow-slate-200/50 overflow-hidden flex-col ${selectedId ? "hidden lg:flex" : "flex"}`}>
+                    <div className="overflow-x-auto flex-1 custom-scrollbar">
                         <table className="w-full text-left border-collapse min-w-[500px]">
                             <thead>
                                 <tr className="border-b border-slate-100 bg-slate-50/50 sticky top-0 z-10">
@@ -260,8 +260,8 @@ function BrandBookingsContent() {
                 </div>
 
                 {/* Right Column: Detail View */}
-                <div className={`lg:w-[420px] flex-col gap-6 lg:min-h-0 ${selectedId ? "flex" : "hidden lg:flex"}`}>
-                    <div className="bg-white rounded-[32px] border border-slate-100 shadow-sm shadow-slate-200/50 p-8 lg:h-full flex flex-col relative lg:overflow-hidden overflow-visible lg:overflow-y-auto min-h-0 custom-scrollbar">
+                <div className={`lg:w-[420px] flex-col gap-6 ${selectedId ? "flex" : "hidden lg:flex"}`}>
+                    <div className="bg-white rounded-[32px] border border-slate-100 shadow-sm shadow-slate-200/50 p-8 flex flex-col relative min-h-0">
                         {!selectedBooking ? (
                             <div className="h-full flex flex-col items-center justify-center text-slate-400 text-center gap-4">
                                 <div className="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center">

apps/web/app/brand-dashboard/calendar/page.tsx

@@ -114,10 +114,10 @@ export default function BrandCalendarPage() {
     }
 
     return (
-        <div className="px-4 sm:px-6 lg:px-8 py-4 sm:py-8 h-full flex flex-col min-h-0 bg-[#f8fafc]">
-            <div className="flex flex-col lg:flex-row gap-6 lg:gap-8 flex-1 overflow-y-auto lg:overflow-hidden pb-20 lg:pb-0">
+        <div className="px-4 sm:px-6 lg:px-8 py-4 sm:py-8 flex flex-col bg-[#f8fafc]">
+            <div className="flex flex-col lg:flex-row gap-6 lg:gap-8 flex-1 pb-20 lg:pb-0">
                 {/* Left Column: Calendar Grid */}
-                <div className="flex-1 bg-white rounded-[1.5rem] lg:rounded-[2.5rem] border border-gray-100 shadow-sm p-5 sm:p-8 lg:p-10 flex flex-col items-center lg:overflow-y-auto">
+                <div className="flex-1 bg-white rounded-[1.5rem] lg:rounded-[2.5rem] border border-gray-100 shadow-sm p-5 sm:p-8 lg:p-10 flex flex-col items-center">
                     <div className="w-full max-w-2xl">
                         <div className="flex flex-col sm:flex-row items-center justify-between gap-4 mb-8 sm:mb-12">
                             <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">Select Date</h1>

apps/web/app/brand-dashboard/layout.tsx

@@ -122,11 +122,12 @@ export default function BrandDashboardLayout({
                         </div>
                     </DashboardHeader>
 
-                    <div className="flex-1 w-full relative">
-                        <div className="absolute inset-0 overflow-y-auto">
-                            <div className="min-h-full pb-6">
-                                {children}
-                            </div>
+                    <div 
+                        className="flex-1 w-full overflow-y-auto custom-scrollbar"
+                        data-lenis-prevent
+                    >
+                        <div className="min-h-full pb-6">
+                            {children}
                         </div>
                     </div>
                 </main>

apps/web/app/brand-dashboard/messages/page.tsx

@@ -107,7 +107,7 @@ function MessagesContent() {
     };
 
     return (
-        <div className="px-2 sm:px-6 py-6 w-full h-[calc(100vh-80px)] lg:h-[calc(100vh-100px)] flex flex-col overflow-hidden max-w-[1600px] mx-auto">
+        <div className="px-2 sm:px-6 py-6 w-full min-h-[calc(100vh-100px)] flex flex-col max-w-[1600px] mx-auto">
             <div className="flex bg-white rounded-[32px] shadow-xl shadow-slate-200/50 border border-slate-100 flex-1 overflow-hidden relative">
 
                 {/* Sidebar */}
@@ -133,7 +133,7 @@ function MessagesContent() {
                         </div>
                     </div>
 
-                    <div className="flex-1 overflow-y-auto px-4 pb-6 space-y-1.5 custom-scrollbar">
+                    <div className="flex-1 overflow-y-auto px-4 pb-6 space-y-1.5 custom-scrollbar" data-lenis-prevent>
                         {loadingConvs ? (
                             <div className="flex flex-col items-center justify-center py-20 gap-4">
                                 <Loader2 className="w-6 h-6 text-emerald-500 animate-spin" />

apps/web/app/brand-dashboard/requests/page.tsx

@@ -45,7 +45,7 @@ export default function BrandRequestsPage() {
     const selectedRequest = connections.find(r => r._id === selectedId) || filteredRequests[0];
 
     return (
-        <div className="px-4 sm:px-8 lg:px-10 py-8 h-full flex flex-col min-h-0 bg-transparent max-w-[1600px] mx-auto w-full">
+        <div className="px-4 sm:px-8 lg:px-10 py-8 flex flex-col bg-transparent max-w-[1600px] mx-auto w-full">
             {/* Header Area */}
             <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-8">
                 <div>
@@ -84,10 +84,10 @@ export default function BrandRequestsPage() {
                 </div>
             </div>
 
-            <div className="flex flex-col lg:flex-row gap-8 flex-1 overflow-hidden">
+            <div className="flex flex-col lg:flex-row gap-8 flex-1">
                 {/* Left Column: Table */}
                 <div className={`flex-1 bg-white rounded-[32px] border border-slate-100 shadow-sm shadow-slate-200/50 overflow-hidden flex-col ${selectedId ? "hidden lg:flex" : "flex"}`}>
-                    <div className="overflow-x-auto flex-1 h-full custom-scrollbar">
+                    <div className="overflow-x-auto flex-1 custom-scrollbar">
                         <table className="w-full text-left border-collapse min-w-[500px]">
                             <thead>
                                 <tr className="border-b border-slate-100 bg-slate-50/50 sticky top-0 z-10">
@@ -152,7 +152,7 @@ export default function BrandRequestsPage() {
 
                 {/* Right Column: Detail View */}
                 <div className={`lg:w-[420px] flex-col gap-6 ${selectedId ? "flex" : "hidden lg:flex"}`}>
-                    <div className="bg-white rounded-[32px] border border-slate-100 shadow-sm shadow-slate-200/50 p-8 h-full flex flex-col relative overflow-hidden">
+                    <div className="bg-white rounded-[32px] border border-slate-100 shadow-sm shadow-slate-200/50 p-8 flex flex-col relative min-h-0">
                         {selectedRequest ? (
                             <>
                                 <div className="absolute top-0 right-0 w-48 h-48 bg-gradient-to-bl from-emerald-100/40 to-transparent rounded-bl-full pointer-events-none"></div>

apps/web/app/brand-dashboard/transactions/page.tsx

@@ -61,7 +61,7 @@ export default function BrandTransactionsPage() {
     }
 
     return (
-        <div className="px-4 sm:px-8 lg:px-10 py-8 h-full flex flex-col gap-8 bg-transparent max-w-[1600px] mx-auto w-full">
+        <div className="px-4 sm:px-8 lg:px-10 py-8 flex flex-col gap-8 bg-transparent max-w-[1600px] mx-auto w-full">
             <div className="mb-2">
                 <h1 className="text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Transactions</h1>
                 <p className="text-sm text-slate-500 mt-1.5 font-medium">Manage your platform credits and transaction history.</p>
@@ -128,9 +128,9 @@ export default function BrandTransactionsPage() {
                 </div>
             </div>
 
-            <div className="flex flex-col lg:grid lg:grid-cols-12 gap-8 flex-1 lg:overflow-hidden overflow-visible">
+            <div className="flex flex-col lg:grid lg:grid-cols-12 gap-8 flex-1">
                 {/* Left Column: Recent Transactions List */}
-                <div className={`lg:col-span-8 bg-white rounded-[32px] border border-slate-100 shadow-sm shadow-slate-200/50 overflow-hidden flex-col lg:min-h-0 ${selectedId ? "hidden lg:flex" : "flex"}`}>
+                <div className={`lg:col-span-8 bg-white rounded-[32px] border border-slate-100 shadow-sm shadow-slate-200/50 overflow-hidden flex-col ${selectedId ? "hidden lg:flex" : "flex"}`}>
                     <div className="p-8 pb-4">
                         <h2 className="text-xl font-black text-slate-900">Recent Transactions</h2>
                     </div>
@@ -199,9 +199,9 @@ export default function BrandTransactionsPage() {
                 </div>
 
                 {/* Right Column: Transaction Details */}
-                <div className={`lg:col-span-4 flex-col lg:min-h-0 ${selectedId ? "flex" : "hidden lg:flex"}`}>
+                <div className={`lg:col-span-4 flex-col ${selectedId ? "flex" : "hidden lg:flex"}`}>
                     {selectedTransaction ? (
-                        <div className="bg-white rounded-[32px] border border-slate-100 shadow-sm shadow-slate-200/50 p-8 flex flex-col lg:h-full relative lg:overflow-hidden overflow-visible lg:overflow-y-auto min-h-0 custom-scrollbar">
+                        <div className="bg-white rounded-[32px] border border-slate-100 shadow-sm shadow-slate-200/50 p-8 flex flex-col relative min-h-0">
                             <div className="absolute top-0 right-0 w-48 h-48 bg-gradient-to-bl from-orange-100/40 to-transparent rounded-bl-full pointer-events-none"></div>
 
                             <button 

apps/web/app/gig-list/page.tsx

@@ -388,6 +388,7 @@ export default function ExploreGigs() {
         {/* Header Section */}
         <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 sm:gap-6 mb-4 sm:mb-12">
           <div>
+          <br />
             <h1 className="text-2xl sm:text-4xl font-black text-slate-900 tracking-tight leading-none mb-2 sm:mb-4">
               Explore Influencer Gigs
             </h1>

apps/web/app/influencer-dashboard/bookings/page.tsx

@@ -146,7 +146,7 @@ function BookingsContent() {
     }
 
     return (
-        <div className="px-4 sm:px-6 lg:px-8 py-8 max-w-[1500px] mx-auto w-full h-full flex flex-col overflow-hidden">
+        <div className="px-4 sm:px-6 lg:px-8 py-8 max-w-[1500px] mx-auto w-full flex flex-col">
             {/* Header Area */}
             <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-5 mb-8">
                 <div>
@@ -188,7 +188,7 @@ function BookingsContent() {
             </div>
 
             {/* Content Container (2-Column Grid) */}
-            <div className="flex flex-col xl:flex-row gap-6 flex-1 min-h-0 h-full">
+            <div className="flex flex-col xl:flex-row gap-6 flex-1">
                 {/* Table Card (Left Column) */}
                 <div className="bg-white rounded-[24px] shadow-sm border border-gray-100 flex-1 overflow-hidden flex flex-col">
                     <div className="overflow-x-auto overflow-y-auto flex-1">
@@ -255,8 +255,8 @@ function BookingsContent() {
                 </div>
 
                 {/* Details Card (Right Column) */}
-                <div className="xl:w-[400px] shrink-0 h-full">
-                    <div className="bg-white rounded-[24px] shadow-sm border border-gray-100 flex flex-col h-full sticky top-0 overflow-y-auto scrollbar-hide">
+                <div className="xl:w-[400px] shrink-0">
+                    <div className="bg-white rounded-[24px] shadow-sm border border-gray-100 flex flex-col">
                         <div className="p-6 flex flex-col min-h-full">
                             {selectedBooking ? (
                                 <>
@@ -295,7 +295,7 @@ function BookingsContent() {
                                     </div>
 
                                     {/* Details List */}
-                                    <div className="space-y-1.5 flex-grow overflow-y-auto">
+                                    <div className="space-y-1.5 flex-grow">
                                         <div className="flex items-center justify-between py-2 text-sm border-b border-gray-50/80">
                                             <div className="flex items-center gap-3">
                                                 <div className="w-8 h-8 rounded-xl bg-gray-50 flex items-center justify-center text-gray-400 shrink-0">

apps/web/app/influencer-dashboard/layout.tsx

@@ -127,6 +127,7 @@ export default function InfluencerDashboardLayout({
                     <div
                         className={`flex-1 w-full ${pathname.includes("/messages") ? "overflow-hidden" : "overflow-y-auto pb-10"
                             }`}
+                        data-lenis-prevent
                     >
                         {children}
                     </div>

apps/web/app/influencer-dashboard/messages/page.tsx

@@ -109,7 +109,7 @@ function MessagesContent() {
     };
 
     return (
-        <div className="px-2 sm:px-4 py-4 w-full h-[calc(100vh-80px)] lg:h-[calc(100vh-100px)] flex flex-col overflow-hidden">
+        <div className="px-2 sm:px-4 py-4 w-full min-h-[calc(100vh-100px)] flex flex-col">
             <div className="flex bg-white rounded-[24px] lg:rounded-[32px] shadow-xl shadow-gray-100/50 border border-gray-100 flex-1 overflow-hidden">
 
                 {/* Sidebar */}
@@ -130,7 +130,7 @@ function MessagesContent() {
                         </div>
                     </div>
 
-                    <div className="flex-1 overflow-y-auto px-4 pb-6 space-y-2">
+                    <div className="flex-1 overflow-y-auto px-4 pb-6 space-y-2" data-lenis-prevent>
                         {loadingConvs ? (
                             <div className="flex items-center justify-center py-20">
                                 <Loader2 className="w-6 h-6 text-emerald-500 animate-spin" />