Long descriptions break layout in templates

[simon5057]

Long descriptions break layout in templates

Long-form desc values cause overflow, overlapping content, and extreme SVG auto-scaling in these built-in templates:

• chart-pie-compact-card
• quadrant-simple-illus
• list-grid-candy-card-lite

This is likely a systemic layout problem, not three isolated templates. We see the same failure pattern across most diagrams that render unbounded desc text: fixed item heights, sizing from only the first item, and structures that assume all items share identical bounds. The three templates below are representative, independently reproducible examples.

Screenshots

chart-pie-compact-card

quadrant-simple-illus

list-grid-candy-card-lite

Reproduction inputs

chart-pie-compact-card

infographic chart-pie-compact-card
data
  title Annual Recurring Revenue Growth Over Four Consecutive Years
  values
    - label Fiscal Year 2021
      value 120
      desc Revenue during the initial launch year as the product found early adopters and the team validated core assumptions about pricing, packaging, and the primary use cases that resonated most strongly with the first customer cohort.
    - label Fiscal Year 2022
      value 185
      desc Growth accelerated as word-of-mouth referrals increased and the sales team expanded into adjacent market segments, while improvements to onboarding reduced early churn and lifted net revenue retention above one hundred percent.
    - label Fiscal Year 2023
      value 260
      desc A breakout year driven by the launch of the enterprise tier, several strategic partnerships, and international expansion into three new regions, all of which contributed to a substantial increase in both new bookings and expansion revenue.
    - label Fiscal Year 2024
      value 340
      desc Continued momentum from a maturing product suite and a growing base of multi-year contracts, combined with disciplined cost management, pushed both revenue and profitability to record levels for the company.
    - label Fiscal Year 2025
      value 430
      desc The current year is tracking ahead of plan thanks to strong pipeline conversion, successful upsell motions into the installed base, and the early success of a new complementary product line that opens an additional growth vector.

quadrant-simple-illus and list-grid-candy-card-lite

infographic quadrant-simple-illus
data
  title Project Prioritization Matrix Effort Versus Impact
  compares
    - label High Impact Low Effort Quick Wins
      desc These initiatives deliver substantial value with minimal investment and should be executed immediately. They build momentum, demonstrate progress to stakeholders, and free up capacity for larger undertakings by producing visible results in a short timeframe.
    - label High Impact High Effort Major Projects
      desc Strategic bets that require significant time and resources but promise transformative outcomes. These should be planned carefully, staffed with senior team members, and broken into milestones so progress can be tracked and risk managed over their longer duration.
    - label Low Impact Low Effort Fill-In Tasks
      desc Small improvements that can be scheduled around larger priorities when spare capacity exists. While individually modest, collectively they improve quality and morale, but they should never displace work that delivers meaningful strategic value.
    - label Low Impact High Effort Money Pits
      desc Initiatives that consume substantial resources while returning little measurable benefit. These should be avoided, deprioritized, or redesigned, since pursuing them drains budget and attention away from opportunities that would genuinely move the business forward.

infographic list-grid-candy-card-lite
data
  title Strategic Product Launch Roadmap and Market Entry Plan
  desc This comprehensive roadmap outlines the phased approach our team will follow to bring the new product to market. It covers initial research, development milestones, beta testing with early adopters, and the final public launch. Each stage builds on the previous one to reduce risk and ensure alignment across engineering, marketing, and sales teams throughout the entire release cycle.
  lists
    - label Discovery and Market Research Phase
      desc We begin by analyzing competitor offerings, interviewing potential customers, and validating the core problem our product aims to solve. This research shapes the feature set and ensures we build something users genuinely need before committing significant engineering resources to development.
    - label Design and Prototyping Phase
      desc Our design team creates wireframes, interactive prototypes, and high-fidelity mockups based on the research findings. We conduct usability testing sessions with target users to refine the experience, iterate on feedback, and lock down the final interface before any production code is written.
    - label Development and Iteration Phase
      desc Engineering builds the product in two-week sprints with continuous integration and regular demo sessions. Stakeholders review progress at the end of each sprint, allowing the team to course-correct early and incorporate feedback without derailing the overall timeline or budget.
    - label Beta Testing and Refinement Phase
      desc We invite a select group of early adopters to use the product in real-world scenarios and report bugs, usability issues, and feature requests. Their feedback drives a focused round of polishing and hardening that prepares the product for a stable, reliable public release.
    - label Public Launch and Growth Phase
      desc The marketing team executes a coordinated launch across multiple channels including press, social media, and partner networks. Post-launch, we monitor adoption metrics closely and plan follow-up releases that expand the feature set based on real user behavior and demand.

Actual behavior

1. chart-pie-compact-card

   • Description text renders outside compact-card backgrounds.
   • Labels overlap adjacent labels and connector lines.
   • The SVG height does not account for the full stack of variable-height cards.

2. quadrant-simple-illus

   • Long descriptions extend beyond their illustration item area and cross the quadrant axes.
   • The structure uses the first item’s bounds rather than the maximum bounds across all four items.

3. list-grid-candy-card-lite

   • Description text exceeds the fixed card height and overlaps the next row.
   • Grid row/column dimensions are calculated from the first item only.
   • The oversized text bounds lead to a very small auto-fitted diagram.

Expected behavior

All text should remain inside its item/card, grid rows should be spaced using the tallest item in each row, and the generated SVG should grow to fit content without overlap or excessive scaling.

Responsive-layout expectation

Templates should be responsive to both content length and output size:

• Measure each item’s actual rendered bounds, rather than assuming the first item represents every item.
• Expand card, row, column, quadrant, and SVG dimensions when descriptions wrap.
• Reflow or widen items within sensible limits to avoid narrow, excessively tall text blocks.
• Preserve readable text size and avoid auto-fitting the entire diagram into an unreadably small result.
• Keep cards, labels, connectors, illustrations, and axes inside the SVG viewport without overlap or clipping.

This responsive behavior should apply consistently across built-in templates, especially templates that accept unbounded label or desc content.

Suggested implementation

• Measure every rendered item rather than only item 0.
• Make compact-card, simple-illus, and candy-card-lite heights content-aware.
• For pie labels, use each measured card height in collision distribution and compute canvas height from the largest label stack.
• For quadrants, use the maximum measured width/height across the four items.
• For grids, compute per-row maximum heights and per-column maximum widths before positioning items and action controls.

Regression coverage

Please add SSR/layout tests using multi-line descriptions for all three templates, asserting:

• no text/card overflow,
• no inter-item overlap,
• sufficient SVG dimensions,
• all supplied labels remain present.