Skip to content

Feature/scroll #138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Shiljababu merged 5 commits into from
May 14, 2026
Merged

Feature/scroll #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9b20f95
Merge pull request #131 from devxtra-community/dev
ajeaiexecutes May 14, 2026
bf72092
Merge pull request #133 from devxtra-community/dev
ajeaiexecutes May 14, 2026
95f7f73
Merge pull request #135 from devxtra-community/dev
ajeaiexecutes May 14, 2026
41ee206
Merge pull request #137 from devxtra-community/dev
Shiljababu May 14, 2026
24c0d01
scroll
Shiljababu May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions apps/web/app/brand-dashboard/bookings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down
6 changes: 3 additions & 3 deletions apps/web/app/brand-dashboard/calendar/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
11 changes: 6 additions & 5 deletions apps/web/app/brand-dashboard/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/app/brand-dashboard/messages/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */}
Expand All @@ -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" />
Expand Down
8 changes: 4 additions & 4 deletions apps/web/app/brand-dashboard/requests/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions apps/web/app/brand-dashboard/transactions/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions apps/web/app/gig-list/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions apps/web/app/influencer-dashboard/bookings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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 ? (
<>
Expand Down Expand Up @@ -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">
Expand Down
1 change: 1 addition & 0 deletions apps/web/app/influencer-dashboard/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/app/influencer-dashboard/messages/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */}
Expand All @@ -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" />
Expand Down
10 changes: 5 additions & 5 deletions apps/web/app/influencer-dashboard/requests/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export default function RequestsPage() {
}

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 sm:flex-row sm:items-center justify-between gap-4 mb-8">
<div>
Expand Down Expand Up @@ -138,7 +138,7 @@ export default function RequestsPage() {
</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">
Expand Down Expand Up @@ -194,14 +194,14 @@ export default function RequestsPage() {
</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">
<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 h-full">
<h2 className="text-[11px] font-bold text-gray-400 uppercase tracking-[0.15em] mb-6">Request Details</h2>

{selectedRequest ? (
<div className="flex flex-col h-full min-h-0">
<div className="flex-1 overflow-y-auto pr-2 scrollbar-hide">
<div className="flex-1 pr-2 scrollbar-hide">
{/* Brand Profile */}
<div className="flex flex-col items-center text-center mb-8">
<div className="w-16 h-16 rounded-[20px] overflow-hidden flex items-center justify-center text-xl font-black mb-4 shadow-xl shadow-gray-200/50 bg-emerald-50 text-emerald-600 relative">
Expand Down
5 changes: 4 additions & 1 deletion apps/web/components/NotificationBell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,10 @@ useEffect(() => {
</div>
</div>

<div className="flex-1 overflow-y-auto sm:max-h-[420px] custom-scrollbar bg-slate-50/50">
<div
className="flex-1 overflow-y-auto sm:max-h-[420px] custom-scrollbar bg-slate-50/50"
data-lenis-prevent
>
{loading && notifications.length === 0 ? (
<div className="p-10 flex justify-center">
<div className="w-6 h-6 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin"></div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/components/chat/ChatWindow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -511,7 +511,7 @@ export function ChatWindow({
)}

{/* Messages */}
<div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 pb-2">
<div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 pb-2" data-lenis-prevent>
{messages.length === 0 ? (
<div className="h-full flex flex-col items-center justify-center text-center">
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4"><span className="text-2xl">👋</span></div>
Expand Down
Loading