krispire/spsays-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: offline content layout fix

Browse Source
This commit is contained in:
gosangam
2026-07-02 23:25:40 +05:30
parent b6471f9430
commit 4586f1c22c
1 changed files with 39 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(app)/offline-content/page.tsx
+39 -35
View File
@@ -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>