44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix close button overlap by scrollbar

Browse Source 
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.
This commit is contained in:
undergroundwires
2024-07-08 12:16:51 +02:00
parent 70959ccada
commit 19ea8dbc5b
1 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/presentation/components/Shared/Modal/ModalDialog.vue
View File

@@ -82,7 +82,14 @@ export default defineComponent({
width: auto; width: auto;
font-size: $font-size-absolute-large; font-size: $font-size-absolute-large;
margin-right: $spacing-absolute-small; 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;
} }
} }
</style> </style>