Skip to content

Commit dd51cb5

Browse files
enzosakamotoenzosakamoto
committed
fix: update dialog and button styles for improved responsiveness and layout
1 parent 506114a commit dd51cb5

2 files changed

Lines changed: 65 additions & 53 deletions

File tree

‎src/features/playground/pages/playground.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ export function PlaygroundPage() {
161161
initial={{ opacity: 0, y: 20 }}
162162
animate={{ opacity: 1, y: 0 }}
163163
transition={{ duration: 0.5 }}
164-
className="mx-auto flex h-full max-h-full w-full flex-col pl-24"
164+
className="mx-auto flex h-full max-h-full w-full flex-col sm:pl-24"
165165
>
166166
{/* Header */}
167167
<div className="mb-4 flex-shrink-0">

‎src/features/user-area/components/knowledge-base-detail-modal.tsx‎

Lines changed: 64 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -272,20 +272,22 @@ echo $data['response'];`
272272

273273
return (
274274
<Dialog open={open} onOpenChange={onOpenChange}>
275-
<DialogContent className="max-h-[80vh] max-w-2xl overflow-y-auto">
276-
<DialogHeader>
277-
<DialogTitle className="text-foreground flex items-center gap-2">
278-
{knowledgeBase.displayName}
275+
<DialogContent className="max-h-[90vh] w-[96vw] max-w-2xl overflow-y-auto rounded-2xl p-5 md:max-h-[85vh] md:rounded-lg md:p-6">
276+
<DialogHeader className="space-y-3">
277+
<DialogTitle className="text-foreground flex flex-col items-start gap-2 sm:flex-row sm:items-center">
278+
<span className="break-words">{knowledgeBase.displayName}</span>
279279
<Badge className={getStatusColor(knowledgeBase.status)}>
280280
{knowledgeBase.status}
281281
</Badge>
282282
</DialogTitle>
283-
<DialogDescription>{knowledgeBase.description}</DialogDescription>
283+
<DialogDescription className="break-words">
284+
{knowledgeBase.description}
285+
</DialogDescription>
284286
</DialogHeader>
285287

286-
<div className="space-y-6">
288+
<div className="space-y-5 md:space-y-6">
287289
{/* Informações gerais */}
288-
<div className="grid grid-cols-2 gap-4 text-sm">
290+
<div className="grid grid-cols-1 gap-3 text-sm sm:grid-cols-2 sm:gap-4">
289291
<div>
290292
<span className="text-foreground font-medium">Criada em:</span>
291293
<p className="text-muted-foreground">
@@ -338,41 +340,51 @@ echo $data['response'];`
338340
return (
339341
<div
340342
key={keyId}
341-
className="hover:bg-muted/50 border-border rounded-lg border-1 p-4 transition-colors"
343+
className="hover:bg-muted/50 border-border rounded-xl border-1 p-4 transition-colors md:rounded-lg md:p-4"
342344
>
343345
<div className="mb-2 flex items-center justify-between">
344346
<span className="text-foreground text-sm font-medium">
345347
{key.kbKeyAlias}
346348
</span>
347349
</div>
348-
<div className="flex items-center gap-2">
349-
<div className="bg-muted text-muted-foreground flex-1 rounded px-3 py-2 font-mono text-sm">
350-
{isVisible ? key.kbKey : maskKey(key.kbKey)}
350+
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
351+
<div className="bg-muted text-muted-foreground flex-1 overflow-hidden rounded-lg px-3 py-2 font-mono text-xs sm:text-sm">
352+
<span className="block overflow-x-auto whitespace-nowrap">
353+
{isVisible ? key.kbKey : maskKey(key.kbKey)}
354+
</span>
355+
</div>
356+
<div className="flex gap-2">
357+
<Button
358+
onClick={() => toggleKeyVisibility(keyId)}
359+
size="sm"
360+
variant="outline"
361+
className="flex flex-1 items-center justify-center gap-1 rounded-lg sm:flex-initial"
362+
>
363+
{isVisible ? (
364+
<EyeOff className="text-foreground h-4 w-4" />
365+
) : (
366+
<Eye className="text-foreground h-4 w-4" />
367+
)}
368+
<span className="sm:hidden">
369+
{isVisible ? 'Ocultar' : 'Mostrar'}
370+
</span>
371+
</Button>
372+
<Button
373+
onClick={() => copyKeyToClipboard(key.kbKey, keyId)}
374+
size="sm"
375+
variant="outline"
376+
className="flex flex-1 items-center justify-center gap-1 rounded-lg sm:flex-initial"
377+
>
378+
{isCopied ? (
379+
<Check className="text-foreground h-4 w-4" />
380+
) : (
381+
<Copy className="text-foreground h-4 w-4" />
382+
)}
383+
<span className="sm:hidden">
384+
{isCopied ? 'Copiado' : 'Copiar'}
385+
</span>
386+
</Button>
351387
</div>
352-
<Button
353-
onClick={() => toggleKeyVisibility(keyId)}
354-
size="sm"
355-
variant="outline"
356-
className="flex items-center gap-1"
357-
>
358-
{isVisible ? (
359-
<EyeOff className="text-foreground h-4 w-4" />
360-
) : (
361-
<Eye className="text-foreground h-4 w-4" />
362-
)}
363-
</Button>
364-
<Button
365-
onClick={() => copyKeyToClipboard(key.kbKey, keyId)}
366-
size="sm"
367-
variant="outline"
368-
className="flex items-center gap-1"
369-
>
370-
{isCopied ? (
371-
<Check className="text-foreground h-4 w-4" />
372-
) : (
373-
<Copy className="text-foreground h-4 w-4" />
374-
)}
375-
</Button>
376388
</div>
377389
</div>
378390
)
@@ -428,7 +440,7 @@ echo $data['response'];`
428440
? 'secondary'
429441
: 'outline'
430442
}
431-
className="text-foreground flex items-center gap-1.5"
443+
className="text-foreground flex items-center gap-1.5 rounded-lg"
432444
>
433445
<span>{lang.icon}</span>
434446
<span>{lang.name}</span>
@@ -438,7 +450,7 @@ echo $data['response'];`
438450

439451
{/* Code snippet */}
440452
<div className="relative">
441-
<pre className="bg-muted max-h-96 overflow-y-auto rounded-lg p-4 pr-20 text-sm">
453+
<pre className="bg-muted max-h-96 overflow-y-auto rounded-xl p-4 pr-12 text-xs sm:p-4 sm:pr-20 sm:text-sm">
442454
<code className="text-foreground block break-words whitespace-pre-wrap">
443455
{getCodeSnippet(
444456
selectedLanguage,
@@ -450,17 +462,17 @@ echo $data['response'];`
450462
onClick={copyCodeToClipboard}
451463
size="sm"
452464
variant="secondary"
453-
className="absolute top-2 right-2 flex items-center gap-1"
465+
className="absolute top-2 right-2 flex items-center gap-1 rounded-lg text-xs sm:text-sm"
454466
>
455467
{copiedCode ? (
456468
<>
457-
<Check className="h-4 w-4" />
458-
Copiado!
469+
<Check className="h-3 w-3 sm:h-4 sm:w-4" />
470+
<span className="hidden sm:inline">Copiado!</span>
459471
</>
460472
) : (
461473
<>
462-
<Copy className="h-4 w-4" />
463-
Copiar
474+
<Copy className="h-3 w-3 sm:h-4 sm:w-4" />
475+
<span className="hidden sm:inline">Copiar</span>
464476
</>
465477
)}
466478
</Button>
@@ -475,18 +487,18 @@ echo $data['response'];`
475487

476488
{/* Lista de arquivos */}
477489
<div className="space-y-4">
478-
<div className="flex items-center justify-between">
490+
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
479491
<h3 className="text-foreground text-lg font-semibold">
480492
Arquivos
481493
</h3>
482494
<Button
483495
onClick={handleAddFiles}
484496
size="sm"
485497
variant="outline"
486-
className="text-foreground flex items-center gap-2"
498+
className="text-foreground flex items-center justify-center gap-2 rounded-lg"
487499
>
488500
<Plus className="h-4 w-4" />
489-
Adicionar arquivos
501+
<span>Adicionar arquivos</span>
490502
</Button>
491503
</div>
492504

@@ -500,10 +512,10 @@ echo $data['response'];`
500512
{knowledgeBase.files.map((file, index) => (
501513
<div
502514
key={`${file.fileName}-${index}`}
503-
className="hover:bg-muted/50 border-border flex items-center justify-between rounded-lg border-1 p-3 transition-colors"
515+
className="hover:bg-muted/50 border-border flex flex-col gap-2 rounded-xl border-1 p-4 transition-colors sm:flex-row sm:items-center sm:justify-between md:rounded-lg"
504516
>
505517
<div
506-
className="flex min-w-0 flex-1 items-center gap-3"
518+
className="flex min-w-0 flex-1 cursor-pointer items-center gap-3"
507519
onClick={() => window.open(file.url, '_blank')}
508520
>
509521
<FileText className="text-primary h-5 w-5 flex-shrink-0" />
@@ -523,10 +535,10 @@ echo $data['response'];`
523535
onClick={() => handleRemoveFile(file.fileName)}
524536
size="sm"
525537
variant="ghost"
526-
className="text-destructive hover:text-destructive hover:bg-destructive/10 flex items-center gap-1"
538+
className="text-destructive hover:text-destructive hover:bg-destructive/10 flex w-full items-center justify-center gap-1 rounded-lg sm:w-auto"
527539
>
528540
<Trash2 className="h-4 w-4" />
529-
Remover
541+
<span>Remover</span>
530542
</Button>
531543
</div>
532544
))}
@@ -537,17 +549,17 @@ echo $data['response'];`
537549
<Separator />
538550

539551
{/* Botões de ação */}
540-
<div className="flex justify-end gap-3">
552+
<div className="flex flex-col gap-2 sm:flex-row sm:justify-end sm:gap-3">
541553
<Button
542554
onClick={() => onOpenChange(false)}
543555
variant="outline"
544-
className="text-foreground"
556+
className="text-foreground w-full rounded-lg sm:w-auto"
545557
>
546558
Fechar
547559
</Button>
548560
<Button
549561
onClick={handleTestKnowledgeBase}
550-
className="flex items-center gap-2"
562+
className="flex w-full items-center justify-center gap-2 rounded-lg sm:w-auto"
551563
>
552564
<Play className="h-4 w-4" />
553565
Testar

0 commit comments

Comments
 (0)