spikerj/spikersoft-issues
1
0
Fork 0
Code Issues 196 Pull Requests Actions Packages Projects Releases Wiki Activity

Sponsor family card UI/UX: spotlight bio clipped, duplicate family-page link, broken narrow-lane/mobile layout #878

New Issue
Closed
opened 2026-07-28 01:49:14 +00:00 by spikerj · 0 comments
spikerj commented 2026-07-28 01:49:14 +00:00
Owner
Copy Link
Copy Source

Three UI/UX issues on app-sponsor-family-card (spikersoft-angular, feature-sponsor-cards lib):

  1. Spotlight bio gets cut off — .spotlight-bio has no wrap/clamp handling. Long content (especially unbroken tokens) forces the #752 spotlight panel wider than the card at two-column widths (grid items default min-width: auto) and the card's overflow: hidden clips it instead of flowing to the next line.
  2. Two links to the family page — the FAMILY pill (.family-badge, with mat tooltip) above the family name and the "View Family Profile" button both link to /sponsor/family/{familyKey}. The pill should be removed.
  3. Responsive layout keyed to the wrong thing — the card uses viewport media queries but its width comes from context: ~360-440px in the landing dashboard's horizontal scroller, ~2 grid tracks on /sponsor. On desktop landing (>900px viewport) the two-column content grid gets crammed into the ~400px lane; on phones the dashboard pins the card at min-width: 360px (the 768/480 dashboard breakpoints only shrink the solo .sponsor-card), so there is no good mobile view of the newer family info.

Fix direction: convert the card's responsive SCSS to container queries (container-type: inline-size), wrap + 6-line-clamp the spotlight bio, drop the pill (and its orphaned sponsor.family.badge/meetFamily i18n keys), and size the dashboard lane with width: min(440px, 100%).

Three UI/UX issues on `app-sponsor-family-card` (spikersoft-angular, feature-sponsor-cards lib): 1. **Spotlight bio gets cut off** — `.spotlight-bio` has no wrap/clamp handling. Long content (especially unbroken tokens) forces the #752 spotlight panel wider than the card at two-column widths (grid items default `min-width: auto`) and the card's `overflow: hidden` clips it instead of flowing to the next line. 2. **Two links to the family page** — the FAMILY pill (`.family-badge`, with mat tooltip) above the family name and the "View Family Profile" button both link to `/sponsor/family/{familyKey}`. The pill should be removed. 3. **Responsive layout keyed to the wrong thing** — the card uses viewport media queries but its width comes from context: ~360-440px in the landing dashboard's horizontal scroller, ~2 grid tracks on /sponsor. On desktop landing (>900px viewport) the two-column content grid gets crammed into the ~400px lane; on phones the dashboard pins the card at `min-width: 360px` (the 768/480 dashboard breakpoints only shrink the solo `.sponsor-card`), so there is no good mobile view of the newer family info. Fix direction: convert the card's responsive SCSS to container queries (`container-type: inline-size`), wrap + 6-line-clamp the spotlight bio, drop the pill (and its orphaned `sponsor.family.badge`/`meetFamily` i18n keys), and size the dashboard lane with `width: min(440px, 100%)`.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
agentic
Actionable surfaced by the agentic architecture & security review
 bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 sonarqube
Code quality issue surfaced by SonarQube (bug / code smell)
 wontfix
This won't be fixed
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
spikerj (Joseph Spiker)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#878