[🐞 BUG]: [Enhancement] Participant Test Interface is Not Mobile-Responsive

[RAJVEER42]

Description 📝

The participant-facing test session UI does not render correctly on mobile
devices. Since RUXAILAB supports remote usability testing, participants
should be able to complete studies from any device including phones and
tablets. Layout breaks, buttons are hard to tap, and horizontal scrolling
occurs on small screens.

Link 🔗

https://ruxailab-prod.web.app

Steps to Reproduce 🔄

1. Open https://ruxailab-prod.web.app in a browser
2. Open Chrome DevTools → Toggle Device Toolbar (Ctrl+Shift+M)
3. Select a mobile device preset (e.g. iPhone SE — 375px width)
4. Navigate to the participant test session view
5. Observe broken layout, overflowing elements, and unusable touch targets

Screenshots 📸

[Please test on your end using Chrome DevTools device emulation and
attach screenshots. I will add mine once assigned.]

Expected Behavior 🤔

The participant interface should render cleanly and be fully usable on
mobile screen sizes (375px and above). Touch targets should be at least
44x44px per WCAG 2.5.5. No horizontal scrolling should occur.

Actual Behavior 😱

Layout breaks on screens smaller than 768px. Buttons and input fields
overflow or are too small to tap. Horizontal scrolling appears on
certain views. The interface is effectively unusable on mobile.

Environment 🌍

• Platform: Browser (Chrome DevTools Mobile Emulation)
• Screen sizes affected: 375px (iPhone SE), 390px (iPhone 14), 768px (iPad)
• Framework: Vue.js (as per repo stack)
• Repo: RUXAILAB/RUXAILAB
• Branch: main
• Affected area: Participant-facing test session views

Additional Information ℹ️

I am interested in contributing this fix as part of GSoC 2026.
I can begin with a full audit of all participant-facing views using
Chrome DevTools and submit incremental PRs per view if that's preferred.
Happy to discuss scope on Discord or in this thread before starting.

[arya23923]

May I be assigned this issue?

[thechillbasu]

Hey @RAJVEER42 @arya23923 Issues are not formally assigned here. Feel free to open issues and raise PRs once you are done working on any issue. The best PR will be merged by the maintainers. Just leave out the issues labeled as "admin-issue" as they are only for the maintainers to solve. All the best! :)

[krish01info]

Hi! I’ve been testing the participant and related UI at mobile breakpoints (375px using Chrome DevTools) and wanted to share a few additional observations I found during testing.

In addition to the issues mentioned above, I noticed:

On mobile (375px), the “Read Documentation” tab shows a hamburger menu, but it doesn’t contain any navigation or open any content. This can be misleading on small screens where the navbar is a primary navigation element of the ruxailab.

In the Session tab, some text blocks overflow outside their containers at 375px, causing layout breakage and reduced readability.

On the main dashboard, the Active Studies Overview section does not fully adapt to small screen widths and can overflow its container.

The Recent Activity (“coming soon”) text on the dashboard could use better wrapping and alignment for mobile screens.

I’m planning to include fixes for the participant/session-related mobile layout issues in my PR and will keep the scope focused. Happy to adjust based on maintainer feedback