feat: improve modal styling and enhance padding management in modal host component

src/app/shared/components/modal-host/modal-host.component.ts

@@ -7,21 +7,17 @@ import {
   computed,
   effect,
   inject,
-  viewChild
+  viewChild,
 } from '@angular/core';
 
-import {
-  MODAL_DATA,
-  ModalRef,
-  ModalService
-} from '../../../core/services/modal.service';
+import { MODAL_DATA, ModalRef, ModalService } from '../../../core/services/modal.service';
 import { ModalShellComponent } from '../modal-shell/modal-shell.component';
 
 @Component({
   selector: 'app-modal-host',
   imports: [NgComponentOutlet, ModalShellComponent],
   templateUrl: './modal-host.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ModalHostComponent {
   private readonly modalService = inject(ModalService);
@@ -42,9 +38,9 @@ export class ModalHostComponent {
     return Injector.create({
       providers: [
         { provide: ModalRef, useValue: modal.ref },
-        { provide: MODAL_DATA, useValue: modal.config.data ?? null }
+        { provide: MODAL_DATA, useValue: modal.config.data ?? null },
       ],
-      parent: this.injector
+      parent: this.injector,
     });
   });
 
@@ -58,6 +54,18 @@ export class ModalHostComponent {
 
       const body = this.document.body;
       const previousOverflow = body.style.overflow;
+      const previousPaddingRight = body.style.paddingRight;
+      const view = this.document.defaultView;
+      const scrollbarWidth = view
+        ? Math.max(0, view.innerWidth - this.document.documentElement.clientWidth)
+        : 0;
+
+      if (scrollbarWidth > 0 && view) {
+        const currentPaddingRight =
+          Number.parseFloat(view.getComputedStyle(body).paddingRight) || 0;
+        body.style.paddingRight = `${currentPaddingRight + scrollbarWidth}px`;
+      }
+
       body.style.overflow = 'hidden';
 
       const onKeyDown = (event: KeyboardEvent) => {
@@ -75,6 +83,7 @@ export class ModalHostComponent {
       onCleanup(() => {
         this.document.removeEventListener('keydown', onKeyDown);
         body.style.overflow = previousOverflow;
+        body.style.paddingRight = previousPaddingRight;
       });
     });
   }