Enhance form styling and add Markdown help toggle in recipe creation and editing pages. Enhance form and styling on other pages aswell.

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