fix narrow signatures

app/javascript/submission_form/area.vue

@@ -55,10 +55,12 @@
     >
     <div
       v-else-if="field.type === 'signature' && signature"
-      class="flex flex-col justify-between h-full overflow-hidden"
+      class="flex justify-between h-full gap-1 overflow-hidden"
+      :class="isNarrow ? 'flex-row' : 'flex-col'"
     >
       <div
-        class="flex-grow flex overflow-hidden"
+        class="flex overflow-hidden"
+        :class="isNarrow ? 'w-1/2' : 'flex-grow'"
         style="min-height: 50%"
       >
         <img
@@ -68,7 +70,8 @@
       </div>
       <div
         v-if="withSignatureId"
-        class="w-full mt-1 text-[1vw] lg:text-[0.55rem] lg:leading-[0.65rem]"
+        class="text-[1vw] lg:text-[0.55rem] lg:leading-[0.65rem]"
+        :class="isNarrow ? 'w-1/2' : 'w-full'"
       >
         <div class="truncate uppercase">
           ID: {{ signature.uuid }}
@@ -444,6 +447,9 @@ export default {
       }
 
       return style
+    },
+    isNarrow () {
+      return this.area.h > 0 && (this.area.w / this.area.h) > 6
     }
   },
   watch: {

app/views/submissions/_value.html.erb

@@ -5,12 +5,13 @@
 <% font_type = field.dig('preferences', 'font_type') %>
 <field-value dir="auto" class="flex absolute text-[1.6vw] lg:text-base <%= 'font-mono' if font == 'Courier' %> <%= 'font-serif' if font == 'Times' %> <%= 'font-bold' if font_type == 'bold' || font_type == 'bold_italic' %> <%= 'italic' if font_type == 'italic' || font_type == 'bold_italic' %> <%= align == 'right' ? 'text-right' : (align == 'center' ? 'text-center' : '') %>" style="<%= "color: #{color}; " if color.present? %>width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%; <%= "font-size: clamp(4pt, 1.6vw, #{field['preferences']['font_size'].to_i * 1.23}pt); line-height: `clamp(6pt, 2.0vw, #{(field['preferences']['font_size'].to_i * 1.23) + 3}pt)`" if field.dig('preferences', 'font_size') %>">
   <% if field['type'] == 'signature' %>
-    <div class="flex flex-col justify-between h-full overflow-hidden">
+    <% is_narrow = area['h']&.positive? && (area['w'].to_f / area['h']) > 6 %>
-      <div class="flex-grow flex overflow-hidden" style="min-height: 50%">
+    <div class="flex justify-between w-full h-full gap-1 <%= is_narrow ? 'flex-row' : 'flex-col' %>">
+      <div class="flex overflow-hidden <%= is_narrow ? 'w-1/2' : 'flex-grow' %>" style="min-height: 50%">
         <img class="object-contain mx-auto" src="<%= attachments_index[value].url %>">
       </div>
       <% if local_assigns[:with_signature_id] && attachment = attachments_index[value] %>
-        <div class="w-full mt-1 text-[1vw] lg:text-[0.55rem] lg:leading-[0.65rem]">
+        <div class="text-[1vw] lg:text-[0.55rem] lg:leading-[0.65rem] <%= is_narrow ? 'w-1/2' : 'w-full' %>">
           <div class="truncate uppercase">
             ID: <%= attachment.uuid %>
           </div>

lib/submissions/generate_result_attachments.rb

@@ -254,6 +254,37 @@ module Submissions
 
             image = Vips::Image.new_from_buffer(attachments_data_cache[attachment.uuid], '').autorot
 
+            reason_value = submitter.values[field.dig('preferences', 'reason_field_uuid')].presence
+
+            reason_string =
+              I18n.with_locale(submitter.account.locale) do
+                "#{reason_value ? "#{I18n.t('reason')}: " : ''}#{reason_value || I18n.t('digitally_signed_by')} " \
+                  "#{submitter.name}#{submitter.email.present? ? " <#{submitter.email}>" : ''}\n" \
+                  "#{I18n.l(attachment.created_at.in_time_zone(submitter.account.timezone), format: :long)} " \
+                  "#{TimeUtils.timezone_abbr(submitter.account.timezone, attachment.created_at)}"
+              end
+
+            reason_text = HexaPDF::Layout::TextFragment.create(reason_string,
+                                                               font:,
+                                                               font_size: (font_size / 1.8).to_i)
+
+            if area['h']&.positive? && (area['w'].to_f / area['h']) > 6
+              area_x = area['x'] * width
+              area_y = area['y'] * height
+              area_w = area['w'] * width
+              area_h = area['h'] * height
+
+              half_width = area_w / 2.0
+              scale = [half_width / image.width, area_h / image.height].min
+              image_width = image.width * scale
+              image_height = image.height * scale
+              image_x = area_x + ((half_width - image_width) / 2.0)
+              image_y = height - area_y - image_height
+
+              io = StringIO.new(image.resize([scale * 4, 1].select(&:positive?).min).write_to_buffer('.png'))
+
+              canvas.image(io, at: [image_x, image_y], width: image_width, height: image_height)
+
               id_string = "ID: #{attachment.uuid}".upcase
 
               while true
@@ -261,7 +292,7 @@ module Submissions
                                                             font:,
                                                             font_size: (font_size / 1.8).to_i)
 
-              result = layouter.fit([text], area['w'] * width, (font_size / 1.8) / 0.65)
+                result = layouter.fit([text], half_width, (font_size / 1.8) / 0.65)
 
                 break if result.status == :success
 
@@ -270,22 +301,34 @@ module Submissions
                 break if id_string.length < 8
               end
 
-            reason_value = submitter.values[field.dig('preferences', 'reason_field_uuid')].presence
+              text_x = area_x + half_width
+              text_y = height - area_y
 
-            reason_string =
+              reason_result = layouter.fit([reason_text], half_width, height)
-              I18n.with_locale(submitter.account.locale) do
-                "#{reason_value ? "#{I18n.t('reason')}: " : ''}#{reason_value || I18n.t('digitally_signed_by')} " \
-                  "#{submitter.name}#{submitter.email.present? ? " <#{submitter.email}>" : ''}\n" \
-                  "#{I18n.l(attachment.created_at.in_time_zone(submitter.account.timezone), format: :long)} " \
-                  "#{TimeUtils.timezone_abbr(submitter.account.timezone, attachment.created_at)}"
-              end
 
-            reason_text = HexaPDF::Layout::TextFragment.create(reason_string,
+              layouter.fit([text], half_width, (font_size / 1.8) / 0.65)
+                      .draw(canvas, text_x + TEXT_LEFT_MARGIN, text_y)
+
+              layouter.fit([reason_text], half_width, reason_result.lines.sum(&:height))
+                      .draw(canvas, text_x + TEXT_LEFT_MARGIN, text_y - TEXT_TOP_MARGIN - result.lines.sum(&:height))
+            else
+              id_string = "ID: #{attachment.uuid}".upcase
+
+              loop do
+                text = HexaPDF::Layout::TextFragment.create(id_string,
                                                             font:,
                                                             font_size: (font_size / 1.8).to_i)
 
-            reason_result = layouter.fit([reason_text], area['w'] * width, height)
+                result = layouter.fit([text], area['w'] * width, (font_size / 1.8) / 0.65)
+
+                break if result.status == :success
+
+                id_string = "#{id_string.delete_suffix('...')[0..-2]}..."
 
+                break if id_string.length < 8
+              end
+
+              reason_result = layouter.fit([reason_text], area['w'] * width, height)
               text_height = result.lines.sum(&:height) + reason_result.lines.sum(&:height)
 
               image_height = (area['h'] * height) - text_height
@@ -313,6 +356,7 @@ module Submissions
                 width: image.width * scale,
                 height: image.height * scale
               )
+            end
           when 'image', 'signature', 'initials', 'stamp'
             attachment = submitter.attachments.find { |a| a.uuid == value }