From b795bbfc714ee97c8be487a7cdb5188841257d1a Mon Sep 17 00:00:00 2001
From: Nils-Johan Gynther <nils-johan.gynther@neoleaf.se>
Date: Sun, 12 Apr 2026 11:08:15 +0200
Subject: [PATCH] feat: Update ingredient units and improve layout
 responsiveness across various components

---
 backend/src/quick-import/parsers/base.parser.ts  |  2 +-
 backend/src/recipes/recipes.service.ts           |  2 +-
 frontend/app/admin/products/MergePreviewForm.tsx |  2 +-
 frontend/app/inventory/InventoryEditForm.tsx     |  4 ++++
 frontend/app/inventory/InventoryForm.tsx         |  4 ++++
 frontend/app/inventory/page.tsx                  |  2 +-
 frontend/app/recipes/[id]/edit/page.tsx          |  4 ++++
 frontend/app/recipes/create/CreateRecipePage.tsx |  4 ++++
 frontend/app/recipes/create/page.tsx             |  2 +-
 frontend/app/recipes/import/ImportFilePage.tsx   |  2 +-
 frontend/app/recipes/import/ImportRecipePage.tsx |  4 ++++
 frontend/app/recipes/write/WriteRecipePage.tsx   | 16 +++++++++++++---
 12 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/backend/src/quick-import/parsers/base.parser.ts b/backend/src/quick-import/parsers/base.parser.ts
index e8b65e35..b6984952 100644
--- a/backend/src/quick-import/parsers/base.parser.ts
+++ b/backend/src/quick-import/parsers/base.parser.ts
@@ -48,7 +48,7 @@ export abstract class RecipeParser {
     const knownUnits = [
       'g', 'kg', 'hg', 'mg', 'ml', 'dl', 'l', 'tl',
       'st', 'tsk', 'msk', 'krm', 'matsked', 'tesked',
-      'pris', 'portion', 'burk', 'förp', 'paket',
+      'pris', 'portion', 'port', 'burk', 'förp', 'paket', 'efter smak', 'klyfta',
     ];
 
     // Extrahera parentetisk info
diff --git a/backend/src/recipes/recipes.service.ts b/backend/src/recipes/recipes.service.ts
index 0998d727..9ab08e1c 100644
--- a/backend/src/recipes/recipes.service.ts
+++ b/backend/src/recipes/recipes.service.ts
@@ -582,7 +582,7 @@ function parseIngredientLine(text: string): ParsedIngredient {
   const knownUnits = [
     'g', 'kg', 'hg', 'mg', 'ml', 'dl', 'l', 'tl',
     'st', 'tsk', 'msk', 'krm', 'matsled', 'tesled',
-    'pris', 'portion', 'burk', 'förp', 'paket',
+    'pris', 'portion', 'port', 'burk', 'förp', 'paket', 'efter smak', 'klyfta',
   ];
 
   // Extrahera eventuell parentes-not i slutet
diff --git a/frontend/app/admin/products/MergePreviewForm.tsx b/frontend/app/admin/products/MergePreviewForm.tsx
index 572038b1..0a4f0f54 100644
--- a/frontend/app/admin/products/MergePreviewForm.tsx
+++ b/frontend/app/admin/products/MergePreviewForm.tsx
@@ -229,7 +229,7 @@ export default function MergePreviewForm({ products }: Props) {
                 style={{
                   display: 'grid',
                   gap: '1rem',
-                  gridTemplateColumns: '1fr 1fr',
+                  gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
                 }}
               >
                 <article style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '1rem' }}>
diff --git a/frontend/app/inventory/InventoryEditForm.tsx b/frontend/app/inventory/InventoryEditForm.tsx
index ad6ac650..8e85a16c 100644
--- a/frontend/app/inventory/InventoryEditForm.tsx
+++ b/frontend/app/inventory/InventoryEditForm.tsx
@@ -46,6 +46,10 @@ const UNIT_OPTIONS = [
   { value: 'st', label: 'st (styck)' },
   { value: 'tsk', label: 'tsk (tesked)' },
   { value: 'msk', label: 'msk (matsked)' },
+  { value: 'port', label: 'port (portioner)' },
+  { value: 'efter smak', label: 'Efter smak' },
+  { value: 'förp', label: 'förp (förpackning)' },
+  { value: 'klyfta', label: 'klyfta' },
 ];
 
 const LOCATION_OPTIONS = [
diff --git a/frontend/app/inventory/InventoryForm.tsx b/frontend/app/inventory/InventoryForm.tsx
index d7cf1748..59df7921 100644
--- a/frontend/app/inventory/InventoryForm.tsx
+++ b/frontend/app/inventory/InventoryForm.tsx
@@ -24,6 +24,10 @@ export default function InventoryForm({ products }: Props) {
     { value: 'st', label: 'st (styck)' },
     { value: 'tsk', label: 'tsk (tesked)' },
     { value: 'msk', label: 'msk (matsked)' },
+    { value: 'port', label: 'port (portioner)' },
+    { value: 'efter smak', label: 'Efter smak' },
+    { value: 'förp', label: 'förp (förpackning)' },
+    { value: 'klyfta', label: 'klyfta' },
   ];
 
   const LOCATION_OPTIONS = [
diff --git a/frontend/app/inventory/page.tsx b/frontend/app/inventory/page.tsx
index ba1463cc..2268b0d9 100644
--- a/frontend/app/inventory/page.tsx
+++ b/frontend/app/inventory/page.tsx
@@ -117,7 +117,7 @@ export default async function InventoryPage({ searchParams }: InventoryPageProps
           style={{
             display: 'grid',
             gap: '1rem',
-            gridTemplateColumns: '1fr 1fr',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
             alignItems: 'start',
           }}
         >
diff --git a/frontend/app/recipes/[id]/edit/page.tsx b/frontend/app/recipes/[id]/edit/page.tsx
index b84a15fd..0833d8fd 100644
--- a/frontend/app/recipes/[id]/edit/page.tsx
+++ b/frontend/app/recipes/[id]/edit/page.tsx
@@ -162,6 +162,10 @@ export default function EditRecipePage() {
     { value: 'st', label: 'st (styck)' },
     { value: 'tsk', label: 'tsk (tesked)' },
     { value: 'msk', label: 'msk (matsked)' },
+    { value: 'port', label: 'port (portioner)' },
+    { value: 'efter smak', label: 'Efter smak' },
+    { value: 'förp', label: 'förp (förpackning)' },
+    { value: 'klyfta', label: 'klyfta' },
   ];
 
   const LOCATION_OPTIONS = [
diff --git a/frontend/app/recipes/create/CreateRecipePage.tsx b/frontend/app/recipes/create/CreateRecipePage.tsx
index 0c473a0e..ce008e84 100644
--- a/frontend/app/recipes/create/CreateRecipePage.tsx
+++ b/frontend/app/recipes/create/CreateRecipePage.tsx
@@ -127,6 +127,10 @@ export default function CreateRecipePage() {
     { value: 'tsk', label: 'tsk (tesked)' },
     { value: 'msk', label: 'msk (matsked)' },
     { value: 'krm', label: 'krm (kryddmått)' },
+    { value: 'port', label: 'port (portioner)' },
+    { value: 'efter smak', label: 'Efter smak' },
+    { value: 'förp', label: 'förp (förpackning)' },
+    { value: 'klyfta', label: 'klyfta' },
   ];
 
   const LOCATION_OPTIONS = [
diff --git a/frontend/app/recipes/create/page.tsx b/frontend/app/recipes/create/page.tsx
index e7f4c436..bd8a7667 100644
--- a/frontend/app/recipes/create/page.tsx
+++ b/frontend/app/recipes/create/page.tsx
@@ -156,7 +156,7 @@ export default function CreateRecipePage() {
       <div
         style={{
           display: 'grid',
-          gridTemplateColumns: '1fr 1fr',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
           gap: '1.5rem',
         }}
       >
diff --git a/frontend/app/recipes/import/ImportFilePage.tsx b/frontend/app/recipes/import/ImportFilePage.tsx
index 05c2687f..df5f91be 100644
--- a/frontend/app/recipes/import/ImportFilePage.tsx
+++ b/frontend/app/recipes/import/ImportFilePage.tsx
@@ -67,7 +67,7 @@ export default function ImportFilePage() {
       <div
         style={{
           display: 'grid',
-          gridTemplateColumns: '1fr 1fr',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
           gap: '1.5rem',
           marginBottom: '2rem',
         }}
diff --git a/frontend/app/recipes/import/ImportRecipePage.tsx b/frontend/app/recipes/import/ImportRecipePage.tsx
index 71a200d1..df62e59a 100644
--- a/frontend/app/recipes/import/ImportRecipePage.tsx
+++ b/frontend/app/recipes/import/ImportRecipePage.tsx
@@ -45,6 +45,10 @@ const UNIT_OPTIONS = [
   { value: 'tsk', label: 'tsk (tesked)' },
   { value: 'msk', label: 'msk (matsked)' },
   { value: 'krm', label: 'krm (kryddmått)' },
+  { value: 'port', label: 'port (portioner)' },
+  { value: 'efter smak', label: 'Efter smak' },
+  { value: 'förp', label: 'förp (förpackning)' },
+  { value: 'klyfta', label: 'klyfta' },
 ];
 
 type Step = 'input' | 'review' | 'saving';
diff --git a/frontend/app/recipes/write/WriteRecipePage.tsx b/frontend/app/recipes/write/WriteRecipePage.tsx
index 16e6a9e3..c0239a7e 100644
--- a/frontend/app/recipes/write/WriteRecipePage.tsx
+++ b/frontend/app/recipes/write/WriteRecipePage.tsx
@@ -44,6 +44,10 @@ const UNIT_OPTIONS = [
   { value: 'tsk', label: 'tsk (tesked)' },
   { value: 'msk', label: 'msk (matsked)' },
   { value: 'krm', label: 'krm (kryddmått)' },
+  { value: 'port', label: 'port (portioner)' },
+  { value: 'efter smak', label: 'Efter smak' },
+  { value: 'förp', label: 'förp (förpackning)' },
+  { value: 'klyfta', label: 'klyfta' },
 ];
 
 type Step = 'input' | 'review' | 'saving';
@@ -311,7 +315,7 @@ Stek löken i lite smör. Tillsätt köttfärsen...`}</pre>
 
       {/* STEG 2: Granskning */}
       {step === 'review' && parsed && (
-        <section style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '1.5rem' }}>
+        <section style={{ display: 'grid', gridTemplateColumns: showDebugPanel ? '7fr 3fr' : '1fr', gap: '1.5rem' }}>
           {/* Vänster: Receptdetaljer + Ingredienser */}
           <div style={{ display: 'grid', gap: '1.5rem' }}>
             {/* Receptdetaljer */}
@@ -529,10 +533,13 @@ Stek löken i lite smör. Tillsätt köttfärsen...`}</pre>
                     padding: '0.5rem',
                     fontSize: '0.7rem',
                     overflow: 'auto',
-                    maxHeight: '200px',
+                    maxHeight: '250px',
                     margin: '0.5rem 0 0',
                     fontFamily: 'monospace',
                     color: '#333',
+                    wordBreak: 'break-word',
+                    whiteSpace: 'pre-wrap',
+                    overflowWrap: 'break-word',
                   }}
                 >
                   {markdown}
@@ -558,10 +565,13 @@ Stek löken i lite smör. Tillsätt köttfärsen...`}</pre>
                     padding: '0.5rem',
                     fontSize: '0.65rem',
                     overflow: 'auto',
-                    maxHeight: '200px',
+                    maxHeight: '250px',
                     margin: '0.5rem 0 0',
                     fontFamily: 'monospace',
                     color: '#333',
+                    wordBreak: 'break-word',
+                    whiteSpace: 'pre-wrap',
+                    overflowWrap: 'break-word',
                   }}
                 >
                   {JSON.stringify(parsed, null, 2)}