loading up the forgejo repo on tangled to test page performance
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.
+65
-25
+2
-2
routers/web/repo/wiki_test.go
+2
-2
routers/web/repo/wiki_test.go
···
86
86
Wiki(ctx)
87
87
assert.EqualValues(t, http.StatusOK, ctx.Resp.Status())
88
88
assert.EqualValues(t, "Home", ctx.Data["Title"])
89
-
assertPagesMetas(t, []string{"Home", "Page With Image", "Page With Spaced Name", "Unescaped File"}, ctx.Data["Pages"])
89
+
assertPagesMetas(t, []string{"Home", "Long Page", "Page With Image", "Page With Spaced Name", "Unescaped File"}, ctx.Data["Pages"])
90
90
}
91
91
92
92
func TestWikiPages(t *testing.T) {
···
96
96
contexttest.LoadRepo(t, ctx, 1)
97
97
WikiPages(ctx)
98
98
assert.EqualValues(t, http.StatusOK, ctx.Resp.Status())
99
-
assertPagesMetas(t, []string{"Home", "Page With Image", "Page With Spaced Name", "Unescaped File"}, ctx.Data["Pages"])
99
+
assertPagesMetas(t, []string{"Home", "Long Page", "Page With Image", "Page With Spaced Name", "Unescaped File"}, ctx.Data["Pages"])
100
100
}
101
101
102
102
func TestNewWiki(t *testing.T) {
+1
-1
templates/repo/wiki/search.tmpl
+1
-1
templates/repo/wiki/search.tmpl
···
1
1
{{if .Results}}
2
2
{{range .Results}}
3
-
<a class="item tw-max-w-[80vw]" href="{{$.RepoLink}}/wiki/{{.Filename}}">
3
+
<a class="item tw-max-w-[min(80vw,var(--container-width))]" href="{{$.RepoLink}}/wiki/{{.Filename}}">
4
4
<b class="tw-block tw-mb-2 tw-whitespace-break-spaces">{{.Title}}</b>
5
5
{{range .LineCodes}}
6
6
<p class="tw-my-0 tw-whitespace-break-spaces">{{.}}</p>
+20
-11
tests/e2e/repo-wiki.test.e2e.ts
+20
-11
tests/e2e/repo-wiki.test.e2e.ts
···
6
6
import {expect} from '@playwright/test';
7
7
import {test} from './utils_e2e.ts';
8
8
9
-
test(`Search for long titles and test for no overflow`, async ({page}, workerInfo) => {
10
-
test.skip(workerInfo.project.name === 'Mobile Safari', 'Fails as always, see https://codeberg.org/forgejo/forgejo/pulls/5326#issuecomment-2313275');
11
-
await page.goto('/user2/repo1/wiki');
12
-
await page.getByPlaceholder('Search wiki').fill('spaces');
13
-
await page.getByPlaceholder('Search wiki').click();
14
-
// workaround: HTMX listens on keyup events, playwright's fill only triggers the input event
15
-
// so we manually "type" the last letter
16
-
await page.getByPlaceholder('Search wiki').dispatchEvent('keyup');
17
-
// timeout is necessary because HTMX search could be slow
18
-
await expect(page.locator('#wiki-search a[href]')).toBeInViewport({ratio: 1});
19
-
});
9
+
for (const searchTerm of ['space', 'consectetur']) {
10
+
for (const width of [null, 2560, 4000]) {
11
+
test(`Search for '${searchTerm}' and test for no overflow ${width && `on ${width}-wide viewport` || ''}`, async ({page, viewport}, workerInfo) => {
12
+
test.skip(workerInfo.project.name === 'Mobile Safari', 'Fails as always, see https://codeberg.org/forgejo/forgejo/pulls/5326#issuecomment-2313275');
13
+
14
+
await page.setViewportSize({
15
+
width: width ?? viewport.width,
16
+
height: 1440, // We're testing that we fit horizontally - vertical scrolling is fine.
17
+
});
18
+
await page.goto('/user2/repo1/wiki');
19
+
await page.getByPlaceholder('Search wiki').fill(searchTerm);
20
+
await page.getByPlaceholder('Search wiki').click();
21
+
// workaround: HTMX listens on keyup events, playwright's fill only triggers the input event
22
+
// so we manually "type" the last letter
23
+
await page.getByPlaceholder('Search wiki').dispatchEvent('keyup');
24
+
// timeout is necessary because HTMX search could be slow
25
+
await expect(page.locator('#wiki-search a[href]')).toBeInViewport({ratio: 1});
26
+
});
27
+
}
28
+
}
20
29
21
30
test(`Search results show titles (and not file names)`, async ({page}, workerInfo) => {
22
31
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/53/0ab3e043bf2295fd1cec3129bf203a4349597a
tests/gitea-repositories-meta/user2/repo1.wiki.git/objects/53/0ab3e043bf2295fd1cec3129bf203a4349597a
This is a binary file and will not be displayed.
tests/gitea-repositories-meta/user2/repo1.wiki.git/objects/bf/29486462016efad8872371078932d8c2cb5253
tests/gitea-repositories-meta/user2/repo1.wiki.git/objects/bf/29486462016efad8872371078932d8c2cb5253
This is a binary file and will not be displayed.
tests/gitea-repositories-meta/user2/repo1.wiki.git/objects/c0/b5b381e2df9f66d11e8c95fe7467b8fb7f3e4e
tests/gitea-repositories-meta/user2/repo1.wiki.git/objects/c0/b5b381e2df9f66d11e8c95fe7467b8fb7f3e4e
This is a binary file and will not be displayed.
+1
tests/gitea-repositories-meta/user2/repo1.wiki.git/objects/d4/9ac742d44063dcf69d4e0afe725813b777dd89
+1
tests/gitea-repositories-meta/user2/repo1.wiki.git/objects/d4/9ac742d44063dcf69d4e0afe725813b777dd89
···
1
+
x���n�@������*� ��Gj��mJ��C1���~R0�ӧi}�*�U����*gw>�H�˺��5�6}���3�)Sh��0 �9�Tƨ��;2i2���-�^j��L�4wS�۪p�mSTȭ��\9V��1S�p"����� �|���Ǔ���.Z>�법us�u�G�63���� )"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(��
+1
-1
tests/gitea-repositories-meta/user2/repo1.wiki.git/refs/heads/master
+1
-1
tests/gitea-repositories-meta/user2/repo1.wiki.git/refs/heads/master
+26
-3
tests/integration/api_wiki_test.go
+26
-3
tests/integration/api_wiki_test.go
···
133
133
},
134
134
},
135
135
{
136
+
Title: "Long Page",
137
+
HTMLURL: meta[1].HTMLURL,
138
+
SubURL: "Long-Page",
139
+
LastCommit: &api.WikiCommit{
140
+
ID: "d49ac742d44063dcf69d4e0afe725813b777dd89",
141
+
Author: &api.CommitUser{
142
+
Identity: api.Identity{
143
+
Name: "Oto Šťáva",
144
+
Email: "oto.stava@gmail.com",
145
+
},
146
+
Date: "2024-11-23T11:16:51Z",
147
+
},
148
+
Committer: &api.CommitUser{
149
+
Identity: api.Identity{
150
+
Name: "Oto Šťáva",
151
+
Email: "oto.stava@gmail.com",
152
+
},
153
+
Date: "2024-11-23T11:16:51Z",
154
+
},
155
+
Message: "add long page\n",
156
+
},
157
+
},
158
+
{
136
159
Title: "Page With Image",
137
-
HTMLURL: meta[1].HTMLURL,
160
+
HTMLURL: meta[2].HTMLURL,
138
161
SubURL: "Page-With-Image",
139
162
LastCommit: &api.WikiCommit{
140
163
ID: "0cf15c3f66ec8384480ed9c3cf87c9e97fbb0ec3",
···
157
180
},
158
181
{
159
182
Title: "Page With Spaced Name",
160
-
HTMLURL: meta[2].HTMLURL,
183
+
HTMLURL: meta[3].HTMLURL,
161
184
SubURL: "Page-With-Spaced-Name",
162
185
LastCommit: &api.WikiCommit{
163
186
ID: "c10d10b7e655b3dab1f53176db57c8219a5488d6",
···
180
203
},
181
204
{
182
205
Title: "Unescaped File",
183
-
HTMLURL: meta[3].HTMLURL,
206
+
HTMLURL: meta[4].HTMLURL,
184
207
SubURL: "Unescaped-File",
185
208
LastCommit: &api.WikiCommit{
186
209
ID: "0dca5bd9b5d7ef937710e056f575e86c0184ba85",
+14
-7
web_src/css/modules/container.css
+14
-7
web_src/css/modules/container.css
···
3
3
4
4
.ui.container {
5
5
display: block;
6
-
max-width: 100%;
6
+
--container-width: 100%;
7
+
max-width: var(--container-width);
7
8
}
8
9
9
10
@media (max-width: 767.98px) {
10
11
.ui.ui.ui.container:not(.fluid) {
11
-
width: auto;
12
+
--container-width: auto;
13
+
width: var(--container-width);
12
14
margin-left: 1em;
13
15
margin-right: 1em;
14
16
}
···
16
18
17
19
@media (min-width: 768px) and (max-width: 991.98px) {
18
20
.ui.ui.ui.container:not(.fluid) {
19
-
width: 723px;
21
+
--container-width: 723px;
22
+
width: var(--container-width);
20
23
margin-left: auto;
21
24
margin-right: auto;
22
25
}
···
24
27
25
28
@media (min-width: 992px) and (max-width: 1199.98px) {
26
29
.ui.ui.ui.container:not(.fluid) {
27
-
width: 933px;
30
+
--container-width: 933px;
31
+
width: var(--container-width);
28
32
margin-left: auto;
29
33
margin-right: auto;
30
34
}
···
32
36
33
37
@media (min-width: 1200px) {
34
38
.ui.ui.ui.container:not(.fluid) {
35
-
width: 1127px;
39
+
--container-width: 1127px;
40
+
width: var(--container-width);
36
41
margin-left: auto;
37
42
margin-right: auto;
38
43
}
39
44
}
40
45
41
46
.ui.fluid.container {
42
-
width: 100%;
47
+
--container-width: 100%;
48
+
width: var(--container-width);
43
49
}
44
50
45
51
.ui[class*="center aligned"].container {
···
48
54
49
55
/* overwrite width of containers inside the main page content div (div with class "page-content") */
50
56
.page-content .ui.ui.ui.container:not(.fluid) {
51
-
width: 1280px;
57
+
--container-width: 1280px;
58
+
width: var(--container-width);
52
59
max-width: calc(100% - calc(2 * var(--page-margin-x)));
53
60
margin-left: auto;
54
61
margin-right: auto;