Improve dashboard responsive layouts (#805)
* Improve dashboard responsive layouts * Improve proxy pools mobile layout * Improve CLI tool card input responsiveness --------- Co-authored-by: Delynn Assistant <zhen@dkzhen.org>
This commit is contained in:
ZhenandDelynn Assistant authored and 
GitHub committed
1 parent
9ca388972c
commit
0da61d8f7b
29 files changed
+561
-464
No files matched your search
@@ -169,10 +169,10 @@ export default function RequestDetailsTab() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex min-w-0 flex-col gap-6">
|
||||
<Card padding="md">
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="flex min-w-0 flex-col gap-2">
|
||||
<label htmlFor="provider-filter" className="text-sm font-medium text-text-main">Provider</label>
|
||||
<select
|
||||
id="provider-filter"
|
||||
@@ -181,7 +181,7 @@ export default function RequestDetailsTab() {
|
||||
className={cn(
|
||||
"h-9 px-3 rounded-lg border border-black/10 dark:border-white/10 bg-surface",
|
||||
"text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20",
|
||||
"cursor-pointer min-w-[150px]"
|
||||
"w-full min-w-0 cursor-pointer"
|
||||
)}
|
||||
>
|
||||
<option value="">All Providers</option>
|
||||
@@ -193,7 +193,7 @@ export default function RequestDetailsTab() {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex min-w-0 flex-col gap-2">
|
||||
<label htmlFor="start-date-filter" className="text-sm font-medium text-text-main">Start Date</label>
|
||||
<input
|
||||
id="start-date-filter"
|
||||
@@ -202,12 +202,12 @@ export default function RequestDetailsTab() {
|
||||
onChange={(e) => setFilters({ ...filters, startDate: e.target.value })}
|
||||
className={cn(
|
||||
"h-9 px-3 rounded-lg border border-black/10 dark:border-white/10 bg-surface",
|
||||
"text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
"w-full min-w-0 text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex min-w-0 flex-col gap-2">
|
||||
<label htmlFor="end-date-filter" className="text-sm font-medium text-text-main">End Date</label>
|
||||
<input
|
||||
id="end-date-filter"
|
||||
@@ -216,17 +216,18 @@ export default function RequestDetailsTab() {
|
||||
onChange={(e) => setFilters({ ...filters, endDate: e.target.value })}
|
||||
className={cn(
|
||||
"h-9 px-3 rounded-lg border border-black/10 dark:border-white/10 bg-surface",
|
||||
"text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
"w-full min-w-0 text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm font-medium text-text-main opacity-0" aria-hidden="true">Clear</span>
|
||||
<div className="flex min-w-0 flex-col gap-2 sm:col-span-2 lg:col-span-1">
|
||||
<span className="hidden text-sm font-medium text-text-main opacity-0 lg:block" aria-hidden="true">Clear</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleClearFilters}
|
||||
disabled={!filters.provider && !filters.startDate && !filters.endDate}
|
||||
className="w-full"
|
||||
>
|
||||
Clear Filters
|
||||
</Button>
|
||||
@@ -236,7 +237,7 @@ export default function RequestDetailsTab() {
|
||||
|
||||
<Card padding="none">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<table className="w-full min-w-[880px]">
|
||||
<thead>
|
||||
<tr className="border-b border-black/5 dark:border-white/5">
|
||||
<th className="text-left p-4 text-sm font-semibold text-text-main">Timestamp</th>
|
||||
@@ -270,13 +271,13 @@ export default function RequestDetailsTab() {
|
||||
key={`${detail.id}-${index}`}
|
||||
className="border-b border-black/5 dark:border-white/5 last:border-b-0 hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors"
|
||||
>
|
||||
<td className="p-4 text-sm text-text-main">
|
||||
<td className="whitespace-nowrap p-4 text-sm text-text-main">
|
||||
{new Date(detail.timestamp).toLocaleString()}
|
||||
</td>
|
||||
<td className="p-4 text-sm text-text-main font-mono">
|
||||
<td className="max-w-[260px] truncate p-4 font-mono text-sm text-text-main">
|
||||
{detail.model}
|
||||
</td>
|
||||
<td className="p-4 text-sm text-text-main">
|
||||
<td className="max-w-[180px] truncate p-4 text-sm text-text-main">
|
||||
<span className="font-medium">
|
||||
{getProviderName(detail.provider, providerNameCache)}
|
||||
</span>
|
||||
@@ -330,10 +331,10 @@ export default function RequestDetailsTab() {
|
||||
>
|
||||
{selectedDetail && (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="grid min-w-0 grid-cols-1 gap-4 text-sm sm:grid-cols-2">
|
||||
<div>
|
||||
<span className="text-text-muted">ID:</span>{" "}
|
||||
<span className="text-text-main font-mono">{selectedDetail.id}</span>
|
||||
<span className="break-all font-mono text-text-main">{selectedDetail.id}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-text-muted">Timestamp:</span>{" "}
|
||||
@@ -378,14 +379,14 @@ export default function RequestDetailsTab() {
|
||||
|
||||
<div className="space-y-4">
|
||||
<CollapsibleSection title="1. Client Request (Input)" defaultOpen={true} icon="input">
|
||||
<pre className="bg-black/5 dark:bg-white/5 p-4 rounded-lg overflow-auto max-h-[300px] text-xs font-mono text-text-main border border-black/5 dark:border-white/5">
|
||||
<pre className="max-h-[300px] max-w-full overflow-auto rounded-lg border border-black/5 bg-black/5 p-3 font-mono text-xs text-text-main dark:border-white/5 dark:bg-white/5 sm:p-4">
|
||||
{JSON.stringify(selectedDetail.request, null, 2)}
|
||||
</pre>
|
||||
</CollapsibleSection>
|
||||
|
||||
{selectedDetail.providerRequest && (
|
||||
<CollapsibleSection title="2. Provider Request (Translated)" icon="translate">
|
||||
<pre className="bg-black/5 dark:bg-white/5 p-4 rounded-lg overflow-auto max-h-[300px] text-xs font-mono text-text-main border border-black/5 dark:border-white/5">
|
||||
<pre className="max-h-[300px] max-w-full overflow-auto rounded-lg border border-black/5 bg-black/5 p-3 font-mono text-xs text-text-main dark:border-white/5 dark:bg-white/5 sm:p-4">
|
||||
{JSON.stringify(selectedDetail.providerRequest, null, 2)}
|
||||
</pre>
|
||||
</CollapsibleSection>
|
||||
@@ -393,7 +394,7 @@ export default function RequestDetailsTab() {
|
||||
|
||||
{selectedDetail.providerResponse && (
|
||||
<CollapsibleSection title="3. Provider Response (Raw)" icon="data_object">
|
||||
<pre className="bg-black/5 dark:bg-white/5 p-4 rounded-lg overflow-auto max-h-[300px] text-xs font-mono text-text-main border border-black/5 dark:border-white/5">
|
||||
<pre className="max-h-[300px] max-w-full overflow-auto rounded-lg border border-black/5 bg-black/5 p-3 font-mono text-xs text-text-main dark:border-white/5 dark:bg-white/5 sm:p-4">
|
||||
{typeof selectedDetail.providerResponse === 'object'
|
||||
? JSON.stringify(selectedDetail.providerResponse, null, 2)
|
||||
: selectedDetail.providerResponse
|
||||
@@ -409,7 +410,7 @@ export default function RequestDetailsTab() {
|
||||
<span className="material-symbols-outlined text-[16px]">psychology</span>
|
||||
Thinking Process
|
||||
</h4>
|
||||
<pre className="bg-amber-50 dark:bg-amber-950/30 p-4 rounded-lg overflow-auto max-h-[200px] text-xs font-mono text-amber-900 dark:text-amber-100 border border-amber-200 dark:border-amber-800">
|
||||
<pre className="max-h-[200px] max-w-full overflow-auto rounded-lg border border-amber-200 bg-amber-50 p-3 font-mono text-xs text-amber-900 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-100 sm:p-4">
|
||||
{selectedDetail.response.thinking}
|
||||
</pre>
|
||||
</div>
|
||||
@@ -418,7 +419,7 @@ export default function RequestDetailsTab() {
|
||||
<h4 className="font-semibold text-text-main mb-2 text-xs uppercase tracking-wide opacity-70">
|
||||
Content
|
||||
</h4>
|
||||
<pre className="bg-black/5 dark:bg-white/5 p-4 rounded-lg overflow-auto max-h-[300px] text-xs font-mono text-text-main border border-black/5 dark:border-white/5">
|
||||
<pre className="max-h-[300px] max-w-full overflow-auto rounded-lg border border-black/5 bg-black/5 p-3 font-mono text-xs text-text-main dark:border-white/5 dark:bg-white/5 sm:p-4">
|
||||
{selectedDetail.response?.content || "[No content]"}
|
||||
</pre>
|
||||
</CollapsibleSection>
|
||||
|
||||
Reference in new issue
Block a user