Tweak New Transaction - Items page styles so content fits on narrow screens

Groceries/Components/Table.razor

@@ -176,6 +176,12 @@
     {
         string?[] classes = [
             "table__header",
+            column.Align switch
+            {
+                Align.Center => "table__header--align-center",
+                Align.End => "table__header--align-end",
+                _ => null,
+            },
             column.Sortable ? "table__header--sortable" : null,
             HeaderClass,
         ];

Groceries/Transactions/NewTransactionItemsPage.razor

@@ -33,10 +33,10 @@
         </div>
 
         <div class="card__content card__content--table">
-            <Table Items="Transaction.Items.AsQueryable()" CellClass="table__cell--compact">
+            <Table Items="Transaction.Items.AsQueryable()" HeaderClass="table__header--compact" CellClass="table__cell--compact">
                 <ChildContent>
                     <TemplateTableColumn Title="Name" Fill="true" Context="item">
-                        @itemNames.GetValueOrDefault(item.ItemId)
+                        <div class="line-clamp-4">@itemNames.GetValueOrDefault(item.ItemId)</div>
                     </TemplateTableColumn>
                     <PropertyTableColumn Property="i => i.Price" CompositeFormat='i => i.Unit == null ? "{0:c}" : ("{0:c}/" + i.Unit)' />
                     <PropertyTableColumn Property="i => i.Quantity" CompositeFormat='i => i.Unit == null ? "{0:f0}" : ("{0:f3}" + i.Unit)'>

Groceries/Transactions/NewTransactionPromotionsPage.razor

@@ -23,7 +23,7 @@
         </header>
 
         <div class="card__content card__content--table">
-            <Table Items="Transaction.Promotions.AsQueryable()" CellClass="table__cell--compact">
+            <Table Items="Transaction.Promotions.AsQueryable()" HeaderClass="table__header--compact" CellClass="table__cell--compact">
                 <ChildContent>
                     <PropertyTableColumn Property="p => p.Name" Fill="true" />
                     <TemplateTableColumn Title="Items" Align="Align.End" Context="promotion">

Groceries/Transactions/TransactionItemForm.razor

@@ -58,7 +58,7 @@
             </label>
             <div class="form-field__control input">
                 @{ var step = unit == null ? "1" : "0.001"; }
-                <input class="input__control" id="transactionItemQuantity" name="quantity" value="@quantity" type="number" min="@step" step="@step" required />
+                <input class="input__control" id="transactionItemQuantity" name="quantity" value="@(unit == null ? (int?)quantity : quantity)" type="number" min="@step" step="@step" required />
             </div>
         </div>
 

Groceries/wwwroot/css/main.css

@@ -69,6 +69,14 @@ h1, h2, h3, h4, h5, h6 {
     flex: 5;
 }
 
+.line-clamp-4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    white-space: initial;
+}
+
 .row {
     display: flex;
     align-items: baseline;
@@ -312,6 +320,12 @@ html:has(.modal[open]) {
     border-color: transparent;
 }
 
+@media (max-width: 40rem) {
+    .card__header, .card__footer {
+        padding-inline: 1rem;
+    }
+}
+
 /* Table */
 
 .table {
@@ -374,15 +388,15 @@ html:has(.modal[open]) {
     white-space: nowrap;
 }
 
-.table__cell--align-center {
+.table__header--align-center, .table__cell--align-center {
     text-align: center;
 }
 
-.table__cell--align-end {
+.table__header--align-end, .table__cell--align-end {
     text-align: end;
 }
 
-.table__cell--compact {
+.table__header--compact, .table__cell--compact {
     line-height: 1rem;
     padding-block: 0.75rem;
 }
@@ -408,6 +422,24 @@ html:has(.modal[open]) {
     gap: 1rem;
 }
 
+@media (max-width: 40rem) {
+    .table__header, .table__cell {
+        padding-inline: 1rem;
+    }
+
+    .table__header--compact, .table__cell--compact {
+        font-size: 0.75rem;
+    }
+
+    .table__header--compact:not(:first-child), .table__cell--compact:not(:first-child) {
+        padding-inline-start: 0.5rem;
+    }
+
+    .table__header--compact:not(:last-child), .table__cell--compact:not(:last-child) {
+        padding-inline-end: 0.5rem;
+    }
+}
+
 /*@media (prefers-color-scheme: dark) {
     .table__header {
         background-color: rgb(55, 65, 81);

Groceries/wwwroot/js/controllers/transaction-item-form.js

@@ -51,7 +51,7 @@ export default class TransactionItemFormController extends Controller {
             if (!price.value) {
                 price.value = option.getAttribute("data-price");
             }
-            if (quantity.value || (!unit.value && quantity.value === "1")) {
+            if (!quantity.value || (!unit.value && quantity.value === "1")) {
                 quantity.value = option.getAttribute("data-quantity") || (!unit.value ? "1" : "");
             }
         }