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

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}

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' }}>
+      <div style={{ display: 'grid', gap: '0.75rem', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
-        <label>
+        <label style={{ display: 'grid', gap: '0.3rem' }}>
-          Source product (ska bort)
+          <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Source product (ska bort)</span>
-          <br />
           <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>
+        <label style={{ display: 'grid', gap: '0.3rem' }}>
-          Target product (ska behållas)
+          <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Target product (ska behållas)</span>
-          <br />
           <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>

frontend/app/inventory/InventoryConsumeForm.tsx

@@ -64,25 +64,39 @@ export default function InventoryConsumeForm({ id, unit }: Props) {
       >
         <input type="hidden" name="id" value={id} />
 
-        <label>
+        <label style={{ display: 'grid', gap: '0.3rem' }}>
-          Hur mycket använde du? ({unit})
+          <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Hur mycket använde du? ({unit})</span>
-          <br />
           <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>
+        <label style={{ display: 'grid', gap: '0.3rem' }}>
-          Kommentar
+          <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Kommentar</span>
-          <br />
           <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>

frontend/app/inventory/InventoryEditForm.tsx

@@ -120,25 +120,39 @@ export default function InventoryEditForm({ item }: Props) {
             gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
           }}
         >
-          <label>
+          <label style={{ display: 'grid', gap: '0.3rem' }}>
-            Mängd
+            <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Mängd</span>
-            <br />
             <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>
+          <label style={{ display: 'grid', gap: '0.3rem' }}>
-            Enhet
+            <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Enhet</span>
-            <br />
             <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>
+          <label style={{ display: 'grid', gap: '0.3rem' }}>
-            Plats
+            <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Plats</span>
-            <br />
             <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>
+          <label style={{ display: 'grid', gap: '0.3rem' }}>
-            Varumärke
+            <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Varumärke</span>
-            <br />
             <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>
+          <label style={{ display: 'grid', gap: '0.3rem' }}>
-            Bäst före
+            <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Bäst före</span>
-            <br />
             <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>
+        <label style={{ display: 'grid', gap: '0.3rem' }}>
-          Passar till
+          <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Passar till</span>
-          <br />
           <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>
+        <label style={{ display: 'grid', gap: '0.3rem' }}>
-          Kommentar
+          <span style={{ fontWeight: 500, fontSize: '0.9rem' }}>Kommentar</span>
-          <br />
           <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>

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 />
+      </label>
       <input
         name="name"
         type="text"
         required
         placeholder="Till exempel Rödkål"
-          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>
 
-      <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>
 

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>
+            <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' }}>
-              <strong>Markdown-stöd:</strong>
                 <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%',
                 }}
               />
 

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>
+            <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' }}>
-              <strong>Markdown-stöd:</strong>
                 <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%',
                 }}
               />