From 79850c46b58864a235cdd6a2d7be565f6dbce79a Mon Sep 17 00:00:00 2001
From: James Chapman <jchapman3000@gmail.com>
Date: Mon, 14 Oct 2024 18:26:07 +0100
Subject: [PATCH] Tweak New Transaction - Items page styles so content fits on
 narrow screens

---
 Groceries/Components/Table.razor              |  6 +++
 .../NewTransactionItemsPage.razor             |  4 +-
 .../NewTransactionPromotionsPage.razor        |  2 +-
 Groceries/wwwroot/css/main.css                | 38 +++++++++++++++++--
 4 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/Groceries/Components/Table.razor b/Groceries/Components/Table.razor
index f24db59..6bc0830 100644
--- a/Groceries/Components/Table.razor
+++ b/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,
         ];
diff --git a/Groceries/Transactions/NewTransactionItemsPage.razor b/Groceries/Transactions/NewTransactionItemsPage.razor
index 4a2bc68..ec6eb26 100644
--- a/Groceries/Transactions/NewTransactionItemsPage.razor
+++ b/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)'>
diff --git a/Groceries/Transactions/NewTransactionPromotionsPage.razor b/Groceries/Transactions/NewTransactionPromotionsPage.razor
index 681699b..978db7b 100644
--- a/Groceries/Transactions/NewTransactionPromotionsPage.razor
+++ b/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">
diff --git a/Groceries/wwwroot/css/main.css b/Groceries/wwwroot/css/main.css
index cafd0e6..0d5fb9a 100644
--- a/Groceries/wwwroot/css/main.css
+++ b/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);