Streak Functionality & Category Display Issues (Home/Profile/Record Modal)

🐞 Bug Report

Summary: Multiple issues identified in the application: (1) Streak functionality displaying inconsistently between Home and Profile pages due to API data structure mismatch, and (2) Categories display being cut off in the Record Details modal with text truncation and overflow issues.

---

Steps to Reproduce:

Issue 1: Streak Not Working on Home Page

1. Go to Home page
2. Navigate to Profile page
3. Compare the streak values displayed on both pages for the same user
4. Notice streak is not displaying correctly or shows inconsistent values
5. Check the UserStatsSummary component on Home page vs ContributionDashboard on Profile page

Issue 2: UI Issue - Categories Cutoff in Record Details

1. Go to Profile page
2. Click on any record in the contribution list
3. RecordDetails modal opens showing record information
4. Scroll down to the "Categories" section
5. Observe that category tags are being cut off or truncated with text overflow

---

Expected Behavior:

Issue 1: Streak Consistency

• Streak value should be consistent and accurate on both Home page and Profile page
• Should display the current streak from the backend API response (streaks.combined_streak.current)
• Both Home page (UserStatsSummary) and Profile page (ContributionDashboard) should show the same streak value

Issue 2: Categories Display

• All category tags should be fully visible within the modal
• Categories should have appropriate wrapping and scrolling if there are many categories
• Text should not be truncated and the modal should have sufficient padding and width to display all category information clearly

Actual Behavior:

Issue 1: Streak Not Working

• Home page uses: user.streaks?.combined_streak?.current (from useAuth hook fetching /users/{userId}/profile?include=streaks,timeline,summary)
• Profile page uses: profile?.streaks?.combined_streak?.current (from same endpoint)
• Streak data is not being properly synchronized or calculated between components
• ContributionDashboard.tsx (Line 23) expects streak_days in DailyStats interface but Profile.tsx passes streaks.combined_streak.current causing API mismatch

Issue 2: Categories Cutoff Issue

• Categories section in RecordDetails.tsx (line 728-763) has limited container width
• CategoryTags component uses max-w-xs truncate classes which causes text overflow
• The modal container may have max-width constraints that don't accommodate longer category names
• Category tags are wrapped in a flex container without proper overflow handling

---

Screenshots/Logs:

Issue 1: API Endpoint & Data Structure Mismatch

Files Affected:

• src/components/UserStatsSummary.tsx - Gets streak from user.streaks?.combined_streak?.current
• src/pages/Profile.tsx - Gets streak from profile?.streaks?.combined_streak?.current
• src/components/ContributionDashboard.tsx - DailyStats interface expects streak_days field

Expected API Response Format:

{
  "streaks": {
    "combined_streak": {
      "current": <number>,
      "longest": <number>,
      "total_active_days": <number>
    }
  },
  "summary": {
    "contributions": {...},
    "edits": {...},
    "overall": {...}
  }
}

Code Inconsistency:

• ContributionDashboard receives: dailyStats.streak_days but should receive streaks.combined_streak.current
• Profile.tsx Line 1616 passes: streak_days: profile?.streaks?.combined_streak?.current || 0
• This mapping works but is inconsistent with API data structure
• Issue 2: Categories Display Cutoff
• Location Affected: src/pages/RecordDetails.tsx

HTML Structure Issue:

• Categories section wrapped in pt-3 border-t border-gray-100 div with limited width
• CategoryTags component called without overflow container
• src/components/CategoryTags.tsx uses max-w-xs truncate which truncates long category names

Required Fixes:

• Increase max-width constraints on modal or categories container
• Implement scrollable categories container for overflow handling
• Add responsive breakpoints for mobile/smaller screens (sm: md: lg:)
• Replace truncate with proper flex wrapping on category tag display
• Ensure category tags maintain readability on all screen sizes