Skip to content

fix: toolbar wrap #137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hilhorstt merged 5 commits into from
Jan 12, 2026
Merged

fix: toolbar wrap #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
094fc4c
fix: wrap the toolbar on small screens
Robbert Dec 14, 2025
b1682ee
ci: perform end-to-end tests in 400% zoom too
Robbert Dec 16, 2025
6339015
test: expect all toolbar buttons to be visible
Robbert Dec 16, 2025
aa72fb7
fix: add missing accessible name for 2 toolbar buttons
Robbert Dec 16, 2025
4270a91
chore: fix test
hilhorstt Jan 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion packages/editor-website/playwright.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,17 @@ export default defineConfig({
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
use: {
...devices['Desktop Chrome'],
viewport: { height: 1024, width: 1280 },
},
},
{
name: 'chromium-400-zoom',
use: {
...devices['Desktop Chrome'],
viewport: { height: 1024, width: 320 },
},
},
],
reporter: [['html', { outputFolder: 'tmp/playwright-report' }]],
Expand Down
2 changes: 2 additions & 0 deletions packages/editor/src/components/toolbar/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ import { css } from 'lit';

export default css`
.clippy-toolbar__wrapper {
/* Wrap the toolbar to make a toolbar with many items fit on small screens. */
display: flex;
flex-wrap: wrap;
gap: var(--basis-space-inline-sm);
background-color: var(--ma-color-paars-1);
border: 1px solid var(--ma-color-paars-8);
Expand Down
19 changes: 19 additions & 0 deletions packages/editor/src/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,4 +55,23 @@ describe('<clippy-editor>', () => {

expect(a11yDialog).toHaveTextContent('Geen toegankelijkheidsfouten gevonden.');
});

it('all toolbar buttons are visible, regardless of viewport size', async () => {
expect(page.getByRole('button', { name: 'Bold' })).toBeVisible();
expect(page.getByRole('button', { name: 'Italic' })).toBeVisible();
expect(page.getByRole('button', { name: 'Underline' })).toBeVisible();
expect(page.getByRole('button', { name: 'Undo' })).toBeVisible();
expect(page.getByRole('button', { name: 'Redo' })).toBeVisible();
expect(page.getByRole('button', { name: 'Ordered list' })).toBeVisible();
expect(page.getByRole('button', { name: 'Bullet list' })).toBeVisible();
expect(page.getByRole('button', { name: 'Definition list' })).toBeVisible();
expect(page.getByRole('button', { name: 'Tabel invoegen' })).toBeVisible();
const toolbar = await page.getByLabelText('Werkbalk tekstbewerker').element();
await toolbar.querySelector('clippy-toolbar-link').updateComplete;
await toolbar.querySelector('clippy-toolbar-image-upload').updateComplete;
await expect(page.getByRole('button', { name: 'Link' })).toBeVisible();
expect(page.getByRole('button', { name: 'Afbeelding' })).toBeVisible();
expect(page.getByRole('button', { name: 'Keyboard shortcuts' })).toBeVisible();
expect(page.getByRole('button', { name: 'Toon toegankelijkheidsfouten' })).toBeVisible();
});
});