Astro CSS grid cards overflow on mobile due to unbreakable long titles

Working with Astro 5.15.4 to fix responsive grid layout issues in the ResolvedPreview.astro component, where CSS Grid cards refused to shrink below the width of long unbreakable title text, causing horizontal overflow on mobile viewports.

Issue

The /work2 page’s responsive grid layout broke on tablet/mobile viewports when card titles contained long unbreakable words (e.g., technical terms, file paths, or error messages). Cards extended beyond the viewport width because:

• CSS Grid columns sized based on min-content width of the longest unbreakable string
• Titles remained on a single line even when container width was insufficient
• Horizontal scrolling appeared on mobile devices (widths < 768px)
• The issue manifested as cards refusing to wrap or shrink below the width of their longest word

Culprit

Incomplete CSS text-wrapping properties in the .title class (lines 73-81 of ResolvedPreview.astro). The existing implementation used only legacy and modern equivalents of the same limited behavior:

.title {
  word-wrap: break-word;      /* Only breaks at natural break points */
  overflow-wrap: break-word;  /* Modern equivalent, same limitation */
}

Root cause mechanism:

1. word-wrap/overflow-wrap: break-word only breaks at spaces/hyphens - not mid-word
2. Long technical terms (e.g., ErrorInDataProcessingPipeline) or file paths (e.g., /var/log/system/long-filename.log) contain no natural break points
3. CSS Grid’s default minmax(min-content, 1fr) sizing forced columns to match the longest unbreakable string
4. Missing word-break: break-word which enables mid-word breaking when no natural break points exist

Solution

Added word-break: break-word to create a three-layer text breaking strategy in ResolvedPreview.astro (line 78):

.title {
  word-wrap: break-word;      /* Legacy: breaks at word boundaries */
  overflow-wrap: break-word;  /* Modern: breaks at word boundaries */
  word-break: break-word;     /* NEW: breaks anywhere in word if needed */
}

Technical Implementation Details

1. Layered Approach:

   • overflow-wrap: break-word (modern standard) + word-wrap: break-word (legacy support) handle normal word breaking
   • word-break: break-word acts as fallback for unbreakable strings

2. CSS Grid Interaction:

   • Cards now respect minmax(0, 1fr) sizing by breaking long words
   • Container queries remain unaffected as breaking happens at render time

3. Compatibility:

   • Works across all modern browsers (Chrome, Firefox, Safari, Edge)
   • Graceful degradation: older browsers get word-boundary breaking only

Results

• Mobile: No horizontal overflow; cards wrap at 100% container width
• Tablet: Grid maintains 2-3 columns with proper word breaking
• Desktop: Unchanged behavior for normal-length titles
• Edge Cases: Technical terms like ErrorInDataProcessingPipeline now break as ErrorInDataProce-|ssingPipeline when needed

Performance Impact: Zero - pure CSS solution with no JavaScript or layout recalculations.