PDF Template Update

frontend/public/templates/job-sheet-template.html

@@ -31,7 +31,7 @@
     }
 
     .template-field-multiline {
-      min-height: 2.4em;
+      min-height: 1.8em;
       white-space: pre-wrap;
     }
 
@@ -46,13 +46,13 @@
   <!-- A4-focused container -->
   <main class="mx-auto max-w-[210mm] bg-white shadow-sm ring-1 ring-gray-200 rounded-xl p-5 print:ring-0 print:shadow-none print:rounded-none">
     <!-- Header -->
-    <header class="mb-4 border-b border-gray-200 pb-3">
+    <header class="mb-3 border-b border-gray-200 pb-2">
       <div class="grid grid-cols-[auto,1fr,auto] items-center gap-3">
         <div class="flex items-center">
           <img
             src="../assets/prosento-logo.png"
             alt="Prosento logo"
-            class="h-10 w-auto object-contain"
+            class="h-14 w-auto object-contain"
             loading="eager"
           />
         </div>
@@ -66,14 +66,13 @@
               style="display:inline-block; min-width: 180px;"
             ></span>
           </div>
-          <div class="text-[10px] text-gray-500 whitespace-nowrap">Document No</div>
         </div>
 
         <div class="flex items-center justify-end">
           <img
             src="../assets/client-logo.png"
             alt="Company logo"
-            class="h-10 w-auto object-contain"
+            class="h-14 w-auto object-contain"
             loading="eager"
           />
         </div>
@@ -81,47 +80,47 @@
     </header>
 
     <!-- Observations and Findings -->
-    <section class="mb-4" aria-labelledby="observations-title">
-      <h2 id="observations-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
+    <section class="mb-2" aria-labelledby="observations-title">
+      <h2 id="observations-title" class="text-[10px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-1">
         Observations and Findings
       </h2>
 
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
         <div class="md:col-span-2">
-          <div class="grid grid-cols-3 gap-3">
+          <div class="grid grid-cols-3 gap-2">
             <div class="space-y-0.5">
-              <div class="text-xs font-medium text-gray-500">Ref</div>
-              <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Ref"></div>
+              <div class="text-[9px] font-medium text-gray-500">Ref</div>
+              <div class="template-field text-[10px] font-semibold text-gray-900" contenteditable="true" data-placeholder="Ref"></div>
             </div>
 
             <div class="space-y-0.5">
-              <div class="text-xs font-medium text-gray-500">Area</div>
-              <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Area"></div>
+              <div class="text-[9px] font-medium text-gray-500">Area</div>
+              <div class="template-field text-[10px] font-semibold text-gray-900" contenteditable="true" data-placeholder="Area"></div>
             </div>
 
             <div class="space-y-0.5">
-              <div class="text-xs font-medium text-gray-500">Location</div>
-              <div class="template-field text-sm font-semibold text-gray-900" contenteditable="true" data-placeholder="Location"></div>
+              <div class="text-[9px] font-medium text-gray-500">Location</div>
+              <div class="template-field text-[10px] font-semibold text-gray-900" contenteditable="true" data-placeholder="Location"></div>
             </div>
           </div>
         </div>
 
         <!-- Centered Category + Priority (must be direct child of the grid) -->
         <div class="md:col-span-2 flex justify-center">
-          <div class="inline-flex items-center gap-6">
+          <div class="inline-flex items-center gap-4">
             <div class="text-center space-y-1">
-              <div class="text-xs font-medium text-gray-500">Category</div>
+              <div class="text-[9px] font-medium text-gray-500">Category</div>
               <span
-                class="template-field inline-flex items-center justify-center rounded-md border px-3 py-1 text-sm font-semibold min-w-[120px] bg-yellow-200 text-yellow-800 border-yellow-200"
+                class="template-field inline-flex items-center justify-center rounded-md border px-3 py-1 text-[10px] font-semibold min-w-[120px] bg-yellow-200 text-yellow-800 border-yellow-200"
                 contenteditable="true"
                 data-placeholder="3 - Poor"
               >3 - Poor</span>
             </div>
 
             <div class="text-center space-y-1">
-              <div class="text-xs font-medium text-gray-500">Priority</div>
+              <div class="text-[9px] font-medium text-gray-500">Priority</div>
               <span
-                class="template-field inline-flex items-center justify-center rounded-md border px-3 py-1 text-sm font-semibold min-w-[120px] bg-green-200 text-green-800 border-green-200"
+                class="template-field inline-flex items-center justify-center rounded-md border px-3 py-1 text-[10px] font-semibold min-w-[120px] bg-green-200 text-green-800 border-green-200"
                 contenteditable="true"
                 data-placeholder="3 - 3 Years"
               >3 - 3 Years</span>
@@ -132,17 +131,17 @@
 
         <!-- Full-width: Condition Description -->
         <div class="md:col-span-2 space-y-1">
-          <div class="text-xs font-medium text-gray-500">Condition Description</div>
-          <div class="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
-            <p class="template-field template-field-multiline text-amber-800 text-sm font-semibold leading-snug" contenteditable="true" data-placeholder="Item description"></p>
+          <div class="text-[9px] font-medium text-gray-500">Condition Description</div>
+          <div class="bg-gray-50 border-l-4 border-gray-300 p-1.5 rounded-sm">
+            <p class="template-field template-field-multiline text-gray-700 text-[9px] font-medium leading-snug" contenteditable="true" data-placeholder="Item description"></p>
           </div>
         </div>
 
         <!-- Full-width: Action Required -->
         <div class="md:col-span-2 space-y-1">
-          <div class="text-xs font-medium text-gray-500">Action Required</div>
-          <div class="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
-            <p class="template-field template-field-multiline text-blue-800 text-sm font-semibold leading-snug" contenteditable="true" data-placeholder="Required action"></p>
+          <div class="text-[9px] font-medium text-gray-500">Action Required</div>
+          <div class="bg-gray-50 border-l-4 border-gray-300 p-1.5 rounded-sm">
+            <p class="template-field template-field-multiline text-gray-700 text-[9px] font-medium leading-snug" contenteditable="true" data-placeholder="Required action"></p>
           </div>
         </div>
       </div>
@@ -155,56 +154,56 @@
       </h2>
 
         <div class="columns-2" style="column-gap:0.75rem;">
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 overflow-hidden break-inside-avoid mb-3">
+        <figure class="border border-gray-200 rounded-lg p-2 pb-3 bg-gray-50 break-inside-avoid mb-3 flex flex-col gap-1 overflow-hidden">
           <div class="h-40 w-full flex items-center justify-center text-xs text-gray-400 border border-dashed border-gray-300 rounded-md">
             Photo slot
           </div>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
+          <figcaption class="text-[10px] text-gray-600 text-center break-all leading-tight">
             Figure 1
           </figcaption>
         </figure>
 
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 overflow-hidden break-inside-avoid mb-3">
+        <figure class="border border-gray-200 rounded-lg p-2 pb-3 bg-gray-50 break-inside-avoid mb-3 flex flex-col gap-1 overflow-hidden">
           <div class="h-40 w-full flex items-center justify-center text-xs text-gray-400 border border-dashed border-gray-300 rounded-md">
             Photo slot
           </div>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
+          <figcaption class="text-[10px] text-gray-600 text-center break-all leading-tight">
             Figure 2
           </figcaption>
         </figure>
 
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 overflow-hidden break-inside-avoid mb-3">
+        <figure class="border border-gray-200 rounded-lg p-2 pb-3 bg-gray-50 break-inside-avoid mb-3 flex flex-col gap-1 overflow-hidden">
           <div class="h-40 w-full flex items-center justify-center text-xs text-gray-400 border border-dashed border-gray-300 rounded-md">
             Photo slot
           </div>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
+          <figcaption class="text-[10px] text-gray-600 text-center break-all leading-tight">
             Figure 3
           </figcaption>
         </figure>
 
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 overflow-hidden break-inside-avoid mb-3">
+        <figure class="border border-gray-200 rounded-lg p-2 pb-3 bg-gray-50 break-inside-avoid mb-3 flex flex-col gap-1 overflow-hidden">
           <div class="h-40 w-full flex items-center justify-center text-xs text-gray-400 border border-dashed border-gray-300 rounded-md">
             Photo slot
           </div>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
+          <figcaption class="text-[10px] text-gray-600 text-center break-all leading-tight">
             Figure 4
           </figcaption>
         </figure>
 
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 overflow-hidden break-inside-avoid mb-3">
+        <figure class="border border-gray-200 rounded-lg p-2 pb-3 bg-gray-50 break-inside-avoid mb-3 flex flex-col gap-1 overflow-hidden">
           <div class="h-40 w-full flex items-center justify-center text-xs text-gray-400 border border-dashed border-gray-300 rounded-md">
             Photo slot
           </div>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
+          <figcaption class="text-[10px] text-gray-600 text-center break-all leading-tight">
             Figure 5
           </figcaption>
         </figure>
 
-        <figure class="border border-gray-200 rounded-lg p-2 bg-gray-50 overflow-hidden break-inside-avoid mb-3">
+        <figure class="border border-gray-200 rounded-lg p-2 pb-3 bg-gray-50 break-inside-avoid mb-3 flex flex-col gap-1 overflow-hidden">
           <div class="h-40 w-full flex items-center justify-center text-xs text-gray-400 border border-dashed border-gray-300 rounded-md">
             Photo slot
           </div>
-          <figcaption class="text-[11px] text-gray-600 mt-1 text-center leading-tight">
+          <figcaption class="text-[10px] text-gray-600 text-center break-all leading-tight">
             Figure 6
           </figcaption>
         </figure>

frontend/src/components/JobSheetTemplate.tsx

@@ -238,18 +238,22 @@ function PhotoSlot({ url, label, className = "", imageClassName = "" }: PhotoSlo
   return (
     <figure
       className={[
-        "rounded-lg border border-gray-200 bg-gray-50 p-2 break-inside-avoid",
+        "rounded-lg border border-gray-200 bg-gray-50 p-2 pb-3 break-inside-avoid flex flex-col gap-1 overflow-hidden",
         className,
       ].join(" ")}
       style={{ breakInside: "avoid", pageBreakInside: "avoid" }}
     >
-      <img
-        src={url}
-        alt={label}
-        className={["w-full h-full object-contain", imageClassName].join(" ")}
-        loading="eager"
-      />
-      <figcaption className="mt-1 text-[10px] text-gray-600 text-center">
+      <div className="w-full flex-1 flex items-center justify-center">
+        <img
+          src={url}
+          alt={label}
+          className={["w-full object-contain max-h-[240px]", imageClassName].join(
+            " ",
+          )}
+          loading="eager"
+        />
+      </div>
+      <figcaption className="text-[10px] text-gray-600 text-center break-all leading-tight">
         {label}
       </figcaption>
     </figure>
@@ -352,7 +356,7 @@ export function JobSheetTemplate({
           <img
             src="/assets/prosento-logo.png"
             alt="Prosento logo"
-            className="h-9 w-auto object-contain"
+            className="h-14 w-auto object-contain"
           />
           <div className="text-center leading-tight">
             <div className="text-base font-semibold text-gray-900">
@@ -362,38 +366,38 @@ export function JobSheetTemplate({
           <img
             src={logoUrl}
             alt="Company logo"
-            className="h-9 w-auto object-contain"
+            className="h-14 w-auto object-contain"
           />
         </div>
       </header>
 
       {variant === "full" ? (
-        <section className="mb-3" aria-labelledby="observations-title">
+        <section className="mb-2" aria-labelledby="observations-title">
           <h2
             id="observations-title"
-            className="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2"
+            className="text-[10px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-1"
           >
             Observations and Findings
           </h2>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
             <div className="md:col-span-2">
-              <div className="grid grid-cols-3 gap-3">
+              <div className="grid grid-cols-3 gap-2">
                 <div className="space-y-0.5">
-                  <div className="text-[10px] font-medium text-gray-500">Ref</div>
-                  <div className="template-field text-[11px] font-semibold text-gray-900">
+                  <div className="text-[9px] font-medium text-gray-500">Ref</div>
+                  <div className="template-field text-[10px] font-semibold text-gray-900">
                     {reference}
                   </div>
                 </div>
                 <div className="space-y-0.5">
-                  <div className="text-[10px] font-medium text-gray-500">Area</div>
-                  <div className="template-field text-[11px] font-semibold text-gray-900">
+                  <div className="text-[9px] font-medium text-gray-500">Area</div>
+                  <div className="template-field text-[10px] font-semibold text-gray-900">
                     {area}
                   </div>
                 </div>
                 <div className="space-y-0.5">
-                  <div className="text-[10px] font-medium text-gray-500">Location</div>
-                  <div className="template-field text-[11px] font-semibold text-gray-900">
+                  <div className="text-[9px] font-medium text-gray-500">Location</div>
+                  <div className="template-field text-[10px] font-semibold text-gray-900">
                     {functionalLocation}
                   </div>
                 </div>
@@ -401,14 +405,14 @@ export function JobSheetTemplate({
             </div>
 
             <div className="md:col-span-2 flex justify-center">
-              <div className="inline-flex items-center gap-6">
+              <div className="inline-flex items-center gap-4">
                 <div className="text-center space-y-1">
-                  <div className="text-[10px] font-medium text-gray-500">
+                  <div className="text-[9px] font-medium text-gray-500">
                     Category
                   </div>
                   <span
                     className={[
-                      "template-field inline-flex items-center justify-center rounded-md border px-4 py-1 text-[11px] font-semibold min-w-[120px]",
+                      "template-field inline-flex items-center justify-center rounded-md border px-4 py-1 text-[10px] font-semibold min-w-[120px]",
                       categoryBadge.className,
                     ].join(" ")}
                   >
@@ -417,12 +421,12 @@ export function JobSheetTemplate({
                 </div>
 
                 <div className="text-center space-y-1">
-                  <div className="text-[10px] font-medium text-gray-500">
+                  <div className="text-[9px] font-medium text-gray-500">
                     Priority
                   </div>
                   <span
                     className={[
-                      "template-field inline-flex items-center justify-center rounded-md border px-4 py-1 text-[11px] font-semibold min-w-[120px]",
+                      "template-field inline-flex items-center justify-center rounded-md border px-4 py-1 text-[10px] font-semibold min-w-[120px]",
                       priorityBadge.className,
                     ].join(" ")}
                   >
@@ -434,22 +438,22 @@ export function JobSheetTemplate({
             </div>
 
             <div className="md:col-span-2 space-y-1">
-              <div className="text-[10px] font-medium text-gray-500">
+              <div className="text-[9px] font-medium text-gray-500">
                 Condition Description
               </div>
-              <div className="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
-                <p className="template-field template-field-multiline text-amber-800 text-[11px] font-semibold leading-snug">
+              <div className="bg-gray-50 border-l-4 border-gray-300 p-1.5 rounded-sm">
+                <p className="template-field template-field-multiline text-gray-700 text-[9px] font-medium leading-snug">
                   {conditionText}
                 </p>
               </div>
             </div>
 
             <div className="md:col-span-2 space-y-1">
-              <div className="text-[10px] font-medium text-gray-500">
+              <div className="text-[9px] font-medium text-gray-500">
                 Action Required
               </div>
-              <div className="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
-                <p className="template-field template-field-multiline text-blue-800 text-[11px] font-semibold leading-snug">
+              <div className="bg-gray-50 border-l-4 border-gray-300 p-1.5 rounded-sm">
+                <p className="template-field template-field-multiline text-gray-700 text-[9px] font-medium leading-snug">
                   {actionText}
                 </p>
               </div>
@@ -459,7 +463,7 @@ export function JobSheetTemplate({
       ) : null}
 
       <section className="mb-3 avoid-break flex-1 min-h-0 flex flex-col">
-        <div className="text-[11px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
+        <div className="text-[10px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
           {variant === "photos" ? "Photo Documentation (continued)" : "Photo Documentation"}
         </div>
         <div className={`${photoGridClass} flex-1 items-stretch`}>
@@ -472,7 +476,6 @@ export function JobSheetTemplate({
                 url={photo?.url}
                 label={figureCaption || photo?.name || `Figure ${index + 1}`}
                 className="h-full"
-                imageClassName="h-full"
               />
             ))
           )}

frontend/src/components/report-editor.js

@@ -861,14 +861,16 @@ class ReportEditor extends HTMLElement {
       "figure_caption",
       fallbackLabel || photo.name || "",
       "Figure caption",
-      "text-[10px] text-gray-600 text-center w-full",
+      "text-[10px] text-gray-600 text-center w-full break-all leading-tight",
+      false,
       false,
-      true,
     );
     return `
-      <figure class="rounded-lg border border-gray-200 bg-gray-50 p-2 break-inside-avoid mb-3">
-        <img src="${safeUrl}" alt="${label}" class="w-full h-auto object-contain" />
-        <figcaption class="mt-1 text-[10px] text-gray-600 text-center">${caption}</figcaption>
+      <figure class="rounded-lg border border-gray-200 bg-gray-50 p-2 pb-3 break-inside-avoid mb-3 flex flex-col gap-1 overflow-hidden">
+        <div class="w-full flex-1 flex items-center justify-center">
+          <img src="${safeUrl}" alt="${label}" class="w-full object-contain max-h-[240px]" />
+        </div>
+        <figcaption class="text-[10px] text-gray-600 text-center break-all leading-tight">${caption}</figcaption>
       </figure>
     `;
   }
@@ -983,48 +985,48 @@ class ReportEditor extends HTMLElement {
     const observationsHtml =
       variant === "full"
         ? `
-        <section class="mb-4" aria-labelledby="observations-title">
-          <h2 id="observations-title" class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-2">
+        <section class="mb-2" aria-labelledby="observations-title">
+          <h2 id="observations-title" class="text-[10px] font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-1">
             Observations and Findings
           </h2>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
             <div class="md:col-span-2">
-              <div class="grid grid-cols-3 gap-3">
+              <div class="grid grid-cols-3 gap-2">
                 <div class="space-y-0.5">
-                  <div class="text-xs font-medium text-gray-500">Ref</div>
-                  ${this._tplField("reference", reference, "Ref", "text-sm font-semibold text-gray-900")}
+                  <div class="text-[9px] font-medium text-gray-500">Ref</div>
+                  ${this._tplField("reference", reference, "Ref", "text-[10px] font-semibold text-gray-900")}
                 </div>
                 <div class="space-y-0.5">
-                  <div class="text-xs font-medium text-gray-500">Area</div>
-                  ${this._tplField("area", area, "Area", "text-sm font-semibold text-gray-900")}
+                  <div class="text-[9px] font-medium text-gray-500">Area</div>
+                  ${this._tplField("area", area, "Area", "text-[10px] font-semibold text-gray-900")}
                 </div>
                 <div class="space-y-0.5">
-                  <div class="text-xs font-medium text-gray-500">Location</div>
-                  ${this._tplField("functional_location", functionalLocation, "Location", "text-sm font-semibold text-gray-900")}
+                  <div class="text-[9px] font-medium text-gray-500">Location</div>
+                  ${this._tplField("functional_location", functionalLocation, "Location", "text-[10px] font-semibold text-gray-900")}
                 </div>
               </div>
             </div>
 
             <div class="md:col-span-2 flex justify-center">
-              <div class="inline-flex items-center gap-6">
+              <div class="inline-flex items-center gap-4">
                 <div class="text-center space-y-1">
-                  <div class="text-xs font-medium text-gray-500">Category</div>
+                  <div class="text-[9px] font-medium text-gray-500">Category</div>
                   ${this._tplSelectField(
                     "category",
                     category,
                     categoryOptions,
-                    `min-w-[140px] rounded-md border px-3 py-1 text-sm font-semibold text-center ${categoryBadge.className}`,
+                    `min-w-[140px] rounded-md border px-3 py-1 text-[10px] font-semibold text-center ${categoryBadge.className}`,
                   )}
                 </div>
 
                 <div class="text-center space-y-1">
-                  <div class="text-xs font-medium text-gray-500">Priority</div>
+                  <div class="text-[9px] font-medium text-gray-500">Priority</div>
                   ${this._tplSelectField(
                     "priority",
                     priority,
                     priorityOptions,
-                    `min-w-[140px] rounded-md border px-3 py-1 text-sm font-semibold text-center ${priorityBadge.className}`,
+                    `min-w-[140px] rounded-md border px-3 py-1 text-[10px] font-semibold text-center ${priorityBadge.className}`,
                   )}
                 </div>
 
@@ -1032,19 +1034,19 @@ class ReportEditor extends HTMLElement {
             </div>
 
             <div class="md:col-span-2 space-y-1">
-              <div class="text-xs font-medium text-gray-500">Condition Description</div>
-                <div class="bg-amber-50 border-l-4 border-amber-300 p-2 rounded-sm">
-                  <div class="text-amber-800 text-sm font-semibold leading-snug">
-                    ${this._tplField("item_description", itemDescription, "Item description", "template-field-multiline text-amber-800 text-sm font-semibold leading-snug", true)}
+              <div class="text-[9px] font-medium text-gray-500">Condition Description</div>
+                <div class="bg-gray-50 border-l-4 border-gray-300 p-1.5 rounded-sm">
+                  <div class="text-gray-700 text-[9px] font-medium leading-snug">
+                    ${this._tplField("item_description", itemDescription, "Item description", "template-field-multiline text-gray-700 text-[9px] font-medium leading-snug", true)}
                   </div>
                 </div>
             </div>
 
             <div class="md:col-span-2 space-y-1">
-              <div class="text-xs font-medium text-gray-500">Action Required</div>
-              <div class="bg-blue-50 border-l-4 border-blue-300 p-2 rounded-sm">
-                <div class="text-blue-800 text-sm font-semibold leading-snug">
-                  ${this._tplField("required_action", requiredAction, "Required action", "template-field-multiline text-blue-800 text-sm font-semibold leading-snug", true)}
+              <div class="text-[9px] font-medium text-gray-500">Action Required</div>
+              <div class="bg-gray-50 border-l-4 border-gray-300 p-1.5 rounded-sm">
+                <div class="text-gray-700 text-[9px] font-medium leading-snug">
+                  ${this._tplField("required_action", requiredAction, "Required action", "template-field-multiline text-gray-700 text-[9px] font-medium leading-snug", true)}
                 </div>
               </div>
             </div>
@@ -1060,7 +1062,7 @@ class ReportEditor extends HTMLElement {
         <header class="mb-3 border-b border-gray-200 pb-2">
           <div class="grid grid-cols-[auto,1fr,auto] items-center gap-3">
             <div class="flex items-center">
-              <img src="/assets/prosento-logo.png" alt="Prosento logo" class="h-10 w-auto object-contain" />
+              <img src="/assets/prosento-logo.png" alt="Prosento logo" class="h-14 w-auto object-contain" />
             </div>
 
             <div class="text-center leading-tight">
@@ -1073,7 +1075,7 @@ class ReportEditor extends HTMLElement {
             </div>
 
             <div class="flex items-center justify-end">
-              <img src="${this._escape(this._resolveLogoUrl(session, companyLogo))}" alt="Company logo" class="h-10 w-auto object-contain" />
+              <img src="${this._escape(this._resolveLogoUrl(session, companyLogo))}" alt="Company logo" class="h-14 w-auto object-contain" />
             </div>
           </div>
         </header>

frontend/src/index.css

@@ -23,7 +23,7 @@ body {
 }
 
 .template-field-multiline {
-  min-height: 2.4em;
+  min-height: 1.8em;
   white-space: pre-wrap;
 }
 

server/app/services/pdf_reportlab.py

@@ -51,6 +51,22 @@ def _wrap_lines(
     lines: List[str] = []
     current: List[str] = []
     for word in words:
+        if pdf.stringWidth(word, font, size) > width:
+            if current:
+                lines.append(" ".join(current))
+                current = []
+                if len(lines) >= max_lines:
+                    break
+            remaining = word
+            while remaining and len(lines) < max_lines:
+                cut = len(remaining)
+                while cut > 1 and pdf.stringWidth(remaining[:cut], font, size) > width:
+                    cut -= 1
+                if cut <= 1:
+                    cut = 1
+                lines.append(remaining[:cut])
+                remaining = remaining[cut:]
+            continue
         test = " ".join(current + [word])
         if pdf.stringWidth(test, font, size) <= width or not current:
             current.append(word)
@@ -130,6 +146,37 @@ def _draw_label_value(
     return y
 
 
+def _draw_label_value_centered(
+    pdf: canvas.Canvas,
+    label: str,
+    value: str,
+    x_center: float,
+    y: float,
+    label_font: str,
+    value_font: str,
+    label_size: int,
+    value_size: int,
+    label_color: colors.Color,
+    value_color: colors.Color,
+    max_width: float,
+    max_lines: int,
+    leading: float,
+) -> int:
+    pdf.setFillColor(label_color)
+    pdf.setFont(label_font, label_size)
+    pdf.drawCentredString(x_center, y, label)
+    y -= label_size + 1
+    pdf.setFillColor(value_color)
+    pdf.setFont(value_font, value_size)
+    lines = _wrap_lines(pdf, value or "-", max_width, max_lines, value_font, value_size)
+    if not lines:
+        lines = ["-"]
+    for line in lines:
+        pdf.drawCentredString(x_center, y, line)
+        y -= leading
+    return len(lines)
+
+
 def _badge_style(value: str, scale: dict) -> tuple[str, colors.Color, colors.Color]:
     raw = (value or "").strip()
     key = raw.upper()
@@ -220,7 +267,7 @@ def render_report_pdf(
 ) -> Path:
     width, height = A4
     margin = 10 * mm
-    header_h = 20 * mm
+    header_h = 26 * mm
     footer_h = 12 * mm
     gap = 4 * mm
     photo_col_gap = 6 * mm
@@ -378,10 +425,10 @@ def render_report_pdf(
         content_height = content_top - content_bottom
 
         # Header
+        logo_w = 40 * mm
+        logo_h = 20 * mm
         logo_x = margin
-        logo_y = header_y - 15 * mm
-        logo_w = 28 * mm
-        logo_h = 15 * mm
+        logo_y = header_y - (header_h + logo_h) / 2
         logo_drawn = False
         if default_logo:
             logo_drawn = _draw_image_fit(pdf, default_logo, logo_x, logo_y, logo_w, logo_h)
@@ -398,30 +445,32 @@ def render_report_pdf(
             pdf.rect(logo_x, logo_y, logo_w, logo_h, stroke=1, fill=0)
         client_logo = _resolve_logo_path(store, session, template.get("company_logo", ""))
         if client_logo:
+            client_logo_w = 40 * mm
+            client_logo_h = 20 * mm
             _draw_image_fit(
                 pdf,
                 client_logo,
-                width - margin - 32 * mm,
-                header_y - 15 * mm,
-                32 * mm,
-                15 * mm,
+                width - margin - client_logo_w,
+                header_y - (header_h + client_logo_h) / 2,
+                client_logo_w,
+                client_logo_h,
             )
         pdf.setFillColor(gray_900)
         pdf.setFont("Helvetica-Bold", 13)
         pdf.drawCentredString(
             width / 2,
-            header_y - 7 * mm,
+            header_y - header_h / 2 + 2 * mm,
             doc_number or "Document No",
         )
         pdf.setStrokeColor(gray_200)
-        pdf.line(margin, header_y - 17 * mm, width - margin, header_y - 17 * mm)
+        pdf.line(margin, header_y - header_h + 3 * mm, width - margin, header_y - header_h + 3 * mm)
 
         y = content_top
 
         if variant == "full":
             # Observations and Findings
             pdf.setFillColor(gray_800)
-            pdf.setFont("Helvetica-Bold", 14)
+            pdf.setFont("Helvetica-Bold", 12)
             pdf.drawString(margin, y, "Observations and Findings")
             pdf.setStrokeColor(gray_200)
             pdf.line(margin, y - 2, width - margin, y - 2)
@@ -433,70 +482,78 @@ def render_report_pdf(
             item_desc = _safe_text(template.get("item_description"))
             required_action = _safe_text(template.get("required_action"))
 
-            left_w = (width - 2 * margin) * 0.6
-            right_w = (width - 2 * margin) * 0.4
-            left_x = margin
-            right_x = margin + left_w + 4 * mm
+            total_w = width - 2 * margin
+            col_w = total_w / 3
+            col_centers = [
+                margin + col_w / 2,
+                margin + col_w * 1.5,
+                margin + col_w * 2.5,
+            ]
 
-            label_size = 11
-            value_size = 12
-            value_gap = 2 * mm
-            row_gap = 4 * mm
-            leading = 14
+            label_size = 9
+            value_size = 10
+            value_gap = 1.5 * mm
+            row_gap = 3 * mm
+            leading = 11
 
             row_y = y
-            _draw_label_value(
-                pdf,
-                "Ref",
-                ref,
-                left_x,
-                row_y,
-                "Helvetica",
-                "Helvetica-Bold",
-                label_size,
-                value_size,
-                gray_500,
-                gray_900,
-            )
-            _draw_label_value(
-                pdf,
-                "Area",
-                area,
-                left_x + left_w / 2,
-                row_y,
-                "Helvetica",
-                "Helvetica-Bold",
-                label_size,
-                value_size,
-                gray_500,
-                gray_900,
+            line_counts = []
+            line_counts.append(
+                _draw_label_value_centered(
+                    pdf,
+                    "Ref",
+                    ref,
+                    col_centers[0],
+                    row_y,
+                    "Helvetica",
+                    "Helvetica-Bold",
+                    label_size,
+                    value_size,
+                    gray_500,
+                    gray_900,
+                    col_w - 4 * mm,
+                    2,
+                    leading,
+                )
             )
-
-            pdf.setFillColor(gray_500)
-            pdf.setFont("Helvetica", label_size)
-            pdf.drawString(right_x, row_y, "Location")
-            pdf.setFillColor(gray_900)
-            loc_lines = _wrap_lines(
-                pdf,
-                location or "-",
-                right_w - 2 * mm,
-                2,
-                "Helvetica-Bold",
-                value_size,
+            line_counts.append(
+                _draw_label_value_centered(
+                    pdf,
+                    "Area",
+                    area,
+                    col_centers[1],
+                    row_y,
+                    "Helvetica",
+                    "Helvetica-Bold",
+                    label_size,
+                    value_size,
+                    gray_500,
+                    gray_900,
+                    col_w - 4 * mm,
+                    2,
+                    leading,
+                )
             )
-            _draw_wrapped(
-                pdf,
-                location or "-",
-                right_x,
-                row_y - label_size - value_gap,
-                right_w - 2 * mm,
-                leading,
-                2,
-                "Helvetica-Bold",
-                value_size,
+            line_counts.append(
+                _draw_label_value_centered(
+                    pdf,
+                    "Location",
+                    location,
+                    col_centers[2],
+                    row_y,
+                    "Helvetica",
+                    "Helvetica-Bold",
+                    label_size,
+                    value_size,
+                    gray_500,
+                    gray_900,
+                    col_w - 4 * mm,
+                    2,
+                    leading,
+                )
             )
 
-            y = row_y - (label_size + value_gap + leading * max(1, len(loc_lines))) - row_gap
+            y = row_y - (label_size + value_gap + leading * max(1, max(line_counts))) - row_gap
 
             category = _safe_text(template.get("category"))
             priority = _safe_text(template.get("priority"))
@@ -520,54 +577,58 @@ def render_report_pdf(
 
             badge_w = 40 * mm
             badge_h = 10 * mm
-            y -= 2 * mm
+            y -= 1 * mm
             pdf.setFillColor(gray_500)
-            pdf.setFont("Helvetica", 11)
-            cat_label_x = margin + 20 * mm + badge_w / 2
-            pr_label_x = margin + 100 * mm + badge_w / 2
+            pdf.setFont("Helvetica", 9)
+            badge_gap = 20 * mm
+            total_badge_w = badge_w * 2 + badge_gap
+            start_x = (width - total_badge_w) / 2
+            cat_x = start_x
+            pr_x = start_x + badge_w + badge_gap
+            cat_label_x = cat_x + badge_w / 2
+            pr_label_x = pr_x + badge_w / 2
             label_y = y
             pdf.drawCentredString(cat_label_x, label_y, "Category")
             pdf.drawCentredString(pr_label_x, label_y, "Priority")
-            y -= 12 * mm
+            y -= 10 * mm
             pdf.setFillColor(cat_bg)
             pdf.setStrokeColor(gray_200)
-            pdf.roundRect(margin + 20 * mm, y - 2, badge_w, badge_h, 2 * mm, stroke=1, fill=1)
+            pdf.roundRect(cat_x, y - 2, badge_w, badge_h, 2 * mm, stroke=1, fill=1)
             pdf.setFillColor(cat_text_color)
-            pdf.setFont("Helvetica-Bold", 11)
-            pdf.drawCentredString(cat_label_x, y - 2 + badge_h / 2 - 4, cat_text)
+            pdf.setFont("Helvetica-Bold", 10)
+            pdf.drawCentredString(cat_label_x, y - 2 + badge_h / 2 - 3, cat_text)
             pdf.setFillColor(pr_bg)
-            pdf.roundRect(margin + 100 * mm, y - 2, badge_w, badge_h, 2 * mm, stroke=1, fill=1)
+            pdf.roundRect(pr_x, y - 2, badge_w, badge_h, 2 * mm, stroke=1, fill=1)
             pdf.setFillColor(pr_text_color)
-            pdf.drawCentredString(pr_label_x, y - 2 + badge_h / 2 - 4, pr_text)
-            y -= 10 * mm
+            pdf.drawCentredString(pr_label_x, y - 2 + badge_h / 2 - 3, pr_text)
+            y -= 8 * mm
 
             condition = item_desc
             action = required_action
 
             pdf.setFillColor(gray_500)
-            pdf.setFont("Helvetica", 11)
+            pdf.setFont("Helvetica", 9)
             pdf.drawCentredString(
                 margin + (width - 2 * margin) / 2, y, "Condition Description"
             )
-            y -= 4 * mm
-            pdf.setFillColor(amber_50)
-            pdf.setStrokeColor(amber_300)
+            y -= 3 * mm
+            pdf.setFillColor(gray_50)
+            pdf.setStrokeColor(gray_200)
             cond_lines = _wrap_lines(
                 pdf,
                 condition or "-",
                 width - 2 * margin - 4 * mm,
                 4,
-                "Helvetica-Bold",
-                11,
+                "Helvetica",
+                9,
             )
-            cond_h = max(18 * mm, (len(cond_lines) or 1) * leading + 6 * mm)
+            cond_h = max(10 * mm, (len(cond_lines) or 1) * leading + 4 * mm)
             cond_bottom = y - cond_h
             pdf.rect(margin, cond_bottom, width - 2 * margin, cond_h, stroke=1, fill=1)
-            pdf.setLineWidth(3)
+            pdf.setLineWidth(2)
             pdf.line(margin, cond_bottom, margin, y)
             pdf.setLineWidth(1)
-            pdf.setFillColor(amber_800)
-            pdf.setFont("Helvetica-Bold", 11)
+            pdf.setFillColor(gray_700)
             text_center_x = margin + (width - 2 * margin) / 2
             _draw_centered_block(
                 pdf,
@@ -577,34 +638,33 @@ def render_report_pdf(
                 cond_h,
                 leading,
                 "Helvetica-Bold",
-                11,
+                10,
             )
-            y = cond_bottom - 6 * mm
+            y = cond_bottom - 4 * mm
 
             pdf.setFillColor(gray_500)
-            pdf.setFont("Helvetica", 11)
+            pdf.setFont("Helvetica", 9)
             pdf.drawCentredString(
                 margin + (width - 2 * margin) / 2, y, "Required Action"
             )
-            y -= 4 * mm
-            pdf.setFillColor(blue_50)
-            pdf.setStrokeColor(blue_300)
+            y -= 3 * mm
+            pdf.setFillColor(gray_50)
+            pdf.setStrokeColor(gray_200)
             action_lines = _wrap_lines(
                 pdf,
                 action or "-",
                 width - 2 * margin - 4 * mm,
                 4,
-                "Helvetica-Bold",
-                11,
+                "Helvetica",
+                9,
             )
-            action_h = max(18 * mm, (len(action_lines) or 1) * leading + 6 * mm)
+            action_h = max(10 * mm, (len(action_lines) or 1) * leading + 4 * mm)
             action_bottom = y - action_h
             pdf.rect(margin, action_bottom, width - 2 * margin, action_h, stroke=1, fill=1)
-            pdf.setLineWidth(3)
+            pdf.setLineWidth(2)
             pdf.line(margin, action_bottom, margin, y)
             pdf.setLineWidth(1)
-            pdf.setFillColor(blue_800)
-            pdf.setFont("Helvetica-Bold", 11)
+            pdf.setFillColor(gray_700)
             text_center_x = margin + (width - 2 * margin) / 2
             _draw_centered_block(
                 pdf,
@@ -614,12 +674,12 @@ def render_report_pdf(
                 action_h,
                 leading,
                 "Helvetica-Bold",
-                11,
+                10,
             )
-            y = action_bottom - 6 * mm
+            y = action_bottom - 4 * mm
         else:
             pdf.setFillColor(gray_800)
-            pdf.setFont("Helvetica-Bold", 11)
+            pdf.setFont("Helvetica-Bold", 12)
             pdf.drawString(margin, y, "Photo Documentation (continued)")
             pdf.setStrokeColor(gray_200)
             pdf.line(margin, y - 2, width - margin, y - 2)
@@ -628,7 +688,7 @@ def render_report_pdf(
         if variant == "full":
             y -= 2 * mm
             pdf.setFillColor(gray_800)
-            pdf.setFont("Helvetica-Bold", 14)
+            pdf.setFont("Helvetica-Bold", 12)
             pdf.drawString(margin, y, "Photo Documentation")
             pdf.setStrokeColor(gray_200)
             pdf.line(margin, y - 2, width - margin, y - 2)
@@ -653,14 +713,43 @@ def render_report_pdf(
                 pdf.setStrokeColor(gray_200)
                 pdf.setFillColor(gray_50)
                 pdf.roundRect(x, y, cell_w, cell_h, 3 * mm, stroke=1, fill=1)
+
+                caption_text = f"Fig {idx + 1}: {label}" if label else ""
+                caption_font = "Helvetica"
+                caption_size = 9
+                caption_leading = 10
+                caption_lines = _wrap_lines(
+                    pdf,
+                    caption_text,
+                    cell_w - 6 * mm,
+                    2,
+                    caption_font,
+                    caption_size,
+                )
+                caption_h = max(6 * mm, max(1, len(caption_lines)) * caption_leading)
+                image_y = y + caption_h + 2 * mm
+                image_h = cell_h - caption_h - 6 * mm
+                if image_h < 10 * mm:
+                    image_h = 10 * mm
                 _draw_image_fit(
-                    pdf, photo_path, x + 2 * mm, y + 8 * mm, cell_w - 4 * mm, cell_h - 14 * mm
+                    pdf,
+                    photo_path,
+                    x + 2 * mm,
+                    image_y,
+                    cell_w - 4 * mm,
+                    image_h,
                 )
-                pdf.setFillColor(gray_500)
-                pdf.setFont("Helvetica", 11)
-                if label:
-                    pdf.drawCentredString(
-                        x + cell_w / 2, y + 3 * mm, f"Fig {idx + 1}: {label}"
+                if caption_lines:
+                    pdf.setFillColor(gray_500)
+                    _draw_centered_block(
+                        pdf,
+                        caption_lines,
+                        x + cell_w / 2,
+                        y + 2 * mm,
+                        caption_h,
+                        caption_leading,
+                        caption_font,
+                        caption_size,
                     )
         else:
             pdf.setFont("Helvetica", 11)
@@ -675,7 +764,7 @@ def render_report_pdf(
         pdf.drawCentredString(
             width / 2,
             footer_y + 4 * mm,
-            "Prosento - (c) 2026 All Rights Reserved - Automatically generated job sheet",
+            "Prosento - (c) 2026 All Rights Reserved",
         )
         page_line = f"Page {output_index + 1} of {total_pages}"
         if section_label: