fix: make pages responsive

frontend/app/page.tsx

@@ -7,8 +7,8 @@ export default function Home() {
   return (
     <div className="mx-auto flex max-w-275 flex-1">
       <Feed />
-      <div>
-        <div className="scrollbar-track-rounded-full scrollbar-thin scrollbar-track-transparent scrollbar-thumb-accent scrollbar scrollbar-thumb-rounded-full sticky top-14 flex h-[calc(100vh-var(--spacing)*14)] w-75 flex-col gap-4 overflow-y-auto p-4 pl-2">
+      <div className="hidden md:block">
+        <div className="scrollbar-track-rounded-full scrollbar-thin scrollbar-track-transparent scrollbar-thumb-accent scrollbar scrollbar-thumb-rounded-full sticky top-14 flex h-[calc(100vh-var(--spacing)*14)] w-75 flex-col gap-4 overflow-y-auto p-4 pl-0">
           <RecentQuibs />
           <PopularQuiblets />
           <LegalLinks />

frontend/components/app-sidebar/index.tsx

@@ -7,7 +7,7 @@ import YourQuiblets from "./your-quiblets";
 
 export default function AppSidebar() {
   return (
-    <aside className="scrollbar-track-rounded-full scrollbar-thin scrollbar-track-transparent scrollbar-thumb-accent scrollbar scrollbar-thumb-rounded-full sticky top-14 flex h-[calc(100vh-var(--spacing)*14)] w-75 flex-col gap-4 overflow-y-auto border-r p-4">
+    <aside className="scrollbar-track-rounded-full scrollbar-thin scrollbar-track-transparent scrollbar-thumb-accent scrollbar scrollbar-thumb-rounded-full sticky top-14 hidden h-[calc(100vh-var(--spacing)*14)] w-75 flex-col gap-4 overflow-y-auto border-r p-4 md:flex">
       <div className="flex flex-col gap-2">
         <IconInput
           Icon={Filter}

frontend/components/feed.tsx

@@ -36,7 +36,7 @@ export default function Feed() {
 
   if (status === "pending" || isLoadingAuth) {
     return (
-      <div className="flex flex-1 flex-col gap-4 p-4 pr-2">
+      <div className="flex flex-1 flex-col gap-4 p-4">
         <QuibHeader />
         <div className="flex flex-col gap-4">
           {[...Array(2)].map((_, i) => (
@@ -55,7 +55,7 @@ export default function Feed() {
   }
 
   return (
-    <div className="flex flex-1 flex-col gap-4 p-4 pr-2">
+    <div className="flex flex-1 flex-col gap-4 p-4">
       <QuibHeader />
       {data.pages.map((page, i) => (
         /* biome-ignore lint/suspicious/noArrayIndexKey: Page order is stable */

frontend/components/header/index.tsx

@@ -52,7 +52,7 @@ export default function Header() {
         <Icons.quibbleIcon className="size-6" />
         <Icons.quibbleLogo className="h-6 w-max" />
       </Link>
-      <nav className="-translate-x-1/2 absolute left-1/2 flex items-center gap-2">
+      <nav className="md:-translate-x-1/2 flex items-center gap-2 md:absolute md:left-1/2">
         {navLinkMapping.map((item) => {
           const isActive = pathname === item.href;
           return (
@@ -62,7 +62,7 @@ export default function Header() {
               tabIndex={item.isDisabled ? -1 : 0}
               aria-disabled={item.isDisabled}
               className={cn(
-                "flex items-center gap-2",
+                "hidden items-center gap-2 md:flex",
                 isActive && "text-primary",
                 item.isDisabled && "pointer-events-none opacity-75",
               )}
@@ -73,7 +73,7 @@ export default function Header() {
           );
         })}
         <SearchBar />
-        <Button variant={"ghost"} asChild>
+        <Button variant={"ghost"} className="hidden md:flex" asChild>
           <Link href="/search" className="border">
             <Sparkles className="size-4 text-purple-500" />
             <span>AI Search</span>
@@ -83,35 +83,40 @@ export default function Header() {
       <nav className="flex items-center gap-2">
         {isLoading ? (
           <>
-            <Skeleton className="h-9 w-31" />
-            <Skeleton className="h-9 w-20" />
+            <Skeleton className="h-8 w-31 md:h-9" />
+            <Skeleton className="h-8 w-9 md:h-9 md:w-20" />
           </>
         ) : userProfile ? (
           <>
             <Link href="/submit">
-              <Button>
+              <Button className="h-8 md:h-9">
                 <Plus />
                 Create Quib
               </Button>
             </Link>
-            <Button variant={"outline"} size={"icon"} disabled>
+            <Button
+              variant={"outline"}
+              size={"icon"}
+              className="hidden md:flex"
+              disabled
+            >
               <Bell />
             </Button>
             <PfpDropdown username={userProfile.username}>
-              <Avatar className="size-9 rounded-md">
+              <Avatar className="size-8 rounded-md md:size-9">
                 <AvatarImage src={userProfile.avatar_url ?? ""} />
                 <AvatarFallback seed={userProfile.username} />
               </Avatar>
             </PfpDropdown>
           </>
         ) : (
           <>
-            <Button variant={"ghost"} asChild>
+            <Button variant={"ghost"} className="h-8 md:h-9" asChild>
               <Link href={`${API_ENDPOINTS.AUTH_APP_URL}/create-account`}>
                 Sign up
               </Link>
             </Button>
-            <Button asChild>
+            <Button className="h-8 md:h-9" asChild>
               <Link href={`${API_ENDPOINTS.AUTH_APP_URL}/log-in`}>
                 Log in <LogIn className="ml-2" />
               </Link>

frontend/components/header/search-bar.tsx

@@ -41,7 +41,7 @@ export default function SearchBar() {
         <IconInput
           Icon={Search}
           placeholder="Search..."
-          wrapperClassName="ml-2"
+          wrapperClassName="ml-2 hidden md:flex"
           className="w-100"
           onChange={debouncedOnChange}
         />

frontend/components/layouts/quiblet-layout.tsx

@@ -5,7 +5,7 @@ export default function QuibletLayout({
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <div className="mx-auto flex min-w-0 max-w-275 flex-1">
-      <div className="flex min-w-0 flex-1 flex-col p-4 pr-2">{children}</div>
+      <div className="flex min-w-0 flex-1 flex-col p-4">{children}</div>
       <QuibletInfo />
     </div>
   );

frontend/components/quib-header/quib-layout-selector.tsx

@@ -25,7 +25,7 @@ export default function QuibLayoutSelector() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild id={id}>
-        <Button size={"sm"} variant={"outline"}>
+        <Button size={"sm"} variant={"outline"} className="hidden md:flex">
           {layout === "card" ? (
             <Rows2 className="text-primary" />
           ) : (

frontend/components/quib-skeleton.tsx

@@ -53,11 +53,11 @@ export default function QuibSkeleton({
         <Skeleton className="size-6 rounded-full" />
         <Skeleton className="h-4 w-24" />
       </div>
-      <Skeleton className="h-6 w-100" />
+      <Skeleton className="h-6 w-full md:w-100" />
       <Skeleton className={cn("w-full", mediaClassName)} />
       <div className="flex items-center gap-2">
         <Skeleton className="h-8 w-20" />
-        <Skeleton className="h-8 w-36" />
+        <Skeleton className="h-8 w-14 md:w-36" />
         <Skeleton className="h-8 w-8" />
       </div>
     </div>

frontend/components/quib/index.tsx

@@ -146,6 +146,7 @@ export default function Quib() {
         <IconInput
           Icon={Search}
           placeholder="Search comments"
+          wrapperClassName="hidden md:flex"
           className="h-8 w-auto"
           disabled
         />

frontend/components/quiblet-info.tsx

@@ -22,7 +22,7 @@ export default function QuibletInfo() {
   }
 
   return (
-    <aside className="sticky top-14 flex h-[calc(100vh-var(--spacing)*14)] w-75 flex-col gap-4 p-4 pl-2">
+    <aside className="sticky top-14 hidden h-[calc(100vh-var(--spacing)*14)] w-75 flex-col gap-4 p-4 pl-0 md:flex">
       <div className="flex flex-col gap-1">
         <span className="font-bold">q/{quiblet.name}</span>
         <p className="font-medium text-muted-foreground text-sm">

frontend/components/quiblet/index.tsx

@@ -54,16 +54,16 @@ export default function Quiblet() {
 
   return (
     <div className="flex flex-col gap-2">
-      <div className="h-20 w-full rounded-md border bg-muted/30" />
-      <div className="relative flex items-center gap-2 px-4">
-        <Avatar className="absolute bottom-0 size-20 rounded-full ring-4 ring-background">
+      <div className="h-16 w-full rounded-md border bg-muted/30 md:h-20" />
+      <div className="relative flex flex-wrap items-center gap-2 px-4">
+        <Avatar className="absolute bottom-11 size-15 rounded-full ring-4 ring-background md:bottom-0 md:size-20">
           <AvatarImage src={quiblet.avatar_url ?? ""} alt={quiblet.name} />
           <AvatarFallback seed={quiblet.name} />
         </Avatar>
-        <h1 className="pl-22 font-bold text-3xl text-white/90">
+        <h1 className="pl-17 font-bold text-2xl text-white/90 md:pl-22 md:text-3xl">
           q/{quiblet.name}
         </h1>
-        <Link href={`/submit?q=${quiblet.name}`} className="ml-auto">
+        <Link href={`/submit?q=${quiblet.name}`} className="-ml-4 md:ml-auto">
           <Button variant={"outline"}>
             <Plus />
             Create Quib

frontend/components/submit/index.tsx

@@ -353,7 +353,7 @@ export default function SubmitForm() {
                     "relative flex w-max justify-center gap-2 rounded-md p-2 px-4 font-semibold transition-colors hover:bg-muted",
                     isActive && "text-primary",
                     type.disabled &&
-                      "cursor-not-allowed opacity-50 hover:bg-transparent",
+                      "hidden cursor-not-allowed opacity-50 hover:bg-transparent md:flex",
                   )}
                 >
                   <span>{type.label}</span>

frontend/components/ui/markdown-viewer.tsx

@@ -19,7 +19,7 @@ export function MarkdownViewer({ content, className }: MarkdownViewerProps) {
     editorProps: {
       attributes: {
         class: cn(
-          "prose dark:prose-invert max-w-none w-full text-base outline-none md:text-sm",
+          "prose dark:prose-invert max-w-none w-full text-sm outline-none",
           "[&_h2]:text-base [&_h2]:font-bold",
           "[&_ul]:list-disc [&_ul]:pl-5 [&_ul]:my-2",
           "[&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:my-2",