loading up the forgejo repo on tangled to test page performance
fix(ui): prevent overflow of branch selector in commit graph (#6617)
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6617
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Otto <otto@codeberg.org>
+31
-7
+18
-1
tests/e2e/repo-commitgraph.test.e2e.ts
+18
-1
tests/e2e/repo-commitgraph.test.e2e.ts
···
8
8
import {save_visual, test} from './utils_e2e.ts';
9
9
10
10
test('Commit graph overflow', async ({page}) => {
11
-
await page.goto('/user2/diff-test/graph');
11
+
const response = await page.goto('/user2/repo1/graph');
12
+
expect(response?.status()).toBe(200);
13
+
14
+
await page.click('#flow-select-refs-dropdown');
15
+
const input = page.locator('#flow-select-refs-dropdown');
16
+
await input.press('Enter');
17
+
await input.press('Enter');
18
+
await input.press('Enter');
19
+
await input.press('Enter');
20
+
await input.press('Enter');
21
+
await input.press('Enter');
22
+
await input.press('Enter');
23
+
await input.press('Enter');
24
+
await input.press('Enter');
25
+
await input.press('Enter');
26
+
27
+
await expect(page.locator('#flow-select-refs-dropdown')).toBeInViewport({ratio: 1});
12
28
await expect(page.getByRole('button', {name: 'Mono'})).toBeInViewport({ratio: 1});
13
29
await expect(page.getByRole('button', {name: 'Color'})).toBeInViewport({ratio: 1});
14
30
await expect(page.locator('.selection.search.dropdown')).toBeInViewport({ratio: 1});
31
+
await save_visual(page);
15
32
});
16
33
17
34
test('Switch branch', async ({page}) => {
+13
-6
web_src/css/features/gitgraph.css
+13
-6
web_src/css/features/gitgraph.css
···
23
23
#git-graph-heading {
24
24
align-items: center;
25
25
}
26
+
27
+
#git-graph-heading-left {
28
+
margin-right: 1rem;
29
+
}
30
+
31
+
#git-graph-heading h2 {
32
+
flex-shrink: 0;
33
+
}
34
+
35
+
#git-graph-container #flow-select-refs-dropdown {
36
+
min-width: 250px;
37
+
}
26
38
}
27
39
28
40
@media (max-width: 767.98px) {
···
34
46
#git-graph-heading-left {
35
47
margin-bottom: 1rem;
36
48
}
37
-
38
-
h2,
39
-
#flow-select-refs-dropdown {
40
-
max-width: 100%;
41
-
}
42
49
}
43
50
44
51
#git-graph-container #flow-select-refs-dropdown {
45
-
min-width: 250px;
52
+
flex-wrap: wrap;
46
53
}
47
54
48
55
#git-graph-container #flow-select-refs-dropdown .ui.label {