Skip to content

fix(login-ui): resolve text overflow issue on mobile screens

POORNA CHANDRA SAI TEJA KUMPATLA requested to merge fix-ui-for-login-page into develop

Overview

This MR fixes the text overflow issue in the login page on smaller screen sizes (mobile view). Previously, certain text elements extended beyond their container, breaking the UI and affecting readability. This change ensures proper text wrapping and improves overall responsiveness.

What does this MR do and why?

  • The login page had a responsive UI issue where long text did not wrap correctly on smaller viewports (320px / 375px).

  • This caused layout breakage and poor user experience for mobile users.

  • The fix ensures:

    • Proper text wrapping
    • No overflow outside container
    • Improved readability across devices

Approach:

  • Updated CSS styles to handle overflow
  • Applied responsive design fixes (flexibility instead of fixed widths)
  • Ensured text wraps correctly using modern CSS properties

Changes Made

  • Modified login page styles to fix overflow
  • Added responsive text wrapping
  • Improved container layout for smaller screens

Technical Details

  • Root Cause: Text elements lacked proper wrapping rules and containers had constrained widths without overflow handling.

  • Fix Applied:

    • Added overflow-wrap: break-word;
    • Ensured responsive container widths
    • Adjusted spacing and layout for smaller screens

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • 🎨 UI/UX improvement

Related Issues / References

Screenshots or Screen Recordings

Before

login page

After

login page

How to Set Up and Validate Locally

  1. Checkout this branch:

    git checkout fix-ui-for-login-page

  2. Install dependencies:

    npm install

  3. Run the app:

    npm run dev

  4. Open:

    http://localhost:5173/login

  5. Test:

    • Enable responsive mode in browser
    • Check at 320px / 375px
    • Verify no text overflow

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Mobile view (375px) Text wraps properly ✅
Small screen (320px) No overflow ✅
Desktop view No UI break ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions
  • No console.log() left
  • No unused code
  • No duplicate code
  • i18n check passed
  • ESLint/Prettier checks pass

React Best Practices

  • Proper component structure
  • No unnecessary re-renders
  • Clean state handling

Component Patterns

  • Responsive design implemented
  • Tailwind/CSS used properly
  • UI consistent across devices

Documentation

  • CHANGELOG.md updated (if required)

Known Limitations / Technical Debt

  • None identified

Additional Notes

  • Issue identified during responsive testing
  • Fix ensures better mobile usability

Merge request reports