From 054537989fb738c561d8e37494654a8f81455299 Mon Sep 17 00:00:00 2001 From: forgejo-backport-action Date: Mon, 20 Jan 2025 20:28:39 +0000 Subject: [PATCH] [v10.0/forgejo] fix(ui): prevent overflow of branch selector in commit graph (#6636) **Backport:** https://codeberg.org/forgejo/forgejo/pulls/6617 Fix that the branch selector in the commit graph can overflow | Previous | Now | | :----: | :----: | | ![grafik](/attachments/ab303490-2abc-46d8-8715-0750886fd111) | ![grafik](/attachments/63f919a9-bcc2-4969-8c8c-d265c1917e07) | | ![grafik](/attachments/c0e6636f-52eb-4bf0-bf07-0139ec407e33) | ![grafik](/attachments/752aef87-9250-4bf6-b74a-5a1813394dbe) | | ![grafik](/attachments/e61842dd-29c1-4517-86db-f068de9ff6e8) | ![grafik](/attachments/bf251b43-80fa-4e1a-9fbe-fd27e5f8d195) | Fixes #6615 Co-authored-by: Beowulf Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6636 Reviewed-by: Otto Reviewed-by: Beowulf Co-authored-by: forgejo-backport-action Co-committed-by: forgejo-backport-action --- tests/e2e/repo-commitgraph.test.e2e.ts | 19 ++++++++++++++++++- web_src/css/features/gitgraph.css | 19 +++++++++++++------ 2 files changed, 31 insertions(+), 7 deletions(-) diff --git a/tests/e2e/repo-commitgraph.test.e2e.ts b/tests/e2e/repo-commitgraph.test.e2e.ts index 39c5661900..e8b85c5997 100644 --- a/tests/e2e/repo-commitgraph.test.e2e.ts +++ b/tests/e2e/repo-commitgraph.test.e2e.ts @@ -8,10 +8,27 @@ import {expect} from '@playwright/test'; import {save_visual, test} from './utils_e2e.ts'; test('Commit graph overflow', async ({page}) => { - await page.goto('/user2/diff-test/graph'); + const response = await page.goto('/user2/repo1/graph'); + expect(response?.status()).toBe(200); + + await page.click('#flow-select-refs-dropdown'); + const input = page.locator('#flow-select-refs-dropdown'); + await input.press('Enter'); + await input.press('Enter'); + await input.press('Enter'); + await input.press('Enter'); + await input.press('Enter'); + await input.press('Enter'); + await input.press('Enter'); + await input.press('Enter'); + await input.press('Enter'); + await input.press('Enter'); + + await expect(page.locator('#flow-select-refs-dropdown')).toBeInViewport({ratio: 1}); await expect(page.getByRole('button', {name: 'Mono'})).toBeInViewport({ratio: 1}); await expect(page.getByRole('button', {name: 'Color'})).toBeInViewport({ratio: 1}); await expect(page.locator('.selection.search.dropdown')).toBeInViewport({ratio: 1}); + await save_visual(page); }); test('Switch branch', async ({page}) => { diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css index 4da871da61..726ac7e9e2 100644 --- a/web_src/css/features/gitgraph.css +++ b/web_src/css/features/gitgraph.css @@ -23,6 +23,18 @@ #git-graph-heading { align-items: center; } + + #git-graph-heading-left { + margin-right: 1rem; + } + + #git-graph-heading h2 { + flex-shrink: 0; + } + + #git-graph-container #flow-select-refs-dropdown { + min-width: 250px; + } } @media (max-width: 767.98px) { @@ -34,15 +46,10 @@ #git-graph-heading-left { margin-bottom: 1rem; } - - h2, - #flow-select-refs-dropdown { - max-width: 100%; - } } #git-graph-container #flow-select-refs-dropdown { - min-width: 250px; + flex-wrap: wrap; } #git-graph-container #flow-select-refs-dropdown .ui.label {