Mobile reponsiveness

app/(main)/blogs/layout.tsx

@@ -11,18 +11,18 @@ export default async function Layout({
 
   return (
     <div>
-      <div className="flex h-[3.125rem] items-center justify-between border-b border-dashed px-4">
-        <h1 className="text-2xl font-semibold leading-none">Blogs</h1>
+      <div className="sticky top-0 z-10 flex h-[3.125rem] items-center justify-between border-b border-dashed bg-background px-4">
+        <h1 className="text-xl font-semibold leading-none md:text-2xl">Blogs</h1>
         {isAuthenticated && (
-          <Button asChild variant="outline">
+          <Button asChild variant="outline" size="sm">
             <Link href="/blogs/create">
               <PlusIcon size={14} />
               New Blog
             </Link>
           </Button>
         )}
       </div>
-      <div className="h-[calc(100vh-3.125rem)] overflow-y-auto p-3">
+      <div className="p-3">
         {children}
       </div>
     </div>

app/(main)/jobs/create/page.tsx

@@ -105,7 +105,7 @@ function Page() {
                       </FormItem>
                     )}
                   />
-                  <div className="flex items-center gap-3">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
                     {/* Company */}
                     <FormField
                       name="company"
@@ -153,7 +153,7 @@ function Page() {
                       </FormItem>
                     )}
                   />
-                  <div className="flex items-center gap-3">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
                     {/* Type */}
                     <FormField
                       name="employmentType"
@@ -353,7 +353,7 @@ function Page() {
                     </Button>
                   </div>
                   {/* Salary range */}
-                  <div className="flex items-center gap-3">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
                     <FormField
                       name="salaryMin"
                       control={form.control}

app/(main)/jobs/layout.tsx

@@ -5,10 +5,10 @@ export default function Layout({
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <div>
-      <div className="flex h-[3.125rem] items-center border-b border-dashed px-4">
-        <h1 className="text-2xl font-semibold leading-none">Jobs</h1>
+      <div className="sticky top-0 z-10 flex h-[3.125rem] items-center border-b border-dashed bg-background px-4">
+        <h1 className="text-xl font-semibold leading-none md:text-2xl">Jobs</h1>
       </div>
-      <div className="h-[calc(100vh-3.125rem)] overflow-y-auto p-3">
+      <div className="p-3">
         {children}
       </div>
     </div>

app/(main)/layout.tsx

@@ -3,6 +3,7 @@ import { AppSidebar } from "@/components/app-sidebar";
 import { AuthProvider } from "@/components/contexts/auth-provider";
 import { AuthSessionProvider } from "@/components/contexts/auth-session-provider";
 import { ThemeProvider } from "@/components/contexts/theme-provider";
+import MobileNav from "@/components/mobile-nav";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import SetupProfileAlert from "@/components/user/setup-profile-alert";
 import { Analytics } from "@vercel/analytics/next";
@@ -49,8 +50,11 @@ export default async function RootLayout({
                 <SetupProfileAlert />
                 <main className="m-auto flex h-screen max-w-screen-xl border-r border-dashed">
                   <AppSidebar />
-                  <div className="h-full flex-1 overflow-y-auto">
-                    {children}
+                  <div className="flex h-full flex-1 flex-col overflow-hidden">
+                    <MobileNav />
+                    <div className="flex-1 overflow-y-auto">
+                      {children}
+                    </div>
                   </div>
                 </main>
               </AuthProvider>

app/(main)/questions/[id]/page.tsx

@@ -50,17 +50,17 @@ async function Page(props: Props) {
       {/* Question Card */}
       <div className="rounded-xl border border-zinc-800 bg-zinc-900 shadow-xl">
         {/* Header Section */}
-        <div className="rounded-t-xl border-b border-zinc-800 bg-gradient-to-r from-zinc-900 to-zinc-800/50 p-6">
+        <div className="rounded-t-xl border-b border-zinc-800 bg-gradient-to-r from-zinc-900 to-zinc-800/50 p-4 md:p-6">
           <div className="mb-4 flex items-start justify-between gap-4">
             <div className="flex-1">
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+              <div className="flex items-start gap-3">
+                <div className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 md:h-10 md:w-10">
                   <MessageCircleQuestionMark
-                    size={20}
+                    size={18}
                     className="text-primary"
                   />
                 </div>
-                <h1 className="text-2xl font-bold text-white">
+                <h1 className="text-xl font-bold text-white md:text-2xl">
                   {question.title}
                 </h1>
               </div>
@@ -95,7 +95,7 @@ async function Page(props: Props) {
         </div>
 
         {/* Content Section */}
-        <div className="p-6">
+        <div className="p-4 md:p-6">
           <div>
             <h2 className="mb-3 text-lg font-semibold text-white">
               Description

app/(main)/questions/create/page.tsx

@@ -112,7 +112,7 @@ function Page() {
             />
             <div className="space-y-2">
               <FormLabel>Tags</FormLabel>
-              <div className="grid grid-cols-4 items-center gap-3">
+              <div className="grid grid-cols-2 items-center gap-3 sm:grid-cols-3 md:grid-cols-4">
                 {tags.map((tag, tagIndex) => (
                   <div key={tagIndex} className="group col-span-1 flex">
                     <Input

app/(main)/questions/layout.tsx

@@ -7,13 +7,13 @@ export default function Layout({
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <div>
-      <div className="flex h-[3.125rem] items-center justify-between border-b border-dashed px-4">
-        <h1 className="text-2xl font-semibold leading-none">Questions</h1>
-        <Button asChild variant="outline">
+      <div className="sticky top-0 z-10 flex h-[3.125rem] items-center justify-between border-b border-dashed bg-background px-4">
+        <h1 className="text-xl font-semibold leading-none md:text-2xl">Questions</h1>
+        <Button asChild variant="outline" size="sm">
           <Link href="/questions/create">Ask Question</Link>
         </Button>
       </div>
-      <div className="h-[calc(100vh-3.125rem)] overflow-y-auto p-3">
+      <div className="p-3">
         {children}
       </div>
     </div>

app/(main)/snippets/layout.tsx

@@ -5,10 +5,10 @@ export default function Layout({
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <div>
-      <div className="flex h-[3.125rem] items-center border-b border-dashed px-4">
-        <h1 className="text-2xl font-semibold leading-none">Code Snippets</h1>
+      <div className="sticky top-0 z-10 flex h-[3.125rem] items-center border-b border-dashed bg-background px-4">
+        <h1 className="text-xl font-semibold leading-none md:text-2xl">Code Snippets</h1>
       </div>
-      <div className="h-[calc(100vh-3.125rem)] overflow-y-auto p-3">
+      <div className="p-3">
         {children}
       </div>
     </div>

app/(main)/snippets/page.tsx

@@ -32,9 +32,9 @@ async function Page({ searchParams }: { searchParams: SearchParams }) {
   return (
     <div className="flex flex-col gap-4">
       {/* Toolbar */}
-      <div className="flex items-center gap-2">
-        <form className="flex flex-1 items-center gap-2" method="GET">
-          <div className="relative flex-1">
+      <div className="flex flex-wrap items-center gap-2">
+        <form className="flex flex-1 flex-wrap items-center gap-2" method="GET">
+          <div className="relative min-w-[8rem] flex-1">
             <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             <Input
               name="search"
@@ -44,7 +44,7 @@ async function Page({ searchParams }: { searchParams: SearchParams }) {
             />
           </div>
           <Select name="language" defaultValue={language || "all"}>
-            <SelectTrigger className="h-9 w-44 border-dashed bg-muted/50 text-sm">
+            <SelectTrigger className="h-9 w-36 border-dashed bg-muted/50 text-sm sm:w-44">
               <SelectValue placeholder="All languages" />
             </SelectTrigger>
             <SelectContent>
@@ -64,7 +64,8 @@ async function Page({ searchParams }: { searchParams: SearchParams }) {
           <Button size="sm" className="h-9" asChild>
             <Link href="/snippets/create">
               <PlusIcon size={14} />
-              New Snippet
+              <span className="hidden sm:inline">New Snippet</span>
+              <span className="sm:hidden">New</span>
             </Link>
           </Button>
         )}

app/(main)/user/activity/layout.tsx

@@ -4,13 +4,13 @@ import React from "react";
 function ActivityLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
     <div>
-      <div className="space-y-3">
-        <div className="flex h-[3.125rem] items-center border-b border-dashed px-4">
-          <h1 className="text-2xl font-semibold leading-none">My Activity</h1>
-        </div>
+      <div className="sticky top-0 z-10 flex h-[3.125rem] items-center border-b border-dashed bg-background px-4">
+        <h1 className="text-xl font-semibold leading-none md:text-2xl">My Activity</h1>
       </div>
-      <UserActivityLayoutNavbar />
-      <div className="h-full max-h-full flex-1 overflow-y-auto p-4">
+      <div className="sticky top-[3.125rem] z-10 bg-background">
+        <UserActivityLayoutNavbar />
+      </div>
+      <div className="p-4">
         {children}
       </div>
     </div>

app/(main)/user/settings/layout.tsx

@@ -3,9 +3,9 @@ import React from "react";
 
 function SidebarLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <div className="flex h-full">
+    <div className="flex flex-col md:flex-row">
       <SettingsSidebar />
-      <div className="h-full max-h-full flex-1 overflow-y-auto">{children}</div>
+      <div className="flex-1 p-4">{children}</div>
     </div>
   );
 }

app/(main)/user/settings/profile/page.tsx

@@ -174,7 +174,7 @@ function Page() {
               </CardHeader>
               <CardContent>
                 <div className="space-y-3">
-                  <div className="flex items-center gap-3">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
                     <FormField
                       name="fullName"
                       control={form.control}
@@ -234,7 +234,7 @@ function Page() {
                       ) : null}
                     </div>
                   </div>
-                  <div className="flex items-center gap-3">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
                     <FormField
                       name="bio"
                       control={form.control}
@@ -265,7 +265,7 @@ function Page() {
                       </FormItem>
                     )}
                   />
-                  <div className="flex items-center gap-3">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
                     <div className="flex-1">
                       <FormField
                         control={form.control}
@@ -324,7 +324,7 @@ function Page() {
                 </CardTitle>
               </CardHeader>
               <CardContent>
-                <div className="grid grid-cols-4 items-center gap-3">
+                <div className="grid grid-cols-2 items-center gap-3 sm:grid-cols-3 md:grid-cols-4">
                   {skillsField?.fields.length ? (
                     skillsField.fields.map((field, fieldIdx) => (
                       <div key={field.id} className="group col-span-1 flex">
@@ -395,7 +395,7 @@ function Page() {
                                 control={form.control}
                                 name={`experiences.${fieldIdx}.role`}
                                 render={({ field }) => (
-                                  <FormItem className="w-1/2">
+                                  <FormItem className="flex-1">
                                     <FormControl>
                                       <Input
                                         placeholder="Your role"
@@ -418,7 +418,7 @@ function Page() {
                               control={form.control}
                               name={`experiences.${fieldIdx}.company`}
                               render={({ field }) => (
-                                <FormItem className="w-1/2">
+                                <FormItem className="w-full sm:w-1/2">
                                   <FormControl>
                                     <Input
                                       placeholder="Company name"
@@ -429,7 +429,7 @@ function Page() {
                                 </FormItem>
                               )}
                             />
-                            <div className="flex items-center gap-3">
+                            <div className="flex flex-wrap items-center gap-3">
                               <Controller
                                 name={`experiences.${fieldIdx}.from`}
                                 control={form.control}
@@ -490,7 +490,7 @@ function Page() {
                               control={form.control}
                               name={`experiences.${fieldIdx}.description`}
                               render={({ field }) => (
-                                <FormItem className="w-3/4">
+                                <FormItem className="w-full sm:w-3/4">
                                   <FormControl>
                                     <Textarea
                                       rows={10}
@@ -564,7 +564,7 @@ function Page() {
                                     control={form.control}
                                     name={`projects.${fieldIdx}.name`}
                                     render={({ field }) => (
-                                      <FormItem className="w-1/2">
+                                      <FormItem className="flex-1">
                                         <FormControl>
                                           <Input
                                             placeholder="Project name"
@@ -604,7 +604,7 @@ function Page() {
                                   control={form.control}
                                   name={`projects.${fieldIdx}.url`}
                                   render={({ field }) => (
-                                    <FormItem className="w-3/4">
+                                    <FormItem className="w-full sm:w-3/4">
                                       <FormControl>
                                         <Input
                                           placeholder="Project url (optional)"
@@ -669,7 +669,7 @@ function Page() {
                                 control={form.control}
                                 name={`educations.${fieldIdx}.institute`}
                                 render={({ field }) => (
-                                  <FormItem className="w-1/2">
+                                  <FormItem className="flex-1">
                                     <FormControl>
                                       <Input
                                         placeholder="Institute name"
@@ -688,7 +688,7 @@ function Page() {
                                 <Trash />
                               </Button>
                             </div>
-                            <div className="flex items-center gap-3">
+                            <div className="flex flex-wrap items-center gap-3">
                               <Controller
                                 name={`educations.${fieldIdx}.from`}
                                 control={form.control}
@@ -760,7 +760,7 @@ function Page() {
                               control={form.control}
                               name={`educations.${fieldIdx}.description`}
                               render={({ field }) => (
-                                <FormItem className="w-3/4">
+                                <FormItem className="w-full sm:w-3/4">
                                   <FormControl>
                                     <Textarea
                                       {...field}

app/(main)/users/layout.tsx

@@ -5,10 +5,10 @@ export default function Layout({
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <div>
-      <div className="flex h-[3.125rem] items-center border-b border-dashed px-4">
-        <h1 className="text-2xl font-semibold leading-none">Members</h1>
+      <div className="sticky top-0 z-10 flex h-[3.125rem] items-center border-b border-dashed bg-background px-4">
+        <h1 className="text-xl font-semibold leading-none md:text-2xl">Members</h1>
       </div>
-      <div className="h-[calc(100vh-3.125rem)] overflow-y-auto p-3">
+      <div className="p-3">
         {children}
       </div>
     </div>

app/signin/page.tsx

@@ -9,7 +9,7 @@ function SignInPage() {
   const searchParams = useSearchParams();
   const callbackUrl = searchParams.get("callbackUrl");
   return (
-    <div className="w-96 rounded-md bg-zinc-900 p-10">
+    <div className="w-full max-w-sm rounded-md bg-zinc-900 p-6 mx-4 sm:p-10">
       <div className="mb-6 flex flex-col items-center">
         <div className="flex flex-col items-center gap-1">
           <Image

components/app-sidebar.tsx

@@ -171,7 +171,7 @@ export function AppSidebar() {
 
   return (
     <div
-      className={`border-l border-r border-dashed transition-all duration-300 ${
+      className={`hidden border-l border-r border-dashed transition-all duration-300 md:block ${
         sidebarOpen ? "w-64 shrink-0" : "w-16 shrink-0"
       }`}
     >

components/job/job-list.tsx

@@ -98,8 +98,10 @@ function JobList(props: { jobs: Job[] }) {
         <div className="flex w-full items-start gap-3">
           <div
             className={cn(
-              "grid max-h-[calc(100vh-4.625rem)] w-full grid-cols-2 gap-3 overflow-y-auto",
-              isJobDetailsOpen && "w-1/2 grid-cols-1"
+              "grid w-full gap-3 overflow-y-auto",
+              isJobDetailsOpen
+                ? "hidden md:grid md:max-h-[calc(100vh-4.625rem)] md:w-1/2 md:grid-cols-1"
+                : "grid-cols-1 sm:grid-cols-2 md:max-h-[calc(100vh-4.625rem)]"
             )}
           >
             {jobs.map((job) => (
@@ -111,7 +113,7 @@ function JobList(props: { jobs: Job[] }) {
             ))}
           </div>
           {isJobDetailsOpen ? (
-            <div className="max-h-[calc(100vh-4.625rem)] w-1/2 overflow-y-auto">
+            <div className="w-full overflow-y-auto md:max-h-[calc(100vh-4.625rem)] md:w-1/2">
               <JobDetails
                 job={fullJob}
                 onApply={onApplyJob}