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/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);