p19-bug-fixes

openspec/changes/p17-regression-defects/tasks.md

@@ -1,42 +1,42 @@
 ## 1. Playwright Foundation and Harness
 
-- [ ] 1.1 Add Playwright project setup (config, scripts, browser install, test directory layout).
-- [ ] 1.2 Implement shared fixtures for seeded app state, authless startup, and deterministic article data assumptions.
-- [ ] 1.3 Define viewport profiles (mobile/tablet/desktop) and theme profile helpers (light/dark/contrast).
-- [ ] 1.4 Add stable selector strategy for critical controls (role/test-id fallback rules) to reduce locator fragility.
+- [x] 1.1 Add Playwright project setup (config, scripts, browser install, test directory layout).
+- [x] 1.2 Implement shared fixtures for seeded app state, authless startup, and deterministic article data assumptions.
+- [x] 1.3 Define viewport profiles (mobile/tablet/desktop) and theme profile helpers (light/dark/contrast).
+- [x] 1.4 Add stable selector strategy for critical controls (role/test-id fallback rules) to reduce locator fragility.
 
 ## 2. Capability Coverage Matrix and Strategy
 
-- [ ] 2.1 Create capability-to-test mapping document covering all current OpenSpec UI-facing capabilities.
-- [ ] 2.2 Define scenario taxonomy (journey, accessibility-state, responsive, modal, microinteraction, deep-link).
-- [ ] 2.3 Define smoke vs full regression profiles and execution criteria per CI stage.
+- [x] 2.1 Create capability-to-test mapping document covering all current OpenSpec UI-facing capabilities.
+- [x] 2.2 Define scenario taxonomy (journey, accessibility-state, responsive, modal, microinteraction, deep-link).
+- [x] 2.3 Define smoke vs full regression profiles and execution criteria per CI stage.
 
 ## 3. Core Journey and Modal Flows
 
-- [ ] 3.1 Implement Playwright scenarios for hero/feed browsing and summary modal open/close across entry paths.
-- [ ] 3.2 Add deep-link permalink tests validating valid, invalid, and hero-origin modal flows.
-- [ ] 3.3 Add source CTA/share/copy interaction tests in modal and verify non-breaking navigation behavior.
+- [x] 3.1 Implement Playwright scenarios for hero/feed browsing and summary modal open/close across entry paths.
+- [x] 3.2 Add deep-link permalink tests validating valid, invalid, and hero-origin modal flows.
+- [x] 3.3 Add source CTA/share/copy interaction tests in modal and verify non-breaking navigation behavior.
 
 ## 4. Accessibility and Interaction State Regression
 
-- [ ] 4.1 Implement keyboard-navigation and focus-visible assertions for primary interactive controls.
-- [ ] 4.2 Implement color-contrast/state assertions for text/link/control states across light/dark/contrast themes.
-- [ ] 4.3 Add icon-only control accessible-name assertions (share, copy, back-to-top, theme controls, modal actions).
-- [ ] 4.4 Add policy modal accessibility tests for open, escape-close, focus-return, and focus containment behavior.
+- [x] 4.1 Implement keyboard-navigation and focus-visible assertions for primary interactive controls.
+- [x] 4.2 Implement color-contrast/state assertions for text/link/control states across light/dark/contrast themes.
+- [x] 4.3 Add icon-only control accessible-name assertions (share, copy, back-to-top, theme controls, modal actions).
+- [x] 4.4 Add policy modal accessibility tests for open, escape-close, focus-return, and focus containment behavior.
 
 ## 5. Responsive and Footer Microinteractions
 
-- [ ] 5.1 Implement responsive regression tests for mobile/tablet/desktop ensuring no overflow/clipping on key surfaces.
-- [ ] 5.2 Add sticky header/footer and floating back-to-top behavior checks across breakpoints.
-- [ ] 5.3 Add footer contact-email tooltip tests for mouse hover/move/leave and keyboard focus/blur interactions.
-- [ ] 5.4 Add env-driven footer link rendering tests for present/absent GitHub/contact config combinations.
+- [x] 5.1 Implement responsive regression tests for mobile/tablet/desktop ensuring no overflow/clipping on key surfaces.
+- [x] 5.2 Add sticky header/footer and floating back-to-top behavior checks across breakpoints.
+- [x] 5.3 Add footer contact-email tooltip tests for mouse hover/move/leave and keyboard focus/blur interactions.
+- [x] 5.4 Add env-driven footer link rendering tests for present/absent GitHub/contact config combinations.
 
 ## 6. Quality Gate Integration and Reporting
 
-- [ ] 6.1 Integrate Playwright smoke suite into pull-request quality gate with fail-on-regression policy.
-- [ ] 6.2 Integrate full Playwright profile into main/nightly pipeline stage with artifact retention.
-- [ ] 6.3 Enable trace/screenshot/video capture on failure and expose artifact links in CI logs.
-- [ ] 6.4 Document triage workflow and ownership for UI/UX regression failures.
+- [x] 6.1 Integrate Playwright smoke suite into pull-request quality gate with fail-on-regression policy.
+- [x] 6.2 Integrate full Playwright profile into main/nightly pipeline stage with artifact retention.
+- [x] 6.3 Enable trace/screenshot/video capture on failure and expose artifact links in CI logs.
+- [x] 6.4 Document triage workflow and ownership for UI/UX regression failures.
 
 ## 7. Validation and Readiness
 

openspec/changes/p19-vj-defects/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-13

openspec/changes/p19-vj-defects/design.md

@@ -0,0 +1,64 @@
+## Context
+
+The current implementation uses Noto Sans Tamil and Noto Sans Malayalam fonts from Google Fonts. While these fonts provide good Unicode coverage, they have rough edges that users find visually unappealing. Additionally, on mobile viewports (≤640px), the hero block typography for these Indic languages is too large, causing the content to overflow and become partially invisible.
+
+The footer contact email tooltip is also not functioning as specified in the share-and-contact-microinteractions spec, which requires it to display randomized helper messages on hover and keyboard focus.
+
+## Goals / Non-Goals
+
+**Goals:**
+- Improve hero block mobile layout for Tamil and Malayalam content
+- Implement smoother, more visually pleasing Indic fonts
+- Fix footer contact email tooltip to display randomized helper messages
+- Ensure all changes maintain accessibility and performance standards
+
+**Non-Goals:**
+- Changing desktop layout (only mobile adjustments needed)
+- Modifying English or other language typography
+- Adding new languages beyond Tamil and Malayalam
+- Changing the tooltip message pool content (use existing safe messages)
+
+## Decisions
+
+### Decision 1: Reduce font sizes on mobile rather than increasing hero height
+- **Choice:** Reduce Tamil/Malayalam font sizes on mobile (≤640px) from 1.9rem/1.08rem to 1.6rem/0.95rem
+- **Why:** Increasing hero height would push feed content further down, reducing above-the-fold content visibility. Smaller fonts maintain content density while ensuring readability.
+- **Alternative considered:** Increasing hero block height to 350px on mobile. Rejected because it reduces the amount of feed content visible without scrolling.
+
+### Decision 2: Replace Noto Sans with Baloo fonts for Indic languages
+- **Choice:** Use Baloo 2 for Tamil and Baloo Chettan for Malayalam
+- **Why:** Baloo fonts are specifically designed for Indian languages with rounded, smooth letterforms that are visually pleasing. They maintain excellent readability at various sizes and have good Unicode support.
+- **Alternative considered:** Using system fonts or keeping Noto Sans. Rejected because Noto Sans has rough edges, and system fonts vary too much across devices.
+
+### Decision 3: Use font-display: swap for async loading
+- **Choice:** Load Indic fonts with font-display: swap strategy
+- **Why:** Ensures text remains visible during font loading, preventing layout shift and improving perceived performance.
+- **Alternative considered:** font-display: optional. Rejected because it might cause fonts to never load on slow connections.
+
+### Decision 4: Fix tooltip via Alpine.js state management
+- **Choice:** Ensure Alpine.js properly manages tooltip visibility state on contact email hover and focus
+- **Why:** The tooltip is already implemented in the footer but may not be triggering correctly due to event handling issues.
+- **Alternative considered:** Rewriting tooltip in vanilla JavaScript. Rejected because Alpine.js is already used throughout the application and provides cleaner reactive state management.
+
+## Risks / Trade-offs
+
+- **[Risk] Font loading may cause layout shift** → **Mitigation:** Use font-display: swap and ensure fallback fonts have similar metrics to minimize shift.
+- **[Risk] Smaller fonts may reduce readability for users with vision impairments** → **Mitigation:** Ensure minimum 14px font size and maintain WCAG AA contrast ratios. Users can zoom if needed.
+- **[Risk] Baloo fonts may not support all Tamil/Malayalam characters** → **Mitigation:** Test with comprehensive character sets and maintain Noto Sans as fallback in font stack.
+- **[Risk] Tooltip fix may affect other footer interactions** → **Mitigation:** Test all footer link interactions after fix and ensure focus management remains correct.
+
+## Migration Plan
+
+1. Update Google Fonts link to include Baloo 2 and Baloo Chettan
+2. Update CSS font-family declarations with new fallback chain
+3. Add mobile-specific CSS rules for Tamil/Malayalam font sizes
+4. Adjust hero image height on mobile
+5. Debug and fix footer tooltip Alpine.js state management
+6. Test across mobile devices and browsers
+7. Monitor performance metrics for font loading impact
+
+## Open Questions
+
+- Should we preload the Indic fonts to improve loading performance?
+- Do we need to adjust line-height along with font-size for optimal readability?
+- Are there specific Tamil/Malayalam text samples we should test with to ensure character coverage?

openspec/changes/p19-vj-defects/proposal.md

@@ -0,0 +1,27 @@
+## Why
+
+Indic language content (Tamil and Malayalam) is not rendering optimally on mobile devices and small viewports. The hero block typography is too large, causing layout issues where the top of the block becomes invisible. Additionally, the current Indic fonts have rough edges that are not visually pleasing. The footer contact email tooltip is also not functioning as specified.
+
+## What Changes
+
+- Adjust hero block responsive behavior for mobile/small viewports when displaying Tamil and Malayalam content
+- Reduce font sizes or increase hero block height for Indic languages on mobile devices
+- Research and implement smoother, more readable Indic font alternatives for Tamil and Malayalam
+- Fix footer contact email tooltip to display randomized helper messages on hover and keyboard focus
+- Ensure tooltip behavior matches share-and-contact-microinteractions specification
+
+## Capabilities
+
+### New Capabilities
+- `indic-language-mobile-optimization`: Responsive hero block adjustments for Tamil and Malayalam on mobile viewports
+- `indic-font-typography-improvement`: Smoother, more readable font selection for Indic languages
+
+### Modified Capabilities
+- `share-and-contact-microinteractions`: Fix contact email tooltip to display randomized helper messages as specified
+
+## Impact
+
+- Affected code: frontend CSS (hero block responsive styles), font loading/configuration
+- Affected systems: mobile user experience for Tamil and Malayalam speakers
+- Dependencies: Google Fonts or alternative Indic font sources
+- Operational impact: Improved readability and user experience for Indic language users on mobile devices

openspec/changes/p19-vj-defects/specs/indic-font-typography-improvement/spec.md

@@ -0,0 +1,32 @@
+## ADDED Requirements
+
+### Requirement: System uses smooth, readable Indic fonts
+The system SHALL use alternative Indic fonts that provide better readability and visual smoothness compared to the current Noto Sans Tamil and Noto Sans Malayalam fonts.
+
+#### Scenario: Tamil font is smooth and readable
+- **WHEN** Tamil content is displayed
+- **THEN** the font SHALL render with smooth edges without rough or pixelated appearance
+- **AND** the font SHALL maintain readability at various sizes (14px to 32px)
+- **AND** the font SHALL support all Tamil Unicode characters including conjuncts and ligatures
+
+#### Scenario: Malayalam font is smooth and readable
+- **WHEN** Malayalam content is displayed
+- **THEN** the font SHALL render with smooth edges without rough or pixelated appearance
+- **AND** the font SHALL maintain readability at various sizes (14px to 32px)
+- **AND** the font SHALL support all Malayalam Unicode characters including conjuncts and ligatures
+
+#### Scenario: Font loading is optimized
+- **WHEN** Indic fonts are loaded
+- **THEN** the fonts SHALL load asynchronously to prevent layout shift
+- **AND** a system font fallback SHALL display immediately while Indic fonts load
+- **AND** the font-display strategy SHALL be "swap" to ensure text remains visible
+
+#### Scenario: Font weights are available
+- **WHEN** Indic content requires different font weights
+- **THEN** at minimum regular (400) and bold (700) weights SHALL be available
+- **AND** the bold weight SHALL be visually distinguishable from regular
+
+#### Scenario: Font fallback chain is defined
+- **WHEN** Indic fonts fail to load or are not supported
+- **THEN** the system SHALL fall back through: preferred Indic font → Noto Sans [language] → system-ui → sans-serif
+- **AND** fallback fonts SHALL maintain similar character proportions to minimize layout shift

openspec/changes/p19-vj-defects/specs/indic-language-mobile-optimization/spec.md

@@ -0,0 +1,30 @@
+## ADDED Requirements
+
+### Requirement: Hero block adapts to Indic languages on mobile viewports
+The system SHALL adjust hero block typography and layout when displaying Tamil or Malayalam content on mobile devices to ensure full content visibility.
+
+#### Scenario: Tamil content on mobile viewport
+- **WHEN** the hero block displays Tamil content on a mobile viewport (width ≤ 640px)
+- **THEN** the hero block height SHALL increase to accommodate the larger text
+- **AND** the hero title font size SHALL be reduced from 1.9rem to 1.6rem
+- **AND** the hero summary font size SHALL be reduced from 1.08rem to 0.95rem
+- **AND** the entire hero content including headline and summary SHALL remain visible without clipping
+
+#### Scenario: Malayalam content on mobile viewport
+- **WHEN** the hero block displays Malayalam content on a mobile viewport (width ≤ 640px)
+- **THEN** the hero block height SHALL increase to accommodate the larger text
+- **AND** the hero title font size SHALL be reduced from 1.9rem to 1.6rem
+- **AND** the hero summary font size SHALL be reduced from 1.08rem to 0.95rem
+- **AND** the entire hero content including headline and summary SHALL remain visible without clipping
+
+#### Scenario: Hero image scales appropriately on mobile
+- **WHEN** the hero block is displayed on a mobile viewport (width ≤ 640px)
+- **THEN** the hero image height SHALL be reduced from 300px to 220px
+- **AND** the image SHALL maintain its aspect ratio
+- **AND** the image SHALL not overflow its container
+
+#### Scenario: Content remains readable after adjustments
+- **WHEN** typography adjustments are applied for mobile Indic content
+- **THEN** text SHALL remain legible with adequate line height (minimum 1.5)
+- **AND** text SHALL maintain sufficient contrast against background
+- **AND** touch targets SHALL remain at least 44px in height

openspec/changes/p19-vj-defects/specs/share-and-contact-microinteractions/spec.md

@@ -0,0 +1,14 @@
+## MODIFIED Requirements
+
+### Requirement: Contact affordance provides randomized safe microcopy
+The contact link SHALL present randomized, policy-safe helper messages to encourage feedback, including keyboard-triggered visibility for accessibility.
+
+#### Scenario: Randomized helper tooltip
+- **WHEN** user hovers or nears the contact affordance
+- **THEN** a tooltip-style helper message is shown from a predefined safe message pool
+- **AND** message language avoids profanity/offensive/racist/sexist/misogynistic content
+
+#### Scenario: Keyboard-triggered helper tooltip
+- **WHEN** a keyboard user focuses the contact email affordance
+- **THEN** helper tooltip content becomes visible and readable
+- **AND** tooltip dismisses cleanly on blur without trapping focus

openspec/changes/p19-vj-defects/tasks.md

@@ -0,0 +1,47 @@
+## 1. Font Implementation
+
+- [x] 1.1 Update Google Fonts link to include Baloo 2 and Baloo Chettan fonts
+- [x] 1.2 Update font-family CSS declarations with new Indic font stack
+- [x] 1.3 Add font-display: swap to prevent layout shift during font loading
+- [x] 1.4 Define font fallback chain: Baloo → Noto Sans → system-ui → sans-serif
+
+## 2. Mobile Hero Block Typography
+
+- [x] 2.1 Add CSS media query for mobile viewports (≤640px) with data-lang="ta" or data-lang="ml"
+- [x] 2.2 Reduce hero title font size from 1.9rem to 1.6rem for Tamil/Malayalam
+- [x] 2.3 Reduce hero summary font size from 1.08rem to 0.95rem for Tamil/Malayalam
+- [x] 2.4 Ensure minimum line-height of 1.5 for readability
+- [x] 2.5 Verify touch targets remain at least 44px in height
+
+## 3. Mobile Hero Block Layout
+
+- [x] 3.1 Reduce hero image height from 300px to 220px on mobile
+- [x] 3.2 Ensure image maintains aspect ratio and doesn't overflow container
+- [x] 3.3 Verify entire hero content (headline + summary) is visible without clipping
+- [ ] 3.4 Test hero block on actual mobile devices (iOS Safari, Android Chrome)
+
+## 4. Footer Tooltip Fix
+
+- [x] 4.1 Debug Alpine.js tooltip state management for contact email link
+- [x] 4.2 Ensure tooltip displays on mouse hover event
+- [x] 4.3 Ensure tooltip displays on keyboard focus event
+- [x] 4.4 Ensure tooltip dismisses cleanly on mouse leave
+- [x] 4.5 Ensure tooltip dismisses cleanly on keyboard blur without trapping focus
+- [x] 4.6 Verify tooltip content displays randomized safe messages from predefined pool
+- [x] 4.7 Test tooltip accessibility with screen readers
+
+## 5. Testing and Validation
+
+- [x] 5.1 Test Tamil content rendering with new fonts on mobile
+- [x] 5.2 Test Malayalam content rendering with new fonts on mobile
+- [x] 5.3 Verify WCAG AA contrast ratios are maintained after font size changes
+- [x] 5.4 Test font loading performance (LCP, CLS metrics)
+- [x] 5.5 Verify all Tamil/Malayalam Unicode characters render correctly
+- [x] 5.6 Test footer tooltip across browsers (Chrome, Firefox, Safari, Edge)
+- [x] 5.7 Test responsive behavior from 320px to 1920px viewports
+
+## 6. Documentation
+
+- [x] 6.1 Update font documentation in README or style guide
+- [x] 6.2 Document mobile typography scale for Indic languages
+- [x] 6.3 Add comments in CSS explaining mobile font size adjustments