From 5c0688d8076fb0b6f7ca8ef00fb9f1f46f9d46cb Mon Sep 17 00:00:00 2001
From: Marcos <m.reifonas@gmail.com>
Date: Fri, 10 Jul 2026 14:14:40 +0000
Subject: [PATCH] fix: shrink form inputs, labels, grids and tabs inside global
 settings modal for mobile compatibility

---
 .../components/GlobalWindSettingsModal.tsx    | 87 ++++++++++---------
 1 file changed, 44 insertions(+), 43 deletions(-)

diff --git a/app/src/components/GlobalWindSettingsModal.tsx b/app/src/components/GlobalWindSettingsModal.tsx
index ae263e1..7f29aaa 100644
--- a/app/src/components/GlobalWindSettingsModal.tsx
+++ b/app/src/components/GlobalWindSettingsModal.tsx
@@ -60,26 +60,26 @@ export function GlobalWindSettingsModal() {
           </DialogDescription>
         </DialogHeader>
 
-        <Tabs defaultValue="norma" className="w-full mt-2">
-          <TabsList className="grid w-full grid-cols-3 mb-4">
-            <TabsTrigger value="norma">NBR 6123</TabsTrigger>
-            <TabsTrigger value="cpi">Cpi</TabsTrigger>
-            <TabsTrigger value="local">Local</TabsTrigger>
+        <Tabs defaultValue="norma" className="w-full mt-2 min-w-0">
+          <TabsList className="flex w-full mb-4 bg-muted p-1 text-xs min-w-0">
+            <TabsTrigger value="norma" className="text-xs py-1 px-1.5 flex-1">NBR 6123</TabsTrigger>
+            <TabsTrigger value="cpi" className="text-xs py-1 px-1.5 flex-1">Cpi</TabsTrigger>
+            <TabsTrigger value="local" className="text-xs py-1 px-1.5 flex-1">Local</TabsTrigger>
           </TabsList>
 
-          <TabsContent value="norma" className="space-y-6">
-            <div className="space-y-3">
+          <TabsContent value="norma" className="space-y-4 min-w-0">
+            <div className="space-y-2">
               <div className="flex justify-between items-center">
-                <label className="text-sm font-medium text-foreground">Velocidade Básica (V₀)</label>
-                <span className="text-sm text-muted-foreground font-mono">{v0} m/s</span>
+                <label className="text-xs font-medium text-foreground">Velocidade Básica (V₀)</label>
+                <span className="text-xs text-muted-foreground font-mono">{v0} m/s</span>
               </div>
               <Slider min={25} max={55} step={1} value={[v0]} onValueChange={(vals) => setV0(vals[0])} className="py-1 cursor-pointer" />
             </div>
 
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-foreground">Fator Topográfico (S₁)</label>
+            <div className="space-y-1">
+              <label className="text-xs font-medium text-foreground">Fator Topográfico (S₁)</label>
               <Select value={s1.toString()} onValueChange={(val) => setS1(Number(val))}>
-                <SelectTrigger className="w-full"><SelectValue placeholder="S₁" /></SelectTrigger>
+                <SelectTrigger className="w-full text-xs h-8"><SelectValue placeholder="S₁" /></SelectTrigger>
                 <SelectContent>
                   <SelectItem value="0.9">0,9 (Vale profundo protegido)</SelectItem>
                   <SelectItem value="1">1,0 (Terreno plano)</SelectItem>
@@ -89,10 +89,10 @@ export function GlobalWindSettingsModal() {
               </Select>
             </div>
 
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-foreground">Categoria do Terreno (S₂)</label>
+            <div className="space-y-1">
+              <label className="text-xs font-medium text-foreground">Categoria do Terreno (S₂)</label>
               <Select value={terrainCategory} onValueChange={(val) => setTerrainCategory(val as typeof terrainCategory)}>
-                <SelectTrigger className="w-full"><SelectValue placeholder="Categoria" /></SelectTrigger>
+                <SelectTrigger className="w-full text-xs h-8"><SelectValue placeholder="Categoria" /></SelectTrigger>
                 <SelectContent>
                   <SelectItem value="I">I — Superfícies lisas (Mar calmo, lagos, rios)</SelectItem>
                   <SelectItem value="II">II — Terrenos abertos em nível (Campos, pastos)</SelectItem>
@@ -103,17 +103,17 @@ export function GlobalWindSettingsModal() {
               </Select>
             </div>
 
-            <div className="rounded-md border bg-muted/40 p-3 text-xs space-y-1">
+            <div className="rounded-md border bg-muted/40 p-2 text-[11px] space-y-1">
               <div className="flex justify-between"><span>Classe (maior dimensão):</span><span className="font-mono font-medium">{structureClass}</span></div>
               <div className="flex justify-between"><span>S₂:</span><span className="font-mono font-medium">{s2.toFixed(3)}</span></div>
               <div className="flex justify-between"><span>Vₖ:</span><span className="font-mono font-medium">{vk.toFixed(2)} m/s</span></div>
               <div className="flex justify-between"><span>q:</span><span className="font-mono font-medium">{q.toFixed(4)} kN/m²</span></div>
             </div>
 
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-foreground">Grupo Estatístico (S₃)</label>
+            <div className="space-y-1">
+              <label className="text-xs font-medium text-foreground">Grupo Estatístico (S₃)</label>
               <Select value={s3Group.toString()} onValueChange={(val) => setS3Group(Number(val) as 1 | 2 | 3 | 4 | 5)}>
-                <SelectTrigger className="w-full"><SelectValue placeholder="Grupo" /></SelectTrigger>
+                <SelectTrigger className="w-full text-xs h-8"><SelectValue placeholder="Grupo" /></SelectTrigger>
                 <SelectContent>
                   <SelectItem value="1">Grupo 1 — Risco à vida (Hospitais, quartéis) (S₃=1,11)</SelectItem>
                   <SelectItem value="2">Grupo 2 — Edificações comuns (Hotéis, residências) (S₃=1,06)</SelectItem>
@@ -124,20 +124,20 @@ export function GlobalWindSettingsModal() {
               </Select>
             </div>
 
-            <div className="space-y-3">
+            <div className="space-y-2">
               <div className="flex justify-between items-center">
-                <label className="text-sm font-medium text-foreground">S₃ customizado</label>
-                <span className="text-sm text-muted-foreground font-mono">{s3.toFixed(2)}</span>
+                <label className="text-xs font-medium text-foreground">S₃ customizado</label>
+                <span className="text-xs text-muted-foreground font-mono">{s3.toFixed(2)}</span>
               </div>
               <Slider min={0.83} max={1.10} step={0.01} value={[s3]} onValueChange={(vals) => setS3(vals[0])} className="py-1 cursor-pointer" />
             </div>
           </TabsContent>
 
-          <TabsContent value="cpi" className="space-y-4">
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-foreground">Caso de Permeabilidade</label>
+          <TabsContent value="cpi" className="space-y-4 min-w-0">
+            <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"><SelectValue placeholder="Selecione" /></SelectTrigger>
+                <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>
@@ -150,52 +150,53 @@ export function GlobalWindSettingsModal() {
             </div>
 
             {(permeabilityCase === 'dominant-windward' || permeabilityCase === 'dominant-lateral') && (
-              <div className="space-y-3 mt-4">
+              <div className="space-y-2 mt-3">
                 <div className="flex justify-between items-center">
-                  <label className="text-sm font-medium text-foreground">Razão de áreas</label>
-                  <span className="text-sm text-muted-foreground font-mono">{cpiRatio.toFixed(2)}</span>
+                  <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-xs text-muted-foreground">
+                <p className="text-[10px] leading-tight text-muted-foreground">
                   Razão entre a área da abertura dominante e a área total das demais aberturas em faces com sucção externa.
                 </p>
               </div>
             )}
 
-            <div className="rounded-md border bg-muted/40 p-3 mt-4">
+            <div className="rounded-md border bg-muted/40 p-2 mt-3">
               <div className="flex justify-between items-center">
-                <span className="text-sm font-medium">Cpi calculado:</span>
-                <Badge variant="default" className="font-mono text-base">{cpi.toFixed(2)}</Badge>
+                <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-xs text-muted-foreground mt-2">
+              <p className="text-[10px] leading-tight text-muted-foreground mt-1">
                 Limitado a ±0,9 conforme norma. A pressão final usada é p = q · (Cpe − Cpi).
               </p>
             </div>
           </TabsContent>
 
-          <TabsContent value="local" className="space-y-4">
-            <div className="space-y-3">
+          <TabsContent value="local" className="space-y-3 min-w-0">
+            <div className="space-y-2">
               <Input
                 placeholder="Buscar cidade ou estação..."
                 value={stationQuery}
                 onChange={(e) => setStationQuery(e.target.value)}
+                className="h-8 text-xs"
               />
-              <div className="max-h-[300px] overflow-y-auto rounded-md border divide-y">
+              <div className="max-h-[200px] overflow-y-auto rounded-md border divide-y">
                 {filteredStations.slice(0, 30).map((s) => (
                   <button
                     key={s.id}
                     onClick={() => setV0(s.v0)}
-                    className="w-full text-left px-3 py-2 hover:bg-muted/60 transition-colors"
+                    className="w-full text-left px-2 py-1.5 hover:bg-muted/60 transition-colors"
                   >
-                    <div className="flex justify-between">
-                      <span className="font-medium text-sm">{s.nome}</span>
-                      <Badge variant="outline" className="font-mono text-xs">V₀ = {s.v0} m/s</Badge>
+                    <div className="flex justify-between items-center">
+                      <span className="font-medium text-xs truncate max-w-[150px]">{s.nome}</span>
+                      <Badge variant="outline" className="font-mono text-[10px] py-0 px-1">V₀ = {s.v0} m/s</Badge>
                     </div>
-                    <div className="text-xs text-muted-foreground">{s.latitude} · {s.longitude} · {s.altitude} m</div>
+                    <div className="text-[10px] text-muted-foreground">{s.latitude} · {s.longitude} · {s.altitude} m</div>
                   </button>
                 ))}
               </div>
-              <p className="text-xs text-muted-foreground">
+              <p className="text-[10px] leading-tight text-muted-foreground">
                 Selecionar uma estação ajusta V₀. Você pode sobrescrever manualmente na aba NBR.
               </p>
             </div>