fix(ui): mobile responsive for meeting join page

[asithade]

This pull request updates the layout and responsiveness of the meeting join page to improve usability on both mobile and desktop devices. The most important changes focus on making key UI components adapt to different screen sizes, ensuring a better experience for users across devices.

Responsive layout improvements:

• The main content row now uses a column layout on mobile and switches to a row layout on larger screens, making the interface more readable and accessible.
• The width of action containers (Join Meeting, RSVP details, and RSVP button group) is now full-width on mobile and fixed width on desktop, ensuring buttons and forms are easy to interact with on smaller screens. [1] [2] [3]

Visual adjustments:

• The project logo size is now smaller on mobile and larger on desktop, optimizing the use of space and maintaining visual balance.
• The user info card now allows wrapping of its contents for better display on mobile, and the avatar is hidden on mobile to save space.

[coderabbitai]

Walkthrough

Updated the meeting-join component template to adopt responsive Tailwind layouts: logo sizing, container widths, avatar visibility, and form/button wrappers now adapt between single-column (mobile) and multi-column (md+) breakpoints.

Changes

Cohort / File(s)	Summary
Responsive Meeting Join Layout apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.html	Converted main row to responsive column/row (flex-col md:flex-row); changed logo from h-20 to h-10 md:h-20; replaced fixed w-[296px] wrappers with w-full md:w-[296px]; added flex-wrap for resources; toggled avatar visibility with hidden md:flex; updated guest/sign-in form and button containers to be full-width on small screens and fixed width on md+.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Check responsive class correctness and breakpoint behavior (mobile vs md+).
• Verify avatar/sign-in visibility and button width transitions.
• Quick visual test across small, md, and larger viewports.

Possibly related PRs

• fix(meeting-join): prevent infinite auto-join loop and ensure new tab… #123 — Modifies the same meeting-join component and join/RSVP block rendering/layout.
• style(meetings): enhance login button visibility with brand colors #124 — Alters the Sign In control within meeting-join, affecting related button styling/placement.

Suggested labels

deploy-preview

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(ui): mobile responsive for meeting join page' clearly and concisely describes the main change: making the meeting join page mobile responsive.
Description check	✅ Passed	The description is well-related to the changeset, detailing the responsive layout improvements and visual adjustments made to the meeting join page for mobile and desktop.
Linked Issues check	✅ Passed	The pull request directly addresses LFXV2-742 by implementing mobile responsive behavior fixes for the meeting join page, matching the linked issue's objective.
Out of Scope Changes check	✅ Passed	All changes in the pull request are scoped to the meeting join page's responsive layout and styling, with no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/LFXV2-742

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 829818f and 6adf459.

📒 Files selected for processing (1)

• apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.html (10 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-21T21:19:13.599Z

Learnt from: andrest50
Repo: linuxfoundation/lfx-v2-ui PR: 125
File: apps/lfx-one/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts:345-350
Timestamp: 2025-10-21T21:19:13.599Z
Learning: In the Angular meeting card component (apps/lfx-one/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts), when selecting between `summary.summary_data.edited_content` and `summary.summary_data.content`, the logical OR operator (`||`) is intentionally used instead of nullish coalescing (`??`) because empty string edited_content should fall back to the original content rather than being displayed as empty.

Applied to files:

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

🔇 Additional comments (1)

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

12-12: Responsive design implementation looks solid.

The layout changes consistently apply Tailwind responsive breakpoints (mobile-first w-full → md:w-[296px], flex-col → md:flex-row, hidden → md:flex) across the page sections. Containers adapt appropriately: fixed-width sections on desktop, full-width on mobile for better thumb-friendly interaction. Form fields (lines 327–360) properly stack vertically on mobile and side-by-side on md+. Avatar hiding (line 275) is space-efficient for small screens while preserving user identification through text.

Minor note: Line 379's justify-end is redundant when the button below (line 381) is w-full on mobile, since the button fills the container anyway. It does no harm, but could be simplified to just justify-center on both breakpoints if centering is the intent. On desktop (md+), the current setup works fine with the w-auto button.

Also applies to: 71-71, 150-150, 166-166, 193-193, 227-227, 273-273, 296-296, 305-313, 327-327, 379-392

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull Request Overview

This PR enhances the mobile responsiveness of the meeting join page by implementing adaptive layouts and component sizing for different screen sizes. The changes ensure a better user experience on mobile devices while maintaining the desktop layout.

• Implements responsive flex layouts that stack vertically on mobile and horizontally on desktop
• Adjusts component widths to be full-width on mobile and fixed-width on desktop for better touch interaction
• Optimizes visual elements (logo size, avatar visibility) based on screen size

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.