fix: change AuditPanel LLM fields grid layout to responsive stacked on mobile

This commit is contained in:
2026-07-10 14:38:42 +00:00
parent 90237a2408
commit 8a357022c4
3 changed files with 73 additions and 1 deletions
+1 -1
View File
@@ -125,7 +125,7 @@ export default function AuditPanel() {
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div className="space-y-1.5"> <div className="space-y-1.5">
<label className="text-sm font-medium">Provedor</label> <label className="text-sm font-medium">Provedor</label>
<Select value={config.provider} onValueChange={handleProviderChange}> <Select value={config.provider} onValueChange={handleProviderChange}>
+69
View File
@@ -0,0 +1,69 @@
import React from 'react';
import { useWindStore } from '@/store/appStore';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Slider } from '@/components/ui/slider';
import { Badge } from '@/components/ui/badge';
import type { PermeabilityCase } from '@/lib/internal-pressure';
export const CpiSettingsCard: React.FC = () => {
const {
permeabilityCase,
cpiRatio,
cpi,
setPermeabilityCase,
setCpiRatio,
} = useWindStore();
return (
<Card className="shadow-sm border-border">
<CardHeader className="pb-2">
<CardTitle className="text-base">Pressão Interna (Cpi)</CardTitle>
<CardDescription className="text-xs">
Coeficiente de pressão interna (sec. 6.3)
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-1">
<label className="text-xs font-medium text-foreground">Caso de Permeabilidade</label>
<Select value={permeabilityCase} onValueChange={(val) => setPermeabilityCase(val as PermeabilityCase)}>
<SelectTrigger className="w-full text-xs h-8">
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent>
<SelectItem value="two-opposite-permeable">Duas faces opostas permeáveis</SelectItem>
<SelectItem value="four-equally-permeable">Quatro faces igualmente permeáveis</SelectItem>
<SelectItem value="dominant-windward">Abertura dominante barlavento</SelectItem>
<SelectItem value="dominant-leeward">Abertura dominante sotavento</SelectItem>
<SelectItem value="dominant-lateral">Abertura dominante lateral</SelectItem>
<SelectItem value="airtight">Edificação estanque</SelectItem>
</SelectContent>
</Select>
</div>
{(permeabilityCase === 'dominant-windward' || permeabilityCase === 'dominant-lateral') && (
<div className="space-y-2">
<div className="flex justify-between items-center">
<label className="text-xs font-medium text-foreground">Razão de áreas</label>
<span className="text-xs text-muted-foreground font-mono">{cpiRatio.toFixed(2)}</span>
</div>
<Slider min={0.1} max={5} step={0.05} value={[cpiRatio]} onValueChange={(vals) => setCpiRatio(vals[0])} className="py-1 cursor-pointer" />
<p className="text-[10px] leading-tight text-muted-foreground">
Razão entre a área da abertura dominante e a área total das demais aberturas.
</p>
</div>
)}
<div className="rounded-md border bg-muted/40 p-2">
<div className="flex justify-between items-center">
<span className="text-xs font-medium">Cpi calculado:</span>
<Badge variant="default" className="font-mono text-sm">{cpi.toFixed(2)}</Badge>
</div>
<p className="text-[10px] leading-tight text-muted-foreground mt-1">
Limitado a ±0,9 conforme norma. A pressão final é p = q · (Cpe Cpi).
</p>
</div>
</CardContent>
</Card>
);
};
+3
View File
@@ -3,6 +3,7 @@ import Warehouse3DViewer from '../components/Warehouse3D';
import LinearLoadsTable from '../components/LinearLoadsTable'; import LinearLoadsTable from '../components/LinearLoadsTable';
import SceneCapturePanel from '../components/SceneCapturePanel'; import SceneCapturePanel from '../components/SceneCapturePanel';
import FtoolExportCard from '../components/FtoolExportCard'; import FtoolExportCard from '../components/FtoolExportCard';
import { CpiSettingsCard } from '../components/CpiSettingsCard';
import { useGalpaoStore } from '../store/galpaoStore'; import { useGalpaoStore } from '../store/galpaoStore';
import { useWindStore } from '../store/appStore'; import { useWindStore } from '../store/appStore';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
@@ -88,6 +89,8 @@ const GalpaoModule: React.FC = () => {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<CpiSettingsCard />
</div> </div>
{/* Coluna Direita: Viewer 3D */} {/* Coluna Direita: Viewer 3D */}