fix: constrain mobile recipe layout and wrap long source URLs

tests/e2e/public.spec.ts

@@ -21,6 +21,7 @@ test('external images and structured steps survive import, editing, scaling and
     title: `Bilderküche ${info.project.name}`,
     image: cover,
     images: ['https://images.example.org/gallery.jpg'],
+    tips: 'Bildquelle: https://commons.wikimedia.org/wiki/File:Pljeskavica_cheese_chili_with_a_very_long_unbroken_filename.jpg\n\nLizenz: https://creativecommons.org/licenses/by-sa/4.0/',
     steps: pasta.steps.map((s, n) =>
       n === 0
         ? {
@@ -86,9 +87,21 @@ test('external images and structured steps survive import, editing, scaling and
     await page.getByRole('spinbutton', { name: 'Portionen', exact: true }).fill('4');
     await expect(first.locator('.instruction-ingredient').first()).toHaveText('80 g Basilikum');
     await expect(first.locator('.step-supplies')).toContainText('80 g Basilikum');
-    expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(
-      true,
-    );
+    expect(
+      await page
+        .locator('.recipe-columns')
+        .evaluate((el) =>
+          [...el.querySelectorAll('*')].every(
+            (child) =>
+              child.getBoundingClientRect().right <= document.documentElement.clientWidth + 1,
+          ),
+        ),
+    ).toBe(true);
+    expect(
+      await page.evaluate(
+        () => document.documentElement.scrollWidth <= document.documentElement.clientWidth,
+      ),
+    ).toBe(true);
     await page.screenshot({ path: info.outputPath('structured-steps.png'), fullPage: true });
     await page.getByRole('button', { name: 'Theme wechseln', exact: true }).click();
     await first.screenshot({ path: info.outputPath('structured-step-dark.png') });
@@ -98,9 +111,11 @@ test('external images and structured steps survive import, editing, scaling and
     );
     await expect(page.locator('.cooking-step .step-images img')).toHaveCount(2);
     await expect(page.locator('.cooking-step')).toHaveCSS('opacity', '1');
-    expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(
-      true,
-    );
+    expect(
+      await page.evaluate(
+        () => document.documentElement.scrollWidth <= document.documentElement.clientWidth,
+      ),
+    ).toBe(true);
     await page.screenshot({ path: info.outputPath('structured-cooking.png'), fullPage: true });
     expect(errors).toEqual([]);
   } finally {
@@ -147,7 +162,11 @@ test('editor remains usable on the current viewport in dark mode', async ({ page
   await expect(page.getByRole('textbox', { name: 'Zutat 1', exact: true })).toHaveValue('Karotten');
   await expect(page.locator('.ingredient-entry').nth(0)).toContainText('optional');
   await expect(page.locator('.ingredient-entry').nth(1)).toContainText('geschält und gewürfelt');
-  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
+  expect(
+    await page.evaluate(
+      () => document.documentElement.scrollWidth <= document.documentElement.clientWidth,
+    ),
+  ).toBe(true);
   await page.screenshot({
     path: `docs/screenshots/editor-dark-${info.project.name}.png`,
     fullPage: true,
@@ -166,7 +185,11 @@ test('editor remains usable on the current viewport in dark mode', async ({ page
     );
   }
   await page.getByRole('button', { name: 'Live-Vorschau', exact: true }).click();
-  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
+  expect(
+    await page.evaluate(
+      () => document.documentElement.scrollWidth <= document.documentElement.clientWidth,
+    ),
+  ).toBe(true);
 });
 test('public library, shareable search, favorites, themes and responsive layouts', async ({
   page,
@@ -186,7 +209,11 @@ test('public library, shareable search, favorites, themes and responsive layouts
     fullPage: true,
     animations: 'disabled',
   });
-  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
+  expect(
+    await page.evaluate(
+      () => document.documentElement.scrollWidth <= document.documentElement.clientWidth,
+    ),
+  ).toBe(true);
   await page.getByRole('textbox', { name: 'Rezepte suchen' }).fill('Basilikum');
   await expect(page.locator('.recipe-card')).toHaveCount(1);
   await expect(page).toHaveURL(/q=Basilikum/);
@@ -230,7 +257,11 @@ test('portion calculator, ingredient anchor, shopping list and print content', a
     path: `docs/screenshots/recipe-${info.project.name}.png`,
     fullPage: true,
   });
-  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
+  expect(
+    await page.evaluate(
+      () => document.documentElement.scrollWidth <= document.documentElement.clientWidth,
+    ),
+  ).toBe(true);
   await page.getByRole('button', { name: 'Zur Einkaufsliste hinzufügen' }).click();
   await page.goto('/einkaufsliste');
   await expect(page.locator('.shopping-list')).toContainText('400 g');