feat: Update ingredient units and improve layout responsiveness across various components

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

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

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' }}>

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 = [

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 = [

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',
           }}
         >

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 = [

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 = [

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',
         }}
       >

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',
         }}

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';

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)}