From 017c847aa3eac5d70d5c94adba1b824f7d97c130 Mon Sep 17 00:00:00 2001
From: stabldev <114811070+stabldev@users.noreply.github.com>
Date: Sun, 22 Mar 2026 20:12:30 +0530
Subject: [PATCH 1/5] fix: homepage responsiveness

---
 frontend/app/page.tsx                           |  4 ++--
 frontend/components/app-sidebar/index.tsx       |  2 +-
 frontend/components/feed.tsx                    |  4 ++--
 frontend/components/header/index.tsx            | 17 +++++++++++------
 frontend/components/header/search-bar.tsx       |  2 +-
 .../quib-header/quib-layout-selector.tsx        |  2 +-
 6 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index b7e03613..967ad5c9 100644
--- a/frontend/app/page.tsx
+++ b/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 />
diff --git a/frontend/components/app-sidebar/index.tsx b/frontend/components/app-sidebar/index.tsx
index 7a3b7c85..486e384e 100644
--- a/frontend/components/app-sidebar/index.tsx
+++ b/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}
diff --git a/frontend/components/feed.tsx b/frontend/components/feed.tsx
index 7651d37e..5a24f05d 100644
--- a/frontend/components/feed.tsx
+++ b/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 */
diff --git a/frontend/components/header/index.tsx b/frontend/components/header/index.tsx
index d0605cc2..9f0f69a9 100644
--- a/frontend/components/header/index.tsx
+++ b/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>
@@ -89,16 +89,21 @@ export default function Header() {
         ) : 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>
diff --git a/frontend/components/header/search-bar.tsx b/frontend/components/header/search-bar.tsx
index b7a9f80f..72360d4c 100644
--- a/frontend/components/header/search-bar.tsx
+++ b/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}
         />
diff --git a/frontend/components/quib-header/quib-layout-selector.tsx b/frontend/components/quib-header/quib-layout-selector.tsx
index 43e1e57d..7c241ae0 100644
--- a/frontend/components/quib-header/quib-layout-selector.tsx
+++ b/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" />
           ) : (

From 2232cb52ba0a944ed9d9f7b25ec410e7e40395dd Mon Sep 17 00:00:00 2001
From: stabldev <114811070+stabldev@users.noreply.github.com>
Date: Sun, 22 Mar 2026 20:19:23 +0530
Subject: [PATCH 2/5] fix: quib page responsiveness

---
 frontend/components/layouts/quiblet-layout.tsx | 2 +-
 frontend/components/quib/index.tsx             | 1 +
 frontend/components/quiblet-info.tsx           | 2 +-
 frontend/components/ui/markdown-viewer.tsx     | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/components/layouts/quiblet-layout.tsx b/frontend/components/layouts/quiblet-layout.tsx
index f4382652..6d99596e 100644
--- a/frontend/components/layouts/quiblet-layout.tsx
+++ b/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>
   );
diff --git a/frontend/components/quib/index.tsx b/frontend/components/quib/index.tsx
index caed3b31..f0e674f6 100644
--- a/frontend/components/quib/index.tsx
+++ b/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
         />
diff --git a/frontend/components/quiblet-info.tsx b/frontend/components/quiblet-info.tsx
index ab1f7555..d59d72be 100644
--- a/frontend/components/quiblet-info.tsx
+++ b/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">
diff --git a/frontend/components/ui/markdown-viewer.tsx b/frontend/components/ui/markdown-viewer.tsx
index 2bbca6fa..6c94daa1 100644
--- a/frontend/components/ui/markdown-viewer.tsx
+++ b/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",

From 49a55779ff396842aa57d47c39fbad0c36bc74f2 Mon Sep 17 00:00:00 2001
From: stabldev <114811070+stabldev@users.noreply.github.com>
Date: Sun, 22 Mar 2026 20:27:08 +0530
Subject: [PATCH 3/5] fix: quiblet page responsiveness

---
 frontend/components/quiblet/index.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/components/quiblet/index.tsx b/frontend/components/quiblet/index.tsx
index 95540457..e7de139f 100644
--- a/frontend/components/quiblet/index.tsx
+++ b/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

From 0d123131ce228bbc862f82c47dc3c56a94673452 Mon Sep 17 00:00:00 2001
From: stabldev <114811070+stabldev@users.noreply.github.com>
Date: Sun, 22 Mar 2026 20:46:26 +0530
Subject: [PATCH 4/5] fix: responsiveness

---
 frontend/components/header/index.tsx  | 8 ++++----
 frontend/components/quib-skeleton.tsx | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/components/header/index.tsx b/frontend/components/header/index.tsx
index 9f0f69a9..56535f70 100644
--- a/frontend/components/header/index.tsx
+++ b/frontend/components/header/index.tsx
@@ -83,8 +83,8 @@ 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 ? (
           <>
@@ -111,12 +111,12 @@ export default function Header() {
           </>
         ) : (
           <>
-            <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>
diff --git a/frontend/components/quib-skeleton.tsx b/frontend/components/quib-skeleton.tsx
index bd8050c6..7cf5d8a1 100644
--- a/frontend/components/quib-skeleton.tsx
+++ b/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>

From ad058ecf10477bff2e5fd1450f3259b3fada8e05 Mon Sep 17 00:00:00 2001
From: stabldev <114811070+stabldev@users.noreply.github.com>
Date: Sun, 22 Mar 2026 21:02:39 +0530
Subject: [PATCH 5/5] fix: submit page

---
 frontend/components/submit/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/submit/index.tsx b/frontend/components/submit/index.tsx
index d20af561..edbb2054 100644
--- a/frontend/components/submit/index.tsx
+++ b/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>