Bladeren bron

Give invoice line items the full width, and split the columns evenly

The line items were rows of the two-column table, each with an empty
second cell, so their text wrapped inside the left column.  A CSS table
has no colspan, so the table now ends after the payment rows, and the
line items and the total follow it in a block of their own.  That block
uses the same padding and line height.

Both cells of a row asked for width: 100%, and the table gave nearly
all of it to the left column.  That squeezed Due, Payor and Payment
Details to a few words per line.  The invoice table is now full width
with a fixed layout, so the two columns are equal.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
George Baugh 1 week geleden
bovenliggende
commit
0844ade13d
2 gewijzigde bestanden met toevoegingen van 12 en 11 verwijderingen
  1. 7 1
      www/styles/structure.css
  2. 5 10
      www/templates/html/components/forms/invoice.tx

+ 7 - 1
www/styles/structure.css

@@ -162,7 +162,13 @@ iframe.responsive {
 	}
 }
 
-.invoice .table-cell {
+/* Fixed, so the two columns split the width evenly instead of by content. */
+.invoice {
+    width: 100%;
+    table-layout: fixed;
+}
+
+.invoice .table-cell, .invoice-items > div {
     padding: .5rem .25rem;
     line-height: 1.5;
     vertical-align: top;

+ 5 - 10
www/templates/html/components/forms/invoice.tx

@@ -46,20 +46,15 @@
                         <: $post.payee_entity.payment_details :>
                     </div>
                 </div>
+            </div>
+            <div class="invoice-items">
                 : for $post.data -> $poast {
-                    <div class="table-row">
-                    <div class="table-cell">
+                    <div>
                     <: render_it($poast) | mark_raw  :>
                     </div>
-                    <div class="table-cell">
-                    </div>
-                    </div>
                 : }
-                <div class="table-row">
-                    <div class="table-cell overline">
-                        Total: <: $post.total :>
-                    </div>
-                    <div class="table-cell overline"></div>
+                <div class="overline">
+                    Total: <: $post.total :>
                 </div>
             </div>
         </div>