mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-09-13 06:17:26 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui): don't allow comment boxes to stretch outside diff boundries on small device UI (#9052)

Browse source 
The context menu of the comment box was not always available  on a mobile-sized device, because it would escape its container, overlap other elements, and be unable to be clicked.
To address this, I've made the comment box constrained to the width of the diff box.

This allows Playwright to interact with the element without ambiguity of the click targets, avoiding any "intercepts pointer events".

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9052
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: Mathieu Fenniak <mathieu@fenniak.net>
Co-committed-by: Mathieu Fenniak <mathieu@fenniak.net>
This commit is contained in:
Mathieu Fenniak 2025-08-29 21:32:50 +02:00 • committed by Beowulf
commit 11218ac43c
2 changed files with 51 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

104
tests/e2e/pr-review.test.e2e.ts
View file

@ -30,59 +30,57 @@ test('PR: Create review from files', async ({page}) => {
await save_visual(page);
});
// Test disabled because it is flaky.
// TODO: re-enable it
// test('PR: Create review from commit', async ({page}) => {
// const response = await page.goto('/user2/repo1/pulls/3/commits/4a357436d925b5c974181ff12a994538ddc5a269');
// expect(response?.status()).toBe(200);
//
// await page.locator('button.add-code-comment').click();
// const code_comment = page.locator('.comment-code-cloud form textarea.markdown-text-editor');
// await expect(code_comment).toBeVisible();
//
// await code_comment.fill('This is a code comment');
// await save_visual(page);
//
// const start_button = page.locator('.comment-code-cloud form button.btn-start-review');
// // Workaround for #7152, where there might already be a pending review state from previous
// // test runs (most likely to happen when debugging tests).
// if (await start_button.isVisible({timeout: 100})) {
// await start_button.click();
// } else {
// await page.locator('.comment-code-cloud form button[name="pending_review"]').click();
// }
//
// await expect(page.locator('.comment-list .comment-container')).toBeVisible();
//
// // We need to wait for the review to be processed. Checking the comment counter
// // conveniently does that.
// await expect(page.locator('#review-box .js-btn-review > span.review-comments-counter')).toHaveText('1');
//
// await page.locator('#review-box .js-btn-review').click();
// await expect(page.locator('.tippy-box .review-box-panel')).toBeVisible();
// await save_visual(page);
//
// await page.locator('.review-box-panel textarea.markdown-text-editor')
// .fill('This is a review');
// await page.locator('.review-box-panel button.btn-submit[value="approve"]').click();
// await page.waitForURL(/.*\/user2\/repo1\/pulls\/3#issuecomment-\d+/);
// await save_visual(page);
//
// // In addition to testing the ability to delete comments, this also
// // performs clean up. If tests are run for multiple platforms, the data isn't reset
// // in-between, and subsequent runs of this test would fail, because when there already is
// // a comment, the on-hover button to start a conversation doesn't appear anymore.
// await page.goto('/user2/repo1/pulls/3/commits/4a357436d925b5c974181ff12a994538ddc5a269');
// await page.locator('.comment-header-right.actions a.context-menu').click();
//
// await expect(page.locator('.comment-header-right.actions div.menu').getByText(/Copy link.*/)).toBeVisible();
// // The button to delete a comment will prompt for confirmation using a browser alert.
// page.on('dialog', (dialog) => dialog.accept());
// await page.locator('.comment-header-right.actions div.menu .delete-comment').click();
//
// await expect(page.locator('.comment-list .comment-container')).toBeHidden();
// await save_visual(page);
// });
test('PR: Create review from commit', async ({page}) => {
const response = await page.goto('/user2/repo1/pulls/3/commits/4a357436d925b5c974181ff12a994538ddc5a269');
expect(response?.status()).toBe(200);
await page.locator('button.add-code-comment').click();
const code_comment = page.locator('.comment-code-cloud form textarea.markdown-text-editor');
await expect(code_comment).toBeVisible();
await code_comment.fill('This is a code comment');
await save_visual(page);
const start_button = page.locator('.comment-code-cloud form button.btn-start-review');
// Workaround for #7152, where there might already be a pending review state from previous
// test runs (most likely to happen when debugging tests).
if (await start_button.isVisible({timeout: 100})) {
await start_button.click();
} else {
await page.locator('.comment-code-cloud form button[name="pending_review"]').click();
}
await expect(page.locator('.comment-list .comment-container')).toBeVisible();
// We need to wait for the review to be processed. Checking the comment counter
// conveniently does that.
await expect(page.locator('#review-box .js-btn-review > span.review-comments-counter')).toHaveText('1');
await page.locator('#review-box .js-btn-review').click();
await expect(page.locator('.tippy-box .review-box-panel')).toBeVisible();
await save_visual(page);
await page.locator('.review-box-panel textarea.markdown-text-editor')
.fill('This is a review');
await page.locator('.review-box-panel button.btn-submit[value="approve"]').click();
await page.waitForURL(/.*\/user2\/repo1\/pulls\/3#issuecomment-\d+/);
await save_visual(page);
// In addition to testing the ability to delete comments, this also
// performs clean up. If tests are run for multiple platforms, the data isn't reset
// in-between, and subsequent runs of this test would fail, because when there already is
// a comment, the on-hover button to start a conversation doesn't appear anymore.
await page.goto('/user2/repo1/pulls/3/commits/4a357436d925b5c974181ff12a994538ddc5a269');
await page.locator('.comment-header-right.actions a.context-menu').click();
await expect(page.locator('.comment-header-right.actions div.menu').getByText(/Copy link.*/)).toBeVisible();
// The button to delete a comment will prompt for confirmation using a browser alert.
page.on('dialog', (dialog) => dialog.accept());
await page.locator('.comment-header-right.actions div.menu .delete-comment').click();
await expect(page.locator('.comment-list .comment-container')).toBeHidden();
await save_visual(page);
});
test('PR: Navigate by single commit', async ({page}) => {
const response = await page.goto('/user2/repo1/pulls/3/commits');

4
web_src/css/review.css
View file

@ -98,7 +98,6 @@
}
.comment-code-cloud .comments .comment .avatar {
width: auto;
float: none;
margin: 0 0.5rem 0 0;
flex-shrink: 0;
}
@ -111,9 +110,6 @@
.comment-code-cloud .comments .comment .comment-content {
margin-left: 0 !important;
}
.comment-code-cloud .comments .comment .comment-container {
width: 100%;
}
.comment-code-cloud .comments .comment.code-comment {
padding: 0 0 0.5rem !important;
}