mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-07-24 18:38:42 +00:00
49f9cc7c4d
The dialog element shrink wrap up to the max-width boundary. The
`long-modal` is set to strictly fit the `800px` width in the test.
However with Playwright minor font rendering differences makes the
dialog modal width resulting in `797px`.
Test fails at: [expect(width).toBe(800);](6132d0e406/tests/e2e/modal.test.e2e.ts (L103))
The fix is to increase the content of the `#long-model` element in
`templates/demo/model.tmpl` to 300 characters length instead of the
current `100` characters length ensures that the dialog modal will always
hit the `800px` max-width.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12469
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
41 lines
1.5 KiB
Go HTML Template
41 lines
1.5 KiB
Go HTML Template
{{template "base/head" .}}
|
|
|
|
<div class="page-content ui container">
|
|
<h1>Modals</h1>
|
|
|
|
<div class="button-sequence">
|
|
<button class="secondary button show-modal" data-modal="#short-modal">Short</button>
|
|
<button class="secondary button show-modal" data-modal="#medium-modal">Medium</button>
|
|
<button class="secondary button show-modal" data-modal="#long-modal">Long</button>
|
|
</div>
|
|
|
|
<dialog id="short-modal">
|
|
<article>
|
|
<header>Short modal</header>
|
|
<div class="content">🐈</div>
|
|
<footer class="actions">
|
|
<button class="secondary button cancel">{{ctx.Locale.Tr "settings.cancel"}}</button>
|
|
</footer>
|
|
</article>
|
|
</dialog>
|
|
<dialog id="medium-modal">
|
|
<article>
|
|
<header>Medium modal</header>
|
|
<div class="content">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
|
|
<footer class="actions">
|
|
<button class="secondary button cancel">{{ctx.Locale.Tr "settings.cancel"}}</button>
|
|
</footer>
|
|
</article>
|
|
</dialog>
|
|
<dialog id="long-modal">
|
|
<article>
|
|
<header>Long modal</header>
|
|
<div class="content">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
|
|
<footer class="actions">
|
|
<button class="secondary button cancel">{{ctx.Locale.Tr "settings.cancel"}}</button>
|
|
</footer>
|
|
</article>
|
|
</dialog>
|
|
</div>
|
|
|
|
{{template "base/footer" .}}
|