From b0837ca8931e036d192b57d92f4d0e02b8e09a7e Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Tue, 23 Jun 2026 12:16:54 +0000
Subject: [PATCH] feat: compact PDF report tables for mechanical and chemical
 properties

---
 components/ReportDisplay.tsx | 44 ++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/components/ReportDisplay.tsx b/components/ReportDisplay.tsx
index 9ee7be7..82f6676 100644
--- a/components/ReportDisplay.tsx
+++ b/components/ReportDisplay.tsx
@@ -115,11 +115,11 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
         </section>
 
         {/* Seções 2 e 3: Propriedades (Lado a Lado no Desktop) */}
-        <section className="grid grid-cols-1 md:grid-cols-12 gap-3 mb-4 flex-grow">
+        <section className="grid grid-cols-1 md:grid-cols-12 gap-2 mb-3 flex-grow">
           
           {/* Propriedades Mecânicas (Esquerda) */}
           <div className="col-span-1 md:col-span-6 flex flex-col">
-            <h3 className="text-[10px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 flex items-center gap-1.5">
+            <h3 className="text-[10px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500 mb-1.5 flex items-center gap-1.5">
               <span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
               2. Propriedades Mecânicas
             </h3>
@@ -128,10 +128,10 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
                 <table className="w-full table-fixed text-left border-collapse text-xs">
                   <thead>
                     <tr className="bg-slate-50/80 dark:bg-slate-800/40 border-b border-slate-50 dark:border-slate-800/60 text-[9px] text-slate-500 dark:text-slate-400 font-bold uppercase tracking-wider">
-                      <th className="py-1 px-1.5 w-[35%]">Propriedade</th>
-                      <th className="py-1 px-1 w-[25%]">Certificado</th>
-                      <th className="py-1 px-1 w-[15%] text-center">% Rel.</th>
-                      <th className="py-1 px-1 w-[25%] text-right">Status</th>
+                      <th className="py-0.5 px-1 w-[35%]">Propriedade</th>
+                      <th className="py-0.5 px-1 w-[25%]">Certificado</th>
+                      <th className="py-0.5 px-1 w-[15%] text-center">% Rel.</th>
+                      <th className="py-0.5 px-1 w-[25%] text-right">Status</th>
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-slate-50 dark:divide-slate-800/50">
@@ -140,17 +140,17 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
                       const diffColor = isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400';
                       return (
                         <tr key={i}>
-                          <td className="py-1 px-1.5">
-                            <span className="font-semibold text-[10px] block text-slate-700 dark:text-slate-300" title={item.property}>{item.property}</span>
+                          <td className="py-0.5 px-1.5">
+                            <span className="font-semibold text-[10px] block text-slate-700 dark:text-slate-300 leading-tight" title={item.property}>{item.property}</span>
                           </td>
-                          <td className="py-1 px-1 font-mono font-bold text-[10px] text-slate-900 dark:text-slate-100 break-words" title={item.certificate}>{item.certificate}</td>
-                          <td className="py-1 px-1 text-center">
+                          <td className="py-0.5 px-1 font-mono font-bold text-[10px] text-slate-900 dark:text-slate-100 break-words leading-tight" title={item.certificate}>{item.certificate}</td>
+                          <td className="py-0.5 px-1 text-center leading-tight">
                             {item.differencePercentage ? (
                               <span className={`text-[9px] font-bold ${diffColor}`}>{item.differencePercentage}</span>
                             ) : <span className="text-slate-300 dark:text-slate-600">-</span>}
                           </td>
-                          <td className="py-1 px-1 text-right">
-                            <span className={`inline-flex items-center gap-1 text-[9px] font-bold px-1.5 py-0.5 rounded-md ${statusClass(item.status)}`}>
+                          <td className="py-0.5 px-1 text-right">
+                            <span className={`inline-flex items-center gap-1 text-[8px] font-bold px-1 py-0.5 rounded-md ${statusClass(item.status)}`}>
                               {statusIcon(item.status)} {item.status}
                             </span>
                           </td>
@@ -173,7 +173,7 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
 
           {/* Composição Química (Direita) */}
           <div className="col-span-1 md:col-span-6 flex flex-col">
-            <h3 className="text-[10px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 flex items-center gap-1.5">
+            <h3 className="text-[10px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500 mb-1.5 flex items-center gap-1.5">
               <span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
               3. Composição Química (%)
             </h3>
@@ -182,20 +182,20 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
                 <table className="w-full table-fixed text-left border-collapse text-xs">
                   <thead>
                     <tr className="bg-slate-50/80 dark:bg-slate-800/40 border-b border-slate-50 dark:border-slate-800/60 text-[9px] text-slate-500 dark:text-slate-400 font-bold uppercase tracking-wider">
-                      <th className="py-1 px-1.5 w-[15%]">Elem.</th>
-                      <th className="py-1 px-1 w-[40%]">Norma de Referência</th>
-                      <th className="py-1 px-1 w-[25%]">Valor Certificado</th>
-                      <th className="py-1 px-1.5 w-[20%] text-right">Status</th>
+                      <th className="py-0.5 px-1.5 w-[15%]">Elem.</th>
+                      <th className="py-0.5 px-1 w-[40%]">Norma de Referência</th>
+                      <th className="py-0.5 px-1 w-[25%]">Valor Certificado</th>
+                      <th className="py-0.5 px-1.5 w-[20%] text-right">Status</th>
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-slate-50 dark:divide-slate-800/50 font-mono">
                     {compliance.chemical.map((item, i) => (
                       <tr key={i}>
-                        <td className="py-1 px-1.5 font-sans font-semibold text-[10px] text-slate-700 dark:text-slate-300" title={item.element}>{item.element}</td>
-                        <td className="py-1 px-1 text-slate-500 dark:text-slate-400 text-[9px] leading-tight break-words" title={item.norm}>{item.norm}</td>
-                        <td className="py-1 px-1 font-bold text-[10px] text-slate-900 dark:text-slate-100 break-words" title={item.certificate}>{item.certificate}</td>
-                        <td className="py-1 px-1.5 text-right">
-                          <span className={`inline-flex items-center text-[9px] font-bold px-1.5 py-0.5 rounded-md ${statusClass(item.status)}`}>
+                        <td className="py-0.5 px-1.5 font-sans font-semibold text-[10px] text-slate-700 dark:text-slate-300 leading-tight" title={item.element}>{item.element}</td>
+                        <td className="py-0.5 px-1 text-slate-500 dark:text-slate-400 text-[9px] leading-tight break-words" title={item.norm}>{item.norm}</td>
+                        <td className="py-0.5 px-1 font-bold text-[10px] text-slate-900 dark:text-slate-100 break-words leading-tight" title={item.certificate}>{item.certificate}</td>
+                        <td className="py-0.5 px-1.5 text-right">
+                          <span className={`inline-flex items-center text-[8px] font-bold px-1 py-0.5 rounded-md ${statusClass(item.status)}`}>
                             {item.status}
                           </span>
                         </td>