Refactor: Make UI responsive

This commit is contained in:
gpt-engineer-app[bot]
2025-10-17 18:41:54 +00:00
parent b81e1cf47d
commit b1b37f5cf1
10 changed files with 190 additions and 144 deletions
+11 -10
View File
@@ -70,25 +70,26 @@ export const ImageView = () => {
);
return (
<div className="flex flex-col h-full">
<div className="flex flex-col h-full pb-16 md:pb-0">
<ChatHeader />
<div className="flex-1 flex overflow-hidden">
{/* Main Content */}
<ScrollArea className="flex-1">
<div className="max-w-5xl mx-auto p-6">
<Tabs defaultValue="generate" className="space-y-6">
<div className="max-w-5xl mx-auto p-3 md:p-6">
<Tabs defaultValue="generate" className="space-y-4 md:space-y-6">
<TabsList className="grid w-full grid-cols-2 glass-effect">
<TabsTrigger value="generate">Gerar Imagem</TabsTrigger>
<TabsTrigger value="history">
<Clock className="w-4 h-4 mr-2" />
Histórico
<TabsTrigger value="generate" className="text-xs md:text-sm">Gerar Imagem</TabsTrigger>
<TabsTrigger value="history" className="text-xs md:text-sm">
<Clock className="w-3 h-3 md:w-4 md:h-4 mr-1 md:mr-2" />
<span className="hidden md:inline">Histórico</span>
<span className="md:hidden">Hist.</span>
</TabsTrigger>
</TabsList>
{/* Generate Tab */}
<TabsContent value="generate" className="space-y-6">
<div className="glass-effect rounded-xl p-6 space-y-4">
<TabsContent value="generate" className="space-y-4 md:space-y-6">
<div className="glass-effect rounded-xl p-4 md:p-6 space-y-3 md:space-y-4">
<div className="space-y-2">
<label className="text-sm font-medium text-foreground">
Descreva a imagem
@@ -101,7 +102,7 @@ export const ImageView = () => {
/>
</div>
<div className="flex gap-4 items-end">
<div className="flex flex-col md:flex-row gap-3 md:gap-4 md:items-end">
<div className="flex-1 space-y-2">
<label className="text-sm font-medium text-foreground">
Tamanho