From 452af2f6f05d1170a5a54d3b64334b6ca42b74a1 Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Mon, 11 Aug 2025 05:05:00 +0000
Subject: [PATCH] feat: Enhance OfflineManagement component with improved card
 styling and layout

---
 app/components/OfflineManagement.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/components/OfflineManagement.tsx b/app/components/OfflineManagement.tsx
index 6105213..e296486 100644
--- a/app/components/OfflineManagement.tsx
+++ b/app/components/OfflineManagement.tsx
@@ -125,7 +125,7 @@ export function OfflineManagement() {
 
   if (!isInitialized) {
     return (
-      <Card>
+      <Card className="mb-6 break-inside-avoid py-5">
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Database className="h-5 w-5" />
@@ -150,7 +150,7 @@ export function OfflineManagement() {
   return (
     <div className="space-y-6">
       {/* Connection Status */}
-      <Card>
+      <Card className="mb-6 break-inside-avoid py-5">
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             {isOnline ? (
@@ -185,7 +185,7 @@ export function OfflineManagement() {
       </Card>
 
       {/* Sync Status */}
-      <Card>
+      <Card className="mb-6 break-inside-avoid py-5">
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <RefreshCw className="h-5 w-5" />
@@ -242,7 +242,7 @@ export function OfflineManagement() {
       </Card>
 
       {/* Library Statistics */}
-      <Card>
+      <Card className="mb-6 break-inside-avoid py-5">
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Database className="h-5 w-5" />
@@ -310,9 +310,9 @@ export function OfflineManagement() {
       </Card>
 
       {/* Offline Features */}
-      <Card>
+      <Card className="mb-6 break-inside-avoid py-5">
         <CardHeader>
-          <CardTitle>Offline Features</CardTitle>
+          <CardTitle className='flex items-center gap-2'>Offline Features</CardTitle>
           <CardDescription>
             What works when you&apos;re offline
           </CardDescription>
@@ -363,9 +363,9 @@ export function OfflineManagement() {
       </Card>
 
       {/* Danger Zone */}
-      <Card className="border-red-200">
+      <Card className="mb-6 break-inside-avoid py-5 border-red-200">
         <CardHeader>
-          <CardTitle className="text-red-600">Danger Zone</CardTitle>
+          <CardTitle className="text-red-600 flex items-center gap-2">Danger Zone</CardTitle>
           <CardDescription>
             Permanently delete all offline data
           </CardDescription>