Description

The statistics cards on the homepage are displaying truncated text with ellipses, preventing users from reading the complete descriptions of each statistic.

Current Behavior

The statistics cards show truncated text instead of the full content:

• Summary grid cards (horizontal row of 6 cards at the bottom) display:

  • "Kids whose l..." instead of "Kids whose lives have been enriched by using the Sugar Learning Platform."
  • "Projects for..." instead of "Projects for teaching and learning created by Sugar Labs students and teachers."
  • "Problem-solv..." instead of "Problem-solving tasks completed by students ages 13-17."
  • "Activities D..." instead of "Activities Downloaded"
  • "Languages ou..." instead of "Languages our educational software has been translated into"
  • "Mentors help..." instead of "Mentors helping youth learn in programs like Google Code-In (GCI) and Google Summer of Code"

• Grid cards (larger cards above) also have text cut off due to fixed height constraints

Expected Behavior

All statistics cards should display the complete text descriptions, allowing users to read the full information about each statistic. The text should wrap to multiple lines if needed to accommodate the full content.

Steps to Reproduce

1. Navigate to the homepage (MainPage)
2. Scroll to the statistics section
3. Observe the bottom row of 6 statistics cards
4. Notice that the text descriptions are truncated with ellipses

Technical Details

The issue appears to be caused by:

1. Manual text truncation logic limiting titles to 12 characters
2. Fixed height constraints on cards
3. Single-line text clamping (line-clamp-1)

Impact

• User Experience: Users cannot read complete information about statistics
• Accessibility: Truncated text reduces accessibility
• Information Clarity: Important context is hidden from users

Proposed Solution

1. Remove manual truncation logic (substring(0, 12))
2. Increase line-clamp from 1 to 2-3 lines to allow text wrapping
3. Adjust card padding and height to accommodate multi-line text
4. Ensure responsive design works across all screen sizes
   as shown below