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

@@ -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;
   }
 }
 </style>