From 19ea8dbc5bc2dc436200cd40bf2a84c3fc3c6471 Mon Sep 17 00:00:00 2001 From: undergroundwires Date: Mon, 8 Jul 2024 12:16:51 +0200 Subject: [PATCH] Fix close button overlap by scrollbar This commit positions the close button on modaals to remain visible on small screens. This fix addresses an issue where the dialog's close button was being obscured by the vertical scrollbar on narrow screens. This problem was particularly evident in Chromium browsers, which display a larger scrollbar. This change includes a new mixin to document the purpose. The mixin sets the position of close button to `absolute` and aligns it to the top right. This way, the button stays visible and accessible regaRdless of The scrollbar's presence, thereby improving the user inTerfaCE usability on deviceS with smaller screens. --- src/presentation/components/Shared/Modal/ModalDialog.vue | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/presentation/components/Shared/Modal/ModalDialog.vue b/src/presentation/components/Shared/Modal/ModalDialog.vue index c8c3f9c9..12f32924 100644 --- a/src/presentation/components/Shared/Modal/ModalDialog.vue +++ b/src/presentation/components/Shared/Modal/ModalDialog.vue @@ -82,7 +82,14 @@ export default defineComponent({ width: auto; font-size: $font-size-absolute-large; margin-right: $spacing-absolute-small; - align-self: flex-start; + + @mixin keep-visible-above-scrollbar { // Prevents close button from being obscured by scrollbar on small screens. + position: absolute; + top: 0; + right: 0; // Aligns right + } + + @include keep-visible-above-scrollbar; } }