From eb34ef0156d0583b1e9fc6ed1e231bf4cf5bc026 Mon Sep 17 00:00:00 2001
From: Shlok Sheth <92412925+shethshlok@users.noreply.github.com>
Date: Fri, 1 Nov 2024 15:12:25 -0700
Subject: [PATCH] fix: Added Nutrients Suffix to the PrintView and some
 formatting to that (#4493)

---
 .../Domain/Recipe/RecipePrintView.vue         | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipePrintView.vue b/frontend/components/Domain/Recipe/RecipePrintView.vue
index c3fcb47a236..f7033a353ab 100644
--- a/frontend/components/Domain/Recipe/RecipePrintView.vue
+++ b/frontend/components/Domain/Recipe/RecipePrintView.vue
@@ -98,7 +98,7 @@
               <tr v-for="(value, key) in recipe.nutrition" :key="key">
                 <template v-if="value">
                   <td>{{ labels[key].label }}</td>
-                  <td>{{ value || '-' }}</td>
+                  <td>{{ value ? (labels[key].suffix ? `${value} ${labels[key].suffix}` : value) : '-' }}</td>
                 </template>
               </tr>
             </tbody>
@@ -322,10 +322,32 @@ li {
 }
 
 .nutrition-table {
-  width: 25%;
+  max-width: 80%;
   border-collapse: collapse;
 }
 
+.nutrition-table th,
+.nutrition-table td {
+  padding: 6px 10px;
+  text-align: left;
+  vertical-align: top;
+  font-size: 14px;
+}
+
+.nutrition-table th {
+  font-weight: bold;
+  padding-bottom: 10px;
+}
+
+.nutrition-table td:first-child {
+  width: 70%;
+  font-weight: bold;
+}
+
+.nutrition-table td:last-child {
+  width: 30%;
+  text-align: right;
+}
 .nutrition-table td {
   padding: 2px;
   text-align: left;