From 2fc5e9cfb37acc7ae1986d99d6b6058bbf89bef4 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Fri, 30 Jan 2026 11:21:47 +0200
Subject: [PATCH] format cells

---
 app/javascript/submission_form/area.vue        | 4 ++--
 app/javascript/template_builder/area.vue       | 3 ++-
 app/views/submissions/_value.html.erb          | 2 +-
 lib/submissions/generate_result_attachments.rb | 6 +++++-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index 30a0255e..affd57a6 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -182,8 +182,8 @@
     </div>
     <div
       v-else-if="field.type === 'cells'"
-      class="w-full flex items-center"
-      :class="{ 'justify-end': field.preferences?.align === 'right', ...fontClasses }"
+      class="w-full flex"
+      :class="{ 'justify-end': field.preferences?.align === 'right', ...alignClasses, ...fontClasses }"
     >
       <div
         v-for="(char, index) in modelValue"
diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index 52e5f7b8..b690173b 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -252,7 +252,8 @@
             </span>
             <div
               v-else-if="field.type === 'cells' && field.default_value"
-              class="w-full flex items-center"
+              class="w-full flex"
+              :class="fontClasses"
             >
               <div
                 v-for="(char, index) in field.default_value"
diff --git a/app/views/submissions/_value.html.erb b/app/views/submissions/_value.html.erb
index d9939fc7..a0b3205d 100644
--- a/app/views/submissions/_value.html.erb
+++ b/app/views/submissions/_value.html.erb
@@ -60,7 +60,7 @@
     <% end %>
   <% elsif field['type'] == 'cells' && area['cell_w'].to_f > 0.0 %>
     <% cell_width = area['cell_w'] / area['w'] * 100 %>
-    <div class="w-full flex items-center <%= 'justify-end' if align == 'right' %>">
+    <div class="w-full flex <%= valign == 'top' ? 'items-start' : (valign == 'bottom' ? 'items-end' : 'items-center') %> <%= 'justify-end' if align == 'right' %>">
       <% (0..(area['w'] / area['cell_w']).ceil).each do |index| %>
         <% if value[index] %>
           <div class="text-center flex-none" style="width: <%= cell_width %>%;"><%= value[index] %></div>
diff --git a/lib/submissions/generate_result_attachments.rb b/lib/submissions/generate_result_attachments.rb
index dd5a231a..72eeb9f1 100644
--- a/lib/submissions/generate_result_attachments.rb
+++ b/lib/submissions/generate_result_attachments.rb
@@ -200,7 +200,9 @@ module Submissions
 
     def fill_submitter_fields(submitter, account, pdfs_index, with_signature_id:, is_flatten:, with_headings: nil,
                               with_submitter_timezone: false, with_signature_id_reason: true, with_file_links: nil)
-      cell_layouter = HexaPDF::Layout::TextLayouter.new(text_valign: :center, text_align: :center)
+      cell_layouters = Hash.new do |hash, valign|
+        hash[valign] = HexaPDF::Layout::TextLayouter.new(text_valign: valign.to_sym, text_align: :center)
+      end
 
       attachments_data_cache = {}
 
@@ -550,6 +552,8 @@ module Submissions
             )
           when ->(type) { type == 'cells' && !area['cell_w'].to_f.zero? }
             cell_width = area['cell_w'] * width
+            cell_valign = field.dig('preferences', 'valign').to_s.presence || 'center'
+            cell_layouter = cell_layouters[cell_valign]
 
             if (mask = field.dig('preferences', 'mask').presence)
               value = TextUtils.mask_value(value, mask)