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

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