106 enable responsiveness

packages/frontend/src/app/auth/forgot-password/page.tsx

@@ -11,14 +11,19 @@ export const metadata: Metadata = {
 
 const ForgotPasswordPage = () => {
   return (
-    <div className="container-wide relative flex h-[100vh] items-center justify-between">
-      <div className="w-1/4 min-w-[420px]">
+    <div className="relative mx-auto flex min-h-screen w-full max-w-screen-xl items-center justify-center px-4 sm:gap-8 md:gap-12 lg:gap-16">
+      <div className="w-full sm:w-[420px]">
         <Suspense fallback={<div>Loading...</div>}>
           <ForgotPasswordForm />
         </Suspense>
       </div>
-      <Separator orientation="vertical" className="h-full" />
-      <div className="w-2/4">
+      <div className="hidden sm:block">
+        <Separator
+          orientation="vertical"
+          className="mx-6 h-[70vh] md:mx-8 lg:mx-10"
+        />
+      </div>
+      <div className="hidden flex-1 sm:block">
         <AuthCarousel />
       </div>
     </div>

packages/frontend/src/app/auth/login/page.tsx

@@ -9,12 +9,17 @@ export const metadata: Metadata = {
 
 const LoginPage = () => {
   return (
-    <div className="container-wide relative flex h-[100vh] items-center justify-between">
-      <div className="w-1/4 min-w-[420px]">
+    <div className="relative mx-auto flex min-h-screen w-full max-w-screen-xl items-center justify-center px-4 sm:gap-8 md:gap-12 lg:gap-16">
+      <div className="w-full sm:w-[420px]">
         <AuthForm />
       </div>
-      <Separator orientation="vertical" className="h-full" />
-      <div className="w-2/4">
+      <div className="hidden sm:block">
+        <Separator
+          orientation="vertical"
+          className="mx-6 h-[70vh] md:mx-8 lg:mx-10"
+        />
+      </div>
+      <div className="hidden flex-1 sm:block">
         <AuthCarousel />
       </div>
     </div>

packages/frontend/src/app/auth/register/page.tsx

@@ -10,12 +10,17 @@ export const metadata: Metadata = {
 
 export default function RegisterPage() {
   return (
-    <div className="container-wide relative flex h-[100vh] items-center justify-between">
-      <div className="w-1/4 min-w-[420px]">
+    <div className="relative mx-auto flex min-h-screen w-full max-w-screen-xl items-center justify-center px-4 sm:gap-8 md:gap-12 lg:gap-16">
+      <div className="w-full sm:w-[420px]">
         <AuthForm />
       </div>
-      <Separator orientation="vertical" className="h-full" />
-      <div className="w-2/4">
+      <div className="hidden sm:block">
+        <Separator
+          orientation="vertical"
+          className="mx-6 h-[70vh] md:mx-8 lg:mx-10"
+        />
+      </div>
+      <div className="hidden flex-1 sm:block">
         <AuthCarousel />
       </div>
     </div>

packages/frontend/src/app/auth/reset-password/page.tsx

@@ -26,14 +26,19 @@ const ResetPasswordContent = () => {
   }, [router, searchParams]);
 
   return (
-    <div className="container-wide relative flex h-[100vh] items-center justify-between">
-      <div className="w-1/4 min-w-[420px]">
+    <div className="relative mx-auto flex min-h-screen w-full max-w-screen-xl items-center justify-center px-4 sm:gap-8 md:gap-12 lg:gap-16">
+      <div className="w-full sm:w-[420px]">
         <Suspense fallback={<div>Loading...</div>}>
           <ForgotPasswordForm />
         </Suspense>
       </div>
-      <Separator orientation="vertical" className="h-full" />
-      <div className="w-2/4">
+      <div className="hidden sm:block">
+        <Separator
+          orientation="vertical"
+          className="mx-6 h-[70vh] md:mx-8 lg:mx-10"
+        />
+      </div>
+      <div className="hidden flex-1 sm:block">
         <AuthCarousel />
       </div>
     </div>

packages/frontend/src/app/events/[[...slug]]/page.tsx

@@ -20,7 +20,7 @@ export default async function EventPage({ params }: EventPageProps) {
       // Handle /events - Show all events
       return (
         <Suspense fallback={<EventsLoadingSkeleton />}>
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center px-4 md:px-0">
             <EventList />
           </div>
         </Suspense>
@@ -30,7 +30,7 @@ export default async function EventPage({ params }: EventPageProps) {
       // Handle /events/create
       return (
         <Suspense fallback={<EventFormSkeleton />}>
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center px-4 md:px-0">
             <EventFormWrapper />
           </div>
         </Suspense>
@@ -41,7 +41,7 @@ export default async function EventPage({ params }: EventPageProps) {
       if (!id) return notFound();
       return (
         <Suspense fallback={<EventFormSkeleton />}>
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center px-4 md:px-0">
             <EventFormWrapper />
           </div>
         </Suspense>
@@ -53,7 +53,7 @@ export default async function EventPage({ params }: EventPageProps) {
         // Handle /events/:id/subscribers
         return (
           <Suspense fallback={<EventDetailsSkeleton />}>
-            <div className="flex w-full justify-center">
+            <div className="flex w-full justify-center px-4 md:px-0">
               <EventSubscribers eventId={action} />
             </div>
           </Suspense>
@@ -64,7 +64,7 @@ export default async function EventPage({ params }: EventPageProps) {
       if (action && !id) {
         return (
           <Suspense fallback={<EventDetailsSkeleton />}>
-            <div className="flex w-full justify-center">
+            <div className="flex w-full justify-center px-4 md:px-0">
               <EventDetails />
             </div>
           </Suspense>

packages/frontend/src/app/resources/[[...slug]]/page.tsx

@@ -20,7 +20,7 @@ export default async function NewsPage({ params }: NewsPageProps) {
       // Handle /news - Show all news
       return (
         <Suspense fallback={<NewsLoadingSkeleton />}>
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center px-4 md:px-0">
             <NewsList />
           </div>
         </Suspense>
@@ -30,7 +30,7 @@ export default async function NewsPage({ params }: NewsPageProps) {
       // Handle /news/create
       return (
         <Suspense fallback={<NewsFormSkeleton />}>
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center px-4 md:px-0">
             <NewsFormWrapper />
           </div>
         </Suspense>
@@ -41,7 +41,7 @@ export default async function NewsPage({ params }: NewsPageProps) {
       if (!id) return notFound();
       return (
         <Suspense fallback={<NewsFormSkeleton />}>
-          <div className="flex w-full justify-center">
+          <div className="flex w-full justify-center px-4 md:px-0">
             <EditNewsFormWrapper id={id} />
           </div>
         </Suspense>

packages/frontend/src/features/admin/components/admin.tsx

@@ -17,7 +17,7 @@ const AdminDashboard = () => {
   const [activeTab, setActiveTab] = useState('analytics');
 
   return (
-    <div className="container mx-auto space-y-6 py-6">
+    <div className="container mx-auto space-y-6 px-4 py-6 md:px-6">
       <div className="flex flex-col gap-2">
         <h1 className="text-3xl font-bold tracking-tight">Admin Dashboard</h1>
         <p className="text-muted-foreground">

packages/frontend/src/features/admin/components/common/admin-table/user-table.tsx

@@ -130,50 +130,52 @@ export const UsersTable = ({
 
   return (
     <>
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <TableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                  </TableHead>
-                ))}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id}>
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </TableCell>
+      <div className="w-full overflow-x-auto">
+        <div className="inline-block max-w-[320px] rounded-md border align-middle sm:min-w-full">
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
                   ))}
                 </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
-                  No users found.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No users found.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
       </div>
 
       {/* Single set of modals - only rendered once when selectedUser exists */}

packages/frontend/src/features/admin/components/common/user-management.tsx

@@ -178,12 +178,12 @@ export const UserManagement = () => {
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-col justify-between gap-4 sm:flex-row">
+      <div className="flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
         <h2 className="text-2xl font-semibold">User Management</h2>
-        <div className="flex gap-2">
+        <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
           <IconInput
             leftIcon="search"
-            className="h-10 w-[250px] rounded-full bg-neutral-light-100"
+            className="h-10 w-full rounded-full bg-neutral-light-100 sm:w-[250px]"
             placeholder="Search"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
@@ -274,7 +274,7 @@ export const UserManagement = () => {
         </div>
       )}
 
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col items-start justify-between gap-2 sm:flex-row">
         <div className="text-sm text-gray-600">
           Showing {filteredUsers.length} of {users.length} users
         </div>
@@ -284,11 +284,13 @@ export const UserManagement = () => {
         />
       </div>
 
-      <UsersTable
-        users={paginatedUsers}
-        columnVisibility={columnVisibility}
-        setColumnVisibility={setColumnVisibility}
-      />
+      <div className="overflow-x-auto">
+        <UsersTable
+          users={paginatedUsers}
+          columnVisibility={columnVisibility}
+          setColumnVisibility={setColumnVisibility}
+        />
+      </div>
 
       <div className="flex justify-center">
         <PaginationComponent

packages/frontend/src/features/analytics/components/analytics.tsx

@@ -56,7 +56,7 @@ export const Analytics = () => {
 
   if (analyticsError) {
     return (
-      <div className="container-wide p-6">
+      <div className="w-full p-4 sm:p-6">
         <div className="flex h-64 items-center justify-center rounded-lg border border-red-200 bg-red-50">
           <p className="text-red-600">
             Error loading analytics: {analyticsError}
@@ -68,18 +68,18 @@ export const Analytics = () => {
 
   return (
     <>
-      <div className="container-wide space-y-6 p-6" id="analytics-dashboard">
+      <div className="w-full space-y-6 p-4 sm:p-6" id="analytics-dashboard">
         {/* Header Section */}
-        <div className="flex items-center justify-between">
-          <div>
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="min-w-0">
             <h1 className="text-3xl font-bold text-gray-900">
               Analytics Dashboard
             </h1>
             <p className="text-gray-600">
               Monitor your platform&apos;s performance and user engagement
             </p>
           </div>
-          <div className="flex items-center gap-4">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
             <AnalyticsSelect
               options={selectOptions}
               placeholder="Select period"
@@ -99,7 +99,7 @@ export const Analytics = () => {
         </div>
 
         {/* Key Metrics Row */}
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+        <div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-4">
           <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
             <MetricCard
               title="Total Users"
@@ -161,7 +161,7 @@ export const Analytics = () => {
         </div>
 
         {/* New Users Chart */}
-        <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
+        <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md sm:p-6">
           <div className="mb-6 flex items-center justify-between">
             <h3 className="text-lg font-semibold text-gray-900">
               New Users Growth
@@ -179,7 +179,7 @@ export const Analytics = () => {
         </div>
 
         {/* Charts Row */}
-        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        <div className="grid grid-cols-1 gap-4 sm:gap-6 lg:grid-cols-3">
           {/* User Status Distribution */}
           <div className="flex flex-col justify-between rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
             <div className="mb-4 flex items-center justify-between">
@@ -214,7 +214,7 @@ export const Analytics = () => {
 
           {/* User Activity */}
           <div className="lg:col-span-2">
-            <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
+            <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md sm:p-6">
               <div className="mb-4 flex items-center justify-between">
                 <h3 className="text-lg font-semibold text-gray-900">
                   User Activity

packages/frontend/src/features/events/components/common/base-form.tsx

@@ -161,7 +161,7 @@ export const BaseForm = ({
         required
       />
 
-      <div className="flex w-full gap-4">
+      <div className="flex w-full flex-wrap gap-3 sm:gap-4">
         <CustomSwitch
           name="is_free"
           label="Free or Paid Event"
@@ -174,7 +174,7 @@ export const BaseForm = ({
         />
       </div>
 
-      <div className="flex w-full gap-4">
+      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
         <FormInput
           name="link"
           label="Registration Link"