arkorty/DownLink
1
0
Fork 0
mirror of https://github.com/arkorty/DownLink.git synced 2026-03-17 16:51:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: overflow

Browse Source
This commit is contained in:
Arkaprabha Chakraborty
2025-07-10 00:47:35 +05:30
parent 17e2a2b960
commit 81a231137d
1 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend-v2/app/admin/page.tsx
View File

@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback } from "react"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area" import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
import { RefreshCw, Trash2, Server, FileText, Database, Loader2 } from "lucide-react" import { RefreshCw, Trash2, Server, FileText, Database, Loader2 } from "lucide-react"
import { getApiBaseUrl } from "../../lib/utils"; import { getApiBaseUrl } from "../../lib/utils";
import { Toaster, toast } from "sonner"; import { Toaster, toast } from "sonner";
@@ -212,19 +212,27 @@ export default function AdminPage() {
<div className="font-semibold text-base sm:text-lg">Logs</div> <div className="font-semibold text-base sm:text-lg">Logs</div>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> {/* CardContent is now overflow-hidden and w-full to constrain children */}
<ScrollArea className="h-64 sm:h-80 md:h-96"> <CardContent className="pt-0 overflow-hidden w-full">
{/* ScrollArea is w-full, min-w-0, max-w-full to prevent overflow */}
<ScrollArea className="h-64 sm:h-80 md:h-96 w-full min-w-0 max-w-full">
<ScrollBar orientation="horizontal" />
{logs.length > 0 ? ( {logs.length > 0 ? (
<ul className="space-y-2"> // Log list is w-full, min-w-0, max-w-full
<ul className="space-y-2 w-full min-w-0 max-w-full">
{logs.map((log, idx) => ( {logs.map((log, idx) => (
<li key={idx} className={`p-3 rounded-lg border ${getLogLevelColor(log.level)}`}> // Each log entry is w-full, min-w-0, max-w-full
<div className="flex items-center space-x-2"> <li key={idx} className={`p-3 rounded-lg border ${getLogLevelColor(log.level)} w-full min-w-0 max-w-full`}>
<span className="font-mono text-xs text-slate-500">{new Date(log.time).toLocaleString()}</span> {/* Header row: flex with min-w-0 to allow shrinking */}
<span className="font-semibold text-xs uppercase">{log.level}</span> <div className="flex items-center space-x-2 min-w-0">
<span className="font-mono text-xs text-slate-500 flex-shrink-0">{new Date(log.time).toLocaleString()}</span>
<span className="font-semibold text-xs uppercase flex-shrink-0">{log.level}</span>
</div> </div>
<div className="mt-1 text-sm text-slate-800 break-words whitespace-pre-line">{log.msg}</div> {/* Log message: wraps, never overflows */}
<div className="mt-1 text-sm text-slate-800 break-words whitespace-pre-line w-full min-w-0 max-w-full">{log.msg}</div>
{/* JSON attributes: now wraps, no horizontal scroll */}
{log.attrs && ( {log.attrs && (
<pre className="mt-1 text-xs text-slate-600 bg-slate-100 rounded p-2 overflow-x-auto max-w-full break-words whitespace-pre-wrap">{JSON.stringify(log.attrs, null, 2)}</pre> <pre className="mt-1 text-xs text-slate-600 bg-slate-100 rounded p-2 w-full max-w-full whitespace-pre-wrap break-words break-all">{JSON.stringify(log.attrs, null, 2)}</pre>
)} )}
</li> </li>
))} ))}