From 4586f1c22c3dc3237ea5da07067c8e748ac24d7e Mon Sep 17 00:00:00 2001
From: gosangam <sangam4742@gmail.com>
Date: Thu, 2 Jul 2026 23:25:40 +0530
Subject: [PATCH] fix: offline content layout fix

---
 app/(app)/offline-content/page.tsx | 74 ++++++++++++++++--------------
 1 file changed, 39 insertions(+), 35 deletions(-)

diff --git a/app/(app)/offline-content/page.tsx b/app/(app)/offline-content/page.tsx
index 9285d505..7bf1165c 100644
--- a/app/(app)/offline-content/page.tsx
+++ b/app/(app)/offline-content/page.tsx
@@ -22,7 +22,6 @@ import {
   Wifi,
   WifiOff,
 } from "lucide-react";
-import { PageHeader } from "@/components/layout/page-header";
 import {
   listOffline,
   offlineSupported,
@@ -104,36 +103,38 @@ export default function OfflineContentPage() {
 
   return (
     <>
-      <PageHeader>
-        <h1 className="text-2xl font-bold text-foreground">Offline library</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Pages and lectures you&rsquo;ve saved to read or listen to without a
-          connection. Stored on this device.
-        </p>
-        <div className="mt-3 flex items-center gap-3 text-xs text-muted-foreground">
-          <span
-            className={cn(
-              "inline-flex items-center gap-1.5",
-              online ? "text-muted-foreground" : "text-amber-600",
-            )}
-          >
-            {online ? (
-              <Wifi className="size-3.5" />
-            ) : (
-              <WifiOff className="size-3.5" />
-            )}
-            {online ? "Online" : "Offline"}
-          </span>
-          {usage !== null && (
-            <span className="inline-flex items-center gap-1.5">
-              <HardDriveDownload className="size-3.5" />
-              {formatBytes(usage)} used
+      <header className="border-b border-border bg-card/85 backdrop-blur px-4 sm:px-6 py-5">
+        <div className="max-w-6xl mx-auto">
+          <h1 className="text-2xl font-bold text-foreground">Offline library</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Pages and lectures you&rsquo;ve saved to read or listen to without a
+            connection. Stored on this device.
+          </p>
+          <div className="mt-3 flex items-center gap-3 text-xs text-muted-foreground">
+            <span
+              className={cn(
+                "inline-flex items-center gap-1.5",
+                online ? "text-muted-foreground" : "text-amber-600",
+              )}
+            >
+              {online ? (
+                <Wifi className="size-3.5" />
+              ) : (
+                <WifiOff className="size-3.5" />
+              )}
+              {online ? "Online" : "Offline"}
             </span>
-          )}
+            {usage !== null && (
+              <span className="inline-flex items-center gap-1.5">
+                <HardDriveDownload className="size-3.5" />
+                {formatBytes(usage)} used
+              </span>
+            )}
+          </div>
         </div>
-      </PageHeader>
+      </header>
 
-      <main className="max-w-5xl mx-auto px-4 sm:px-6 py-8">
+      <main className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
         {!supported ? (
           <p className="py-16 text-center text-sm text-muted-foreground">
             This browser doesn&rsquo;t support offline saving.
@@ -152,24 +153,27 @@ export default function OfflineContentPage() {
             </p>
           </div>
         ) : (
-          <ul className="space-y-2">
+          <ul className="space-y-2.5">
             {items.map((item) => {
               const meta = TYPE_META[item.type] ?? TYPE_META.document;
               return (
                 <li
                   key={item.key}
-                  className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 transition-colors hover:bg-muted/50"
+                  className="flex items-start gap-3 rounded-xl border border-border bg-card px-4 py-3.5 sm:px-5 sm:py-4 transition-colors hover:bg-muted/50"
                 >
                   {/* Hard navigation so the SW can serve the cached document offline. */}
-                  <a href={item.href} className="flex min-w-0 flex-1 items-center gap-3">
-                    <span className="shrink-0 text-muted-foreground">
+                  <a
+                    href={item.href}
+                    className="flex min-w-0 flex-1 items-start gap-3"
+                  >
+                    <span className="mt-0.5 shrink-0 text-muted-foreground">
                       {meta.icon}
                     </span>
                     <span className="min-w-0">
-                      <span className="block truncate font-medium text-foreground">
+                      <span className="line-clamp-2 text-[15px] sm:text-base font-medium text-foreground">
                         {item.title}
                       </span>
-                      <span className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
+                      <span className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
                         <span className="rounded bg-muted px-1.5 py-0.5">
                           {meta.label}
                         </span>
@@ -188,7 +192,7 @@ export default function OfflineContentPage() {
                     onClick={() => remove(item.key)}
                     aria-label={`Remove ${item.title} from offline`}
                     title="Remove from offline"
-                    className="shrink-0 rounded-md p-2 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+                    className="-mr-1 mt-0.5 shrink-0 rounded-md p-2 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
                   >
                     <Trash2 className="size-4" />
                   </button>