Refactor for Text Overflow

[Aokijiop]

Description

• There are various places in our code that are not able to responsively account for text overflow, causing issues in formatting
• Here are the files you will need to adjust for your task:
  • Navbar
    • The volunteer/admin's name
  • EventCard which is used in Home and Current Events pages
    • The event's name
  • EventsTable in Past Events page
    • The event's name
  • DummyProfilePage which is the profile page displayed when the profile is pressed from the Navbar
    • Specifically the card with the name that appears on the left
    • For both admin and volunteer side!
  • Volunteers which is the Volunteers page
    • Positions 2 and 3 on the leaderboard
  • VolunteersTable which is displayed in the Volunteers page
    • The volunteers' names
  • QRCodePage which is accessible by clicking Scan QR on the Navbar from a volunteer account
    • The volunteer's name
• How to accommodate for overflow:
  • Accounting for text overflow typically involves using a combination of these CSS props
    • overflow: hidden which hides any text that overflows
    • white-space: nowrap which ensures any text stays within one line instead of creating a new one
    • text-overflow: ellipsis which appends "..." at the end of overflowing text to indicate that it's cut off
  • Keep in mind that if the box containing the text is something such as a flex (Or anything really that stretches to fit the content), you will need to set a max width on the box in order to prevent the box from infinitely stretching to accommodate the text which forces the text to overflow and allows your CSS props to cut the text off and format it properly
    • Keep in mind that if you do set a max width, you should use breakpoints to set the max-width because pages will have both mobile and desktop views!
    • It's highly recommended you test the pages with the screen dimensions set to a phone, iPad, and desktop in order to ensure that the overflow is handled properly across all views

Acceptance Criteria

• The listed files have been modified to account for text overflow
• When max width had to be specified, breakpoints were utilized to accommodate for different screen dimensions including phone, iPad, and desktop

Resources

• Chakra UI Breakpoints Doucmentation