🐛 Fix modal opening on mobile

src/app/components/home-navbar/home-navbar.component.html

@@ -1,4 +1,5 @@
 <nav class="bg-white border-gray-200 dark:bg-gray-900">
+  <app-login-page></app-login-page>
   <div
     class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"
   >
@@ -63,7 +64,13 @@
             class="block text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
           >
             <span class="space-x-2">
-              <app-login-page></app-login-page>
+              <button
+                (click)="openLoginModal()"
+                class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
+                type="button"
+              >
+                Connexion
+              </button>
             </span>
           </a>
         </li>

src/app/components/home-navbar/home-navbar.component.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { ModalService } from '../../services/modal/modal.service';
 import { LoginPageComponent } from '../login-page/login-page.component';
 import { RegisterPageComponent } from '../register-page/register-page.component';
 
@@ -10,5 +11,9 @@ import { RegisterPageComponent } from '../register-page/register-page.component'
 })
 export class HomeNavbarComponent {
   isMenuOpen = false;
-  constructor() {}
+  constructor(private modalService: ModalService) {}
+
+  openLoginModal() {
+    this.modalService.openModal();
+  }
 }

src/app/components/login-page/login-page.component.html

@@ -1,16 +1,10 @@
-<!-- Modal toggle -->
-<button
-  (click)="openLoginModal()"
-  class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
-  type="button"
->
-  Connexion
-</button>
-
 <!-- Fond assombri -->
 <div
   class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40"
-  [ngClass]="{'opacity-0 pointer-events-none': !isLoginModalOpen, 'opacity-100': isLoginModalOpen}"
+  [ngClass]="{
+    'opacity-0 pointer-events-none': !isLoginModalOpen,
+    'opacity-100': isLoginModalOpen
+  }"
   (click)="closeLoginModal()"
 ></div>
 
@@ -61,9 +55,7 @@
         </button>
       </div>
       <!-- Modal body -->
-      <div 
+      <div class="p-4 md:p-5" *ngIf="isLoginModalOpen">
-        class="p-4 md:p-5" 
-        *ngIf="isLoginModalOpen">
         <form [formGroup]="userForm" class="space-y-4">
           <div>
             <label