Fix wiki search overflowing on wide screens (#6047)

Confine the search menu to be at most the width of the page, or 80% of
the viewport width, whichever is smaller. To do this, introduce a new
`--container-width` variable for the descendant elements of
`.ui.container` to be able to access.

Also update the relevant e2e test: add a long 'lorem ipsum' page, add a
search for it, parameterize the width.

tests/e2e/repo-wiki.test.e2e.ts

@@ -6,17 +6,26 @@
 import {expect} from '@playwright/test';
 import {test} from './utils_e2e.ts';
 
-test(`Search for long titles and test for no overflow`, async ({page}, workerInfo) => {
-  test.skip(workerInfo.project.name === 'Mobile Safari', 'Fails as always, see https://codeberg.org/forgejo/forgejo/pulls/5326#issuecomment-2313275');
-  await page.goto('/user2/repo1/wiki');
-  await page.getByPlaceholder('Search wiki').fill('spaces');
-  await page.getByPlaceholder('Search wiki').click();
-  // workaround: HTMX listens on keyup events, playwright's fill only triggers the input event
-  // so we manually "type" the last letter
-  await page.getByPlaceholder('Search wiki').dispatchEvent('keyup');
-  // timeout is necessary because HTMX search could be slow
-  await expect(page.locator('#wiki-search a[href]')).toBeInViewport({ratio: 1});
-});
+for (const searchTerm of ['space', 'consectetur']) {
+  for (const width of [null, 2560, 4000]) {
+    test(`Search for '${searchTerm}' and test for no overflow ${width && `on ${width}-wide viewport` || ''}`, async ({page, viewport}, workerInfo) => {
+      test.skip(workerInfo.project.name === 'Mobile Safari', 'Fails as always, see https://codeberg.org/forgejo/forgejo/pulls/5326#issuecomment-2313275');
+
+      await page.setViewportSize({
+        width: width ?? viewport.width,
+        height: 1440, // We're testing that we fit horizontally - vertical scrolling is fine.
+      });
+      await page.goto('/user2/repo1/wiki');
+      await page.getByPlaceholder('Search wiki').fill(searchTerm);
+      await page.getByPlaceholder('Search wiki').click();
+      // workaround: HTMX listens on keyup events, playwright's fill only triggers the input event
+      // so we manually "type" the last letter
+      await page.getByPlaceholder('Search wiki').dispatchEvent('keyup');
+      // timeout is necessary because HTMX search could be slow
+      await expect(page.locator('#wiki-search a[href]')).toBeInViewport({ratio: 1});
+    });
+  }
+}
 
 test(`Search results show titles (and not file names)`, async ({page}, workerInfo) => {
   test.skip(workerInfo.project.name === 'Mobile Safari', 'Fails as always, see https://codeberg.org/forgejo/forgejo/pulls/5326#issuecomment-2313275');

tests/gitea-repositories-meta/user2/repo1.wiki.git/objects/d4/9ac742d44063dcf69d4e0afe725813b777dd89

@@ -0,0 +1 @@
+x
ťŹÍn›@…»ž§¸ű*ń†áGjŞŚmJ±‰C1–“ě~R0ŹÓ§i}’*ďU·•şĘ*gw>éHçËş¶­5<C2AD>6}§Ą€3”)Sh˛´0—9ÍTƨáž;2i2Óĺ®-É^j§
óLň4wSžŰŞp™mSTČ­‚Ű\9V†Ô1Sép"Źşę¸ŐĽ|ůůëÇ“„ťî.Z>É법us™uíG 63<36>…Ąđ)"9ÓóG­Ţ¶.÷ĺˇ.áâO¦ž¬ ň#XţJ$›ŘűË	¨?o<1˝_Š)n<>/±~ćá6ąëŐcS­űl<ÔXŽiŇ–b3{@ź÷B,g±řĎ	”Ż‘ŰËK|˝ĆEĐ[ß0\ď<>ÉŹaWńݢRć|¤ři{şąžxd…ŤĂÉßô
9<ĐŮŇŹšg>»¨ŠKOvÉ"D§J„sEŕęŘśzňĎĆ[Í_s!2ϡév%ěe©Čo(˝”

tests/gitea-repositories-meta/user2/repo1.wiki.git/refs/heads/master

@@ -1 +1 @@
-0dca5bd9b5d7ef937710e056f575e86c0184ba85
+d49ac742d44063dcf69d4e0afe725813b777dd89

tests/integration/api_wiki_test.go

@@ -133,8 +133,31 @@ func TestAPIListWikiPages(t *testing.T) {
 			},
 		},
 		{
-			Title:   "Page With Image",
+			Title:   "Long Page",
 			HTMLURL: meta[1].HTMLURL,
+			SubURL:  "Long-Page",
+			LastCommit: &api.WikiCommit{
+				ID: "d49ac742d44063dcf69d4e0afe725813b777dd89",
+				Author: &api.CommitUser{
+					Identity: api.Identity{
+						Name:  "Oto Šťáva",
+						Email: "oto.stava@gmail.com",
+					},
+					Date: "2024-11-23T11:16:51Z",
+				},
+				Committer: &api.CommitUser{
+					Identity: api.Identity{
+						Name:  "Oto Šťáva",
+						Email: "oto.stava@gmail.com",
+					},
+					Date: "2024-11-23T11:16:51Z",
+				},
+				Message: "add long page\n",
+			},
+		},
+		{
+			Title:   "Page With Image",
+			HTMLURL: meta[2].HTMLURL,
 			SubURL:  "Page-With-Image",
 			LastCommit: &api.WikiCommit{
 				ID: "0cf15c3f66ec8384480ed9c3cf87c9e97fbb0ec3",
@@ -157,7 +180,7 @@ func TestAPIListWikiPages(t *testing.T) {
 		},
 		{
 			Title:   "Page With Spaced Name",
-			HTMLURL: meta[2].HTMLURL,
+			HTMLURL: meta[3].HTMLURL,
 			SubURL:  "Page-With-Spaced-Name",
 			LastCommit: &api.WikiCommit{
 				ID: "c10d10b7e655b3dab1f53176db57c8219a5488d6",
@@ -180,7 +203,7 @@ func TestAPIListWikiPages(t *testing.T) {
 		},
 		{
 			Title:   "Unescaped File",
-			HTMLURL: meta[3].HTMLURL,
+			HTMLURL: meta[4].HTMLURL,
 			SubURL:  "Unescaped-File",
 			LastCommit: &api.WikiCommit{
 				ID: "0dca5bd9b5d7ef937710e056f575e86c0184ba85",