chore: reduce vertical bump on modal dialogs

Our 'centered' dialogs aren't really centered - we bump them up vertically a little
bit because this helps draw attention and looks nice visually. However, when the
window is near it's smallest and the dialog is at its biggest, we can run into
problems where the top of the dialog goes 'underneath' the titlebar.

This reduces the vertical bump from 20% to 5%. This still gives the subtle effect,
but dialogs will never have this problem at our default window size. We could get
more clever and check the window size, reduce the maximum height of the dialog, or
try to fix fully by changing z-index and possibly adding window scrollbars if things
still don't fit, but this is way simpler and should solve >99% of the time.

Fixes podman-desktop#8091.

Signed-off-by: Tim deBoer <[email protected]>

Author: deboer-tim

packages/ui/src/lib/modal/Modal.spec.ts

@@ -56,15 +56,15 @@ describe('translation-y', () => {
     render(Modal);
 
     const dialog = screen.getByRole('dialog');
-    expect(dialog.classList).toContain('translate-y-[-20%]');
+    expect(dialog.classList).toContain('translate-y-[-5%]');
     expect(dialog.classList).not.toContain('my-[32px]');
   });
 
   test('modal with top should not have translate-y', async () => {
     render(Modal, { top: true });
 
     const dialog = screen.getByRole('dialog');
-    expect(dialog.classList).not.toContain('translate-y-[-20%]');
+    expect(dialog.classList).not.toContain('translate-y-[-5%]');
     // should contain margin of size status bar height
     expect(dialog.classList).toContain('my-[32px]');
   });

packages/ui/src/lib/modal/Modal.svelte

@@ -41,7 +41,7 @@ if (previously_focused) {
     on:click={onclose}></button>
 
   <div
-    class:translate-y-[-20%]={!top}
+    class:translate-y-[-5%]={!top}
     class:my-[32px]={top}
     class="bg-[var(--pd-modal-bg)] z-50 rounded-xl overflow-auto w-[calc(200vw-4em)] h-fit max-w-[42em] max-h-[calc(100vh-4em)] border-[1px] border-[var(--pd-modal-border)]"
     role="dialog"