refactor(ImageLightbox): pin close button via a fixed wrapper

This commit is contained in:
Ilia Mashkov
2026-07-14 18:02:37 +03:00
parent 611a9c1a5a
commit fcc90e7a87
2 changed files with 7 additions and 5 deletions
@@ -81,10 +81,10 @@ describe('ImageLightbox', () => {
expect(document.body.style.overflow).toBe('');
});
it('close button is positioned fixed', () => {
it('close button is pinned via a fixed wrapper', () => {
render(<ImageLightbox {...DEFAULT_PROPS} />);
const closeBtn = screen.getByRole('button', { name: /close/i, hidden: true });
expect(closeBtn).toHaveClass('fixed');
expect(closeBtn.parentElement).toHaveClass('fixed');
});
});
});
@@ -188,9 +188,11 @@ export function ImageLightbox({
className="lightbox-image block w-auto h-auto"
/>
</div>
<Button variant="outline" size="sm" onClick={close} aria-label="Close image" className="fixed top-3 right-3">
<CloseIcon />
</Button>
<div className="fixed top-3 right-3">
<Button variant="outline" size="sm" onClick={close} aria-label="Close image">
<CloseIcon />
</Button>
</div>
</Modal>
</>
);