From bc2480b3cb6b7862e806b7efd214b0da7bcd348c Mon Sep 17 00:00:00 2001
From: Nils-Johan Gynther <nils-johan.gynther@neoleaf.se>
Date: Fri, 10 Apr 2026 19:56:49 +0200
Subject: [PATCH] Enhance form styling and add Markdown help toggle in recipe
 creation and editing pages. Enhance form and styling on other pages aswell.

---
 .../app/admin/products/CanonicalNameForm.tsx  |  34 ++++-
 .../app/admin/products/MergePreviewForm.tsx   |  80 +++++++++--
 .../app/inventory/InventoryConsumeForm.tsx    |  54 ++++++--
 frontend/app/inventory/InventoryEditForm.tsx  | 129 ++++++++++++++----
 frontend/app/inventory/ProductForm.tsx        |  41 ++++--
 frontend/app/recipes/[id]/edit/page.tsx       |  44 +++++-
 .../app/recipes/create/CreateRecipePage.tsx   |  44 +++++-
 7 files changed, 350 insertions(+), 76 deletions(-)

diff --git a/frontend/app/admin/products/CanonicalNameForm.tsx b/frontend/app/admin/products/CanonicalNameForm.tsx
index 0e11cf09..989593ea 100644
--- a/frontend/app/admin/products/CanonicalNameForm.tsx
+++ b/frontend/app/admin/products/CanonicalNameForm.tsx
@@ -34,15 +34,43 @@ export default function CanonicalNameForm({
       }}
       style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}
     >
-      <input type="hidden" name="id" value={id} />
+      <input 
+        type="hidden" 
+        name="id" 
+        value={id} 
+      />
       <input
         name="canonicalName"
         type="text"
         defaultValue={currentCanonicalName || ''}
         placeholder="Canonical name"
-        style={{ padding: '0.4rem', minWidth: '220px' }}
+        style={{ 
+          padding: '0.75rem',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          fontSize: '1rem',
+          boxSizing: 'border-box',
+          minHeight: '44px',
+          minWidth: '220px',
+          flex: '1 1 200px',
+        }}
       />
-      <button type="submit" disabled={isPending} style={{ padding: '0.4rem 0.75rem' }}>
+      <button 
+        type="submit" 
+        disabled={isPending} 
+        style={{ 
+          padding: '0.75rem 1.5rem',
+          background: '#0070f3',
+          color: 'white',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          fontSize: '1rem',
+          minHeight: '44px',
+          fontWeight: 600,
+          whiteSpace: 'nowrap',
+        }}
+      >
         {isPending ? 'Sparar...' : 'Spara'}
       </button>
       {error ? <span style={{ color: 'crimson' }}>{error}</span> : null}
diff --git a/frontend/app/admin/products/MergePreviewForm.tsx b/frontend/app/admin/products/MergePreviewForm.tsx
index 4a4cf478..02cfb658 100644
--- a/frontend/app/admin/products/MergePreviewForm.tsx
+++ b/frontend/app/admin/products/MergePreviewForm.tsx
@@ -99,14 +99,21 @@ export default function MergePreviewForm({ products }: Props) {
     >
       <h2 style={{ margin: 0 }}>Förhandsgranska merge</h2>
 
-      <div style={{ display: 'grid', gap: '0.75rem', gridTemplateColumns: '1fr 1fr' }}>
-        <label>
-          Source product (ska bort)
-          <br />
+      <div style={{ display: 'grid', gap: '0.75rem', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
+        <label style={{ display: 'grid', gap: '0.3rem' }}>
+          <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Source product (ska bort)</span>
           <select
             value={sourceProductId}
             onChange={(e) => setSourceProductId(e.target.value)}
-            style={{ width: '100%', padding: '0.5rem' }}
+            style={{ 
+              width: '100%', 
+              padding: '0.75rem',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+              fontSize: '1rem',
+              boxSizing: 'border-box',
+              minHeight: '44px',
+            }}
           >
             <option value="">Välj source</option>
             {products.map((product) => (
@@ -117,13 +124,20 @@ export default function MergePreviewForm({ products }: Props) {
           </select>
         </label>
 
-        <label>
-          Target product (ska behållas)
-          <br />
+        <label style={{ display: 'grid', gap: '0.3rem' }}>
+          <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Target product (ska behållas)</span>
           <select
             value={targetProductId}
             onChange={(e) => setTargetProductId(e.target.value)}
-            style={{ width: '100%', padding: '0.5rem' }}
+            style={{ 
+              width: '100%', 
+              padding: '0.75rem',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+              fontSize: '1rem',
+              boxSizing: 'border-box',
+              minHeight: '44px',
+            }}
           >
             <option value="">Välj target</option>
             {products.map((product) => (
@@ -140,7 +154,17 @@ export default function MergePreviewForm({ products }: Props) {
           type="button"
           onClick={fetchPreview}
           disabled={isPending}
-          style={{ padding: '0.6rem 1rem' }}
+          style={{ 
+            padding: '0.75rem 1.5rem',
+            background: '#0070f3',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            fontSize: '1rem',
+            minHeight: '44px',
+            fontWeight: 600,
+          }}
         >
           {isPending ? 'Hämtar preview...' : 'Förhandsgranska merge'}
         </button>
@@ -150,7 +174,17 @@ export default function MergePreviewForm({ products }: Props) {
             type="button"
             onClick={() => setIsConfirming((prev) => !prev)}
             disabled={isPending}
-            style={{ padding: '0.6rem 1rem' }}
+            style={{ 
+              padding: '0.75rem 1.5rem',
+              background: '#f0f0f0',
+              color: '#333',
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontSize: '1rem',
+              minHeight: '44px',
+              fontWeight: 600,
+            }}
           >
             {isConfirming ? 'Avbryt bekräftelse' : 'Gå vidare till bekräftelse'}
           </button>
@@ -239,7 +273,17 @@ export default function MergePreviewForm({ products }: Props) {
                   type="button"
                   onClick={confirmMerge}
                   disabled={isPending}
-                  style={{ padding: '0.75rem 1rem' }}
+                  style={{ 
+                    padding: '0.75rem 1.5rem',
+                    background: '#c0392b',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    fontSize: '1rem',
+                    minHeight: '44px',
+                    fontWeight: 600,
+                  }}
                 >
                   {isPending ? 'Slår ihop...' : 'Bekräfta merge'}
                 </button>
@@ -248,7 +292,17 @@ export default function MergePreviewForm({ products }: Props) {
                   type="button"
                   onClick={() => setIsConfirming(false)}
                   disabled={isPending}
-                  style={{ padding: '0.75rem 1rem' }}
+                  style={{ 
+                    padding: '0.75rem 1.5rem',
+                    background: '#f0f0f0',
+                    color: '#333',
+                    border: '1px solid #ccc',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    fontSize: '1rem',
+                    minHeight: '44px',
+                    fontWeight: 600,
+                  }}
                 >
                   Avbryt
                 </button>
diff --git a/frontend/app/inventory/InventoryConsumeForm.tsx b/frontend/app/inventory/InventoryConsumeForm.tsx
index e2eaeb08..201caaab 100644
--- a/frontend/app/inventory/InventoryConsumeForm.tsx
+++ b/frontend/app/inventory/InventoryConsumeForm.tsx
@@ -64,25 +64,39 @@ export default function InventoryConsumeForm({ id, unit }: Props) {
       >
         <input type="hidden" name="id" value={id} />
 
-        <label>
-          Hur mycket använde du? ({unit})
-          <br />
+        <label style={{ display: 'grid', gap: '0.3rem' }}>
+          <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Hur mycket använde du? ({unit})</span>
           <input
             name="amountUsed"
             type="text"
             required
-            style={{ width: '100%', padding: '0.5rem' }}
+            style={{ 
+              width: '100%', 
+              padding: '0.75rem',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+              fontSize: '1rem',
+              boxSizing: 'border-box',
+              minHeight: '44px',
+            }}
           />
         </label>
 
-        <label>
-          Kommentar
-          <br />
+        <label style={{ display: 'grid', gap: '0.3rem' }}>
+          <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Kommentar</span>
           <input
             name="comment"
             type="text"
             placeholder="t.ex. lagade middag"
-            style={{ width: '100%', padding: '0.5rem' }}
+            style={{ 
+              width: '100%', 
+              padding: '0.75rem',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+              fontSize: '1rem',
+              boxSizing: 'border-box',
+              minHeight: '44px',
+            }}
           />
         </label>
 
@@ -90,7 +104,17 @@ export default function InventoryConsumeForm({ id, unit }: Props) {
           <button
             type="submit"
             disabled={isPending}
-            style={{ padding: '0.6rem 0.9rem' }}
+            style={{ 
+              padding: '0.75rem 1.5rem',
+              background: '#0070f3',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontSize: '1rem',
+              minHeight: '44px',
+              fontWeight: 600,
+            }}
           >
             {isPending ? 'Sparar...' : 'Spara användning'}
           </button>
@@ -99,7 +123,17 @@ export default function InventoryConsumeForm({ id, unit }: Props) {
             type="button"
             onClick={() => setIsOpen(false)}
             disabled={isPending}
-            style={{ padding: '0.6rem 0.9rem' }}
+            style={{ 
+              padding: '0.75rem 1.5rem',
+              background: '#f0f0f0',
+              color: '#333',
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontSize: '1rem',
+              minHeight: '44px',
+              fontWeight: 600,
+            }}
           >
             Avbryt
           </button>
diff --git a/frontend/app/inventory/InventoryEditForm.tsx b/frontend/app/inventory/InventoryEditForm.tsx
index eb7c076d..ad6ac650 100644
--- a/frontend/app/inventory/InventoryEditForm.tsx
+++ b/frontend/app/inventory/InventoryEditForm.tsx
@@ -120,25 +120,39 @@ export default function InventoryEditForm({ item }: Props) {
             gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
           }}
         >
-          <label>
-            Mängd
-            <br />
+          <label style={{ display: 'grid', gap: '0.3rem' }}>
+            <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Mängd</span>
             <input
               name="quantity"
               type="text"
               required
               defaultValue={item.quantity}
-              style={{ width: '100%', padding: '0.5rem' }}
+              style={{ 
+                width: '100%', 
+                padding: '0.75rem',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '1rem',
+                boxSizing: 'border-box',
+                minHeight: '44px',
+              }}
             />
           </label>
 
-          <label>
-            Enhet
-            <br />
+          <label style={{ display: 'grid', gap: '0.3rem' }}>
+            <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Enhet</span>
             <select
               name="unit"
               defaultValue={item.unit}
-              style={{ width: '100%', padding: '0.5rem' }}
+              style={{ 
+                width: '100%', 
+                padding: '0.75rem',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '1rem',
+                boxSizing: 'border-box',
+                minHeight: '44px',
+              }}
             >
               {UNIT_OPTIONS.map((opt) => (
                 <option key={opt.value} value={opt.value}>
@@ -148,13 +162,20 @@ export default function InventoryEditForm({ item }: Props) {
             </select>
           </label>
 
-          <label>
-            Plats
-            <br />
+          <label style={{ display: 'grid', gap: '0.3rem' }}>
+            <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Plats</span>
             <select
               name="location"
               defaultValue={item.location || ''}
-              style={{ width: '100%', padding: '0.5rem' }}
+              style={{ 
+                width: '100%', 
+                padding: '0.75rem',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '1rem',
+                boxSizing: 'border-box',
+                minHeight: '44px',
+              }}
             >
               {LOCATION_OPTIONS.map((opt) => (
                 <option key={opt.value} value={opt.value}>
@@ -164,48 +185,76 @@ export default function InventoryEditForm({ item }: Props) {
             </select>
           </label>
 
-          <label>
-            Varumärke
-            <br />
+          <label style={{ display: 'grid', gap: '0.3rem' }}>
+            <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Varumärke</span>
             <input
               name="brand"
               type="text"
               defaultValue={item.brand || ''}
-              style={{ width: '100%', padding: '0.5rem' }}
+              style={{ 
+                width: '100%', 
+                padding: '0.75rem',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '1rem',
+                boxSizing: 'border-box',
+                minHeight: '44px',
+              }}
             />
           </label>
 
-          <label>
-            Bäst före
-            <br />
+          <label style={{ display: 'grid', gap: '0.3rem' }}>
+            <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Bäst före</span>
             <input
               name="bestBeforeDate"
               type="date"
               defaultValue={toDateInputValue(item.bestBeforeDate)}
-              style={{ width: '100%', padding: '0.5rem' }}
+              style={{ 
+                width: '100%', 
+                padding: '0.75rem',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '1rem',
+                boxSizing: 'border-box',
+                minHeight: '44px',
+              }}
             />
           </label>
         </div>
 
-        <label>
-          Passar till
-          <br />
+        <label style={{ display: 'grid', gap: '0.3rem' }}>
+          <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Passar till</span>
           <input
             name="suitableFor"
             type="text"
             defaultValue={item.suitableFor || ''}
-            style={{ width: '100%', padding: '0.5rem' }}
+            style={{ 
+              width: '100%', 
+              padding: '0.75rem',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+              fontSize: '1rem',
+              boxSizing: 'border-box',
+              minHeight: '44px',
+            }}
           />
         </label>
 
-        <label>
-          Kommentar
-          <br />
+        <label style={{ display: 'grid', gap: '0.3rem' }}>
+          <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Kommentar</span>
           <input
             name="comment"
             type="text"
             defaultValue={item.comment || ''}
-            style={{ width: '100%', padding: '0.5rem' }}
+            style={{ 
+              width: '100%', 
+              padding: '0.75rem',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+              fontSize: '1rem',
+              boxSizing: 'border-box',
+              minHeight: '44px',
+            }}
           />
         </label>
 
@@ -222,7 +271,17 @@ export default function InventoryEditForm({ item }: Props) {
           <button
             type="submit"
             disabled={isPending}
-            style={{ padding: '0.6rem 0.9rem' }}
+            style={{ 
+              padding: '0.75rem 1.5rem',
+              background: '#0070f3',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontSize: '1rem',
+              minHeight: '44px',
+              fontWeight: 600,
+            }}
           >
             {isPending ? 'Sparar...' : 'Spara ändringar'}
           </button>
@@ -231,7 +290,17 @@ export default function InventoryEditForm({ item }: Props) {
             type="button"
             onClick={() => setIsEditing(false)}
             disabled={isPending}
-            style={{ padding: '0.6rem 0.9rem' }}
+            style={{ 
+              padding: '0.75rem 1.5rem',
+              background: '#f0f0f0',
+              color: '#333',
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontSize: '1rem',
+              minHeight: '44px',
+              fontWeight: 600,
+            }}
           >
             Avbryt
           </button>
diff --git a/frontend/app/inventory/ProductForm.tsx b/frontend/app/inventory/ProductForm.tsx
index 61cde7f7..5c87035e 100644
--- a/frontend/app/inventory/ProductForm.tsx
+++ b/frontend/app/inventory/ProductForm.tsx
@@ -36,19 +36,40 @@ export default function ProductForm() {
     >
       <h2 style={{ margin: 0 }}>Skapa produkt</h2>
 
-      <label>
+      <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
         Produktnamn
-        <br />
-        <input
-          name="name"
-          type="text"
-          required
-          placeholder="Till exempel Rödkål"
-          style={{ width: '100%', padding: '0.5rem' }}
-        />
       </label>
+      <input
+        name="name"
+        type="text"
+        required
+        placeholder="Till exempel Rödkål"
+        style={{ 
+          width: '100%', 
+          padding: '0.75rem',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          fontSize: '1rem',
+          boxSizing: 'border-box',
+          minHeight: '44px',
+        }}
+      />
 
-      <button type="submit" disabled={isPending} style={{ padding: '0.75rem' }}>
+      <button 
+        type="submit" 
+        disabled={isPending} 
+        style={{ 
+          padding: '0.75rem 1.5rem',
+          background: '#0070f3',
+          color: 'white',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          fontSize: '1rem',
+          minHeight: '44px',
+          fontWeight: 600,
+        }}
+      >
         {isPending ? 'Sparar...' : 'Skapa produkt'}
       </button>
 
diff --git a/frontend/app/recipes/[id]/edit/page.tsx b/frontend/app/recipes/[id]/edit/page.tsx
index 6f44d615..0f0fafcb 100644
--- a/frontend/app/recipes/[id]/edit/page.tsx
+++ b/frontend/app/recipes/[id]/edit/page.tsx
@@ -57,6 +57,7 @@ export default function EditRecipePage() {
   const [isDeleting, setIsDeleting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [showPreview, setShowPreview] = useState(false);
+  const [showMarkdownHelp, setShowMarkdownHelp] = useState(false);
 
   useEffect(() => {
     const loadData = async () => {
@@ -205,6 +206,7 @@ export default function EditRecipePage() {
                 borderRadius: '4px',
                 fontSize: '1rem',
                 minHeight: '44px',
+                boxSizing: 'border-box',
               }}
             />
           </div>
@@ -225,6 +227,7 @@ export default function EditRecipePage() {
                 fontSize: '1rem',
                 minHeight: '100px',
                 fontFamily: 'inherit',
+                boxSizing: 'border-box',
               }}
             />
           </div>
@@ -233,10 +236,32 @@ export default function EditRecipePage() {
             <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
               Instruktioner
             </label>
-            <div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', background: '#f9f9f9', padding: '0.5rem', borderRadius: '4px', color: '#666' }}>
-              <strong>Markdown-stöd:</strong>
-              <div style={{ whiteSpace: 'pre-wrap', marginTop: '0.25rem' }}>{MARKDOWN_HELP}</div>
-            </div>
+            <button
+              type="button"
+              onClick={() => setShowMarkdownHelp(!showMarkdownHelp)}
+              style={{
+                marginBottom: '0.5rem',
+                padding: '0.4rem 0.75rem',
+                background: '#f9f9f9',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                fontSize: '0.85rem',
+                color: '#666',
+                fontWeight: 500,
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.25rem',
+              }}
+            >
+              <span>{showMarkdownHelp ? '▼' : '▶'}</span>
+              <strong>Markdown-stöd</strong>
+            </button>
+            {showMarkdownHelp && (
+              <div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', background: '#f9f9f9', padding: '0.5rem', borderRadius: '4px', color: '#666' }}>
+                <div style={{ whiteSpace: 'pre-wrap', marginTop: '0.25rem' }}>{MARKDOWN_HELP}</div>
+              </div>
+            )}
 
             <textarea
               value={recipe.instructions}
@@ -249,7 +274,8 @@ export default function EditRecipePage() {
                 borderRadius: '4px',
                 fontSize: '1rem',
                 minHeight: '150px',
-                fontFamily: 'monospace',
+                fontFamily: 'inherit',
+                boxSizing: 'border-box',
               }}
             />
 
@@ -313,6 +339,8 @@ export default function EditRecipePage() {
                   borderRadius: '4px',
                   fontSize: '1rem',
                   minHeight: '44px',
+                  boxSizing: 'border-box',
+                  width: '100%',
                 }}
               >
                 <option value={0}>Välj produkt</option>
@@ -335,6 +363,8 @@ export default function EditRecipePage() {
                   borderRadius: '4px',
                   fontSize: '1rem',
                   minHeight: '44px',
+                  boxSizing: 'border-box',
+                  width: '100%',
                 }}
               />
 
@@ -348,6 +378,8 @@ export default function EditRecipePage() {
                   borderRadius: '4px',
                   fontSize: '1rem',
                   minHeight: '44px',
+                  boxSizing: 'border-box',
+                  width: '100%',
                 }}
               >
                 {UNIT_OPTIONS.map((opt) => (
@@ -368,6 +400,8 @@ export default function EditRecipePage() {
                   borderRadius: '4px',
                   fontSize: '1rem',
                   minHeight: '44px',
+                  boxSizing: 'border-box',
+                  width: '100%',
                 }}
               />
 
diff --git a/frontend/app/recipes/create/CreateRecipePage.tsx b/frontend/app/recipes/create/CreateRecipePage.tsx
index 2a202df8..4ee81e35 100644
--- a/frontend/app/recipes/create/CreateRecipePage.tsx
+++ b/frontend/app/recipes/create/CreateRecipePage.tsx
@@ -51,6 +51,7 @@ export default function CreateRecipePage() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [showPreview, setShowPreview] = useState(false);
+  const [showMarkdownHelp, setShowMarkdownHelp] = useState(false);
 
   useEffect(() => {
     fetchJson<Product[]>('/api/products')
@@ -160,6 +161,7 @@ export default function CreateRecipePage() {
                 borderRadius: '4px',
                 fontSize: '1rem',
                 minHeight: '44px',
+                boxSizing: 'border-box',
               }}
             />
           </div>
@@ -180,6 +182,7 @@ export default function CreateRecipePage() {
                 fontSize: '1rem',
                 minHeight: '100px',
                 fontFamily: 'inherit',
+                boxSizing: 'border-box',
               }}
             />
           </div>
@@ -188,10 +191,32 @@ export default function CreateRecipePage() {
             <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
               Instruktioner
             </label>
-            <div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', background: '#f9f9f9', padding: '0.5rem', borderRadius: '4px', color: '#666' }}>
-              <strong>Markdown-stöd:</strong>
-              <div style={{ whiteSpace: 'pre-wrap', marginTop: '0.25rem' }}>{MARKDOWN_HELP}</div>
-            </div>
+            <button
+              type="button"
+              onClick={() => setShowMarkdownHelp(!showMarkdownHelp)}
+              style={{
+                marginBottom: '0.5rem',
+                padding: '0.4rem 0.75rem',
+                background: '#f9f9f9',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                fontSize: '0.85rem',
+                color: '#666',
+                fontWeight: 500,
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.25rem',
+              }}
+            >
+              <span>{showMarkdownHelp ? '▼' : '▶'}</span>
+              <strong>Markdown-stöd</strong>
+            </button>
+            {showMarkdownHelp && (
+              <div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', background: '#f9f9f9', padding: '0.5rem', borderRadius: '4px', color: '#666' }}>
+                <div style={{ whiteSpace: 'pre-wrap', marginTop: '0.25rem' }}>{MARKDOWN_HELP}</div>
+              </div>
+            )}
 
             <textarea
               value={recipe.instructions}
@@ -204,7 +229,8 @@ export default function CreateRecipePage() {
                 borderRadius: '4px',
                 fontSize: '1rem',
                 minHeight: '150px',
-                fontFamily: 'monospace',
+                fontFamily: 'inherit',
+                boxSizing: 'border-box',
               }}
             />
 
@@ -268,6 +294,8 @@ export default function CreateRecipePage() {
                   borderRadius: '4px',
                   fontSize: '1rem',
                   minHeight: '44px',
+                  boxSizing: 'border-box',
+                  width: '100%',
                 }}
               >
                 <option value={0}>Välj produkt</option>
@@ -290,6 +318,8 @@ export default function CreateRecipePage() {
                   borderRadius: '4px',
                   fontSize: '1rem',
                   minHeight: '44px',
+                  boxSizing: 'border-box',
+                  width: '100%',
                 }}
               />
 
@@ -303,6 +333,8 @@ export default function CreateRecipePage() {
                   borderRadius: '4px',
                   fontSize: '1rem',
                   minHeight: '44px',
+                  boxSizing: 'border-box',
+                  width: '100%',
                 }}
               >
                 {UNIT_OPTIONS.map((opt) => (
@@ -323,6 +355,8 @@ export default function CreateRecipePage() {
                   borderRadius: '4px',
                   fontSize: '1rem',
                   minHeight: '44px',
+                  boxSizing: 'border-box',
+                  width: '100%',
                 }}
               />