fix(ui): mobile responsive for meeting join page (#152)

* fix(ui): mobile responsive for meeting join page

Signed-off-by: Asitha de Silva <asithade@gmail.com>

* fix: logged out mobile responsive view

Signed-off-by: Asitha de Silva <asithade@gmail.com>

---------

Signed-off-by: Asitha de Silva <asithade@gmail.com>

Author: asithade

apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.html

@@ -9,7 +9,7 @@
         <!-- Project Logo -->
         @if (project()?.logo_url) {
           <div class="flex items-center justify-center mb-6">
-            <img [src]="project()?.logo_url" [alt]="project()?.name" class="w-auto h-20" />
+            <img [src]="project()?.logo_url" [alt]="project()?.name" class="w-auto h-10 md:h-20" />
           </div>
         }
 
@@ -68,7 +68,7 @@
           </div>
 
           <!-- Content Row: Title/Details + Join Button (if immediate) -->
-          <div class="flex justify-between items-start gap-6 mb-4">
+          <div class="flex flex-col md:flex-row justify-between items-start gap-6 mb-4">
             <!-- Left Column: Title + Details -->
             <div class="flex-1 flex flex-col gap-4 justify-between h-full">
               <div class="flex flex-col gap-4 h-full">
@@ -147,7 +147,7 @@ <h1 class="font-medium text-base text-neutral-950 leading-tight" [attr.data-test
             <!-- Right Column: Join Button (immediate meetings) or RSVP (future meetings) -->
             @if (canJoinMeeting()) {
               <!-- Join Button - Immediate Meeting -->
-              <div class="w-[296px]">
+              <div class="w-full md:w-[296px]">
                 <lfx-button
                   label="Join Meeting"
                   icon="fa-light fa-video"
@@ -163,7 +163,7 @@ <h1 class="font-medium text-base text-neutral-950 leading-tight" [attr.data-test
               </div>
             } @else if (authenticated() && meeting().organizer) {
               <!-- RSVP Details - Future Meeting (Authenticated Organizers) -->
-              <div class="w-[296px] flex flex-col gap-3">
+              <div class="w-full md:w-[296px] flex flex-col gap-3">
                 <lfx-meeting-rsvp-details
                   [meeting]="meeting()"
                   [project]="project()"
@@ -190,7 +190,7 @@ <h1 class="font-medium text-base text-neutral-950 leading-tight" [attr.data-test
               </div>
             } @else if (authenticated()) {
               <!-- RSVP Container - Future Meeting (Authenticated Non-Organizers) -->
-              <div class="w-[296px]">
+              <div class="w-full md:w-[296px]">
                 <lfx-rsvp-button-group [meeting]="meeting()" [occurrenceId]="currentOccurrence()?.occurrence_id"> </lfx-rsvp-button-group>
               </div>
             }
@@ -270,9 +270,9 @@ <h3 class="text-gray-600 text-sm font-normal">Resources</h3>
             <div class="flex flex-col gap-3">
               <p class="text-sm text-neutral-950">I am signed in as:</p>
 
-              <div class="bg-blue-50 border border-blue-500/50 rounded px-3 py-2 flex items-center gap-3">
+              <div class="bg-blue-50 border border-blue-500/50 rounded px-3 py-2 flex flex-wrap items-center gap-3">
                 <!-- Avatar -->
-                <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center">
+                <div class="hidden md:flex w-12 h-12 bg-blue-600 rounded-full items-center justify-center">
                   <span class="text-white text-2xl font-medium">{{ (user.name || 'User').substring(0, 2).toUpperCase() }}</span>
                 </div>
 
@@ -293,7 +293,7 @@ <h3 class="text-gray-600 text-sm font-normal">Resources</h3>
             <!-- Signed Out State -->
             <div class="flex flex-col gap-6">
               <!-- Sign In CTA -->
-              <div class="bg-blue-50 border border-blue-500/50 rounded px-3 py-2 flex items-center justify-between gap-3">
+              <div class="bg-blue-50 border border-blue-500/50 rounded px-3 py-2 flex flex-wrap items-center justify-between gap-3">
                 <div class="flex items-center gap-3">
                   <i class="fa-light fa-arrow-right-to-bracket text-blue-600 text-2xl"></i>
                   <div>
@@ -302,7 +302,14 @@ <h3 class="text-gray-600 text-sm font-normal">Resources</h3>
                   </div>
                 </div>
 
-                <lfx-button size="small" label="Sign In" icon="fa-light fa-arrow-right-to-bracket" severity="info" [href]="'/login?returnTo=' + returnTo()">
+                <lfx-button
+                  class="w-full md:w-auto"
+                  styleClass="w-full md:w-auto"
+                  size="small"
+                  label="Sign In"
+                  icon="fa-light fa-arrow-right-to-bracket"
+                  severity="info"
+                  [href]="'/login?returnTo=' + returnTo()">
                 </lfx-button>
               </div>
 
@@ -317,7 +324,7 @@ <h3 class="text-gray-600 text-sm font-normal">Resources</h3>
 
                 <form [formGroup]="joinForm" class="flex flex-col gap-4">
                   <!-- Name + Email Row -->
-                  <div class="flex gap-4">
+                  <div class="flex flex-col md:flex-row gap-4">
                     <div class="flex-1">
                       <label class="flex items-center gap-1 text-xs text-blue-900 mb-2">
                         <i class="fa-light fa-user text-gray-600"></i>
@@ -369,8 +376,10 @@ <h3 class="text-gray-600 text-sm font-normal">Resources</h3>
                   </div>
 
                   <!-- Submit Button -->
-                  <div class="flex justify-end">
+                  <div class="flex justify-end md:justify-center">
                     <lfx-button
+                      class="w-full md:w-auto"
+                      styleClass="w-full md:w-auto"
                       size="small"
                       label="Join Meeting"
                       icon="fa-light fa-arrow-right-to-bracket"