Replaces hardcoded breakpoint values in `VideoCard.js` and `tailwind.source.css` with token constants and valid CSS calculations. Updates the token linting script to enforce these rules by removing the previous allowlists for these files. This ensures that all UI elements are defined by the central styling system.
- Relax `VideoCard` active state detection to a 30% viewport sweet spot (rootMargin -35%)
- Strict desktop detection using `window.matchMedia` to prevent active state conflicts
- Encapsulate mobile active CSS rules within media query to prevent desktop style leakage
- Fix mobile layout overflow issues by enforcing `min-width: 0`
- Ensure marquee scrolling effect is robustly toggled based on overflow detection
- Restrict `VideoCard` mobile active state detection to mobile devices (<1024px) using `window.matchMedia`
- Tighten `IntersectionObserver` sweet spot to 10% (rootMargin: -45%) to prevent multiple cards being active
- Encapsulate mobile active CSS rules within media query to prevent desktop style regression
- Ensure proper marquee scrolling behavior on mobile by separating static and animated states
- Prevent layout blowouts by enforcing `min-width: 0` on flex containers
- Add marquee scrolling logic to VideoCard.js using ResizeObserver and CSS animations
- Implement mobile active state detection using IntersectionObserver with a centered rootMargin (-25%)
- Update CSS to apply active state styles (backdrop blur, shadow) via data-mobile-active attribute
- Fix mobile layout overflow issues by enforcing min-width: 0 on flex containers
- Ensure title text color changes to accent on active/hover state
- Add ellipsis truncation for titles and usernames
- Implement scroll-on-hover (desktop) and scroll-on-center (mobile)
- Fix mobile layout blowout using min-width: 0 on flex containers
- Add IntersectionObserver and ResizeObserver mocks for tests
- Replaced CSS truncation with a custom marquee structure in `VideoCard.js` for titles and author names.
- Added `css/tailwind.source.css` utilities for `.marquee-host`, `.marquee-static`, and `.marquee-track` animations.
- Implemented `ResizeObserver` (shared singleton) to detect overflow and enable marquee only when needed.
- Implemented `IntersectionObserver` (shared singleton) to trigger marquee on mobile when the card is in the center of the viewport.
- Configured dynamic animation duration based on text content width to ensure constant scrolling speed.
- Verified visual behavior via Playwright screenshots.
- Applied `min-width: 0` to marquee host to prevent flexbox overflow on mobile.
- Updated raw CSS values to use design tokens to pass linting.
- Replaced CSS truncation with a custom marquee structure in `VideoCard.js` for titles and author names.
- Added `css/tailwind.source.css` utilities for `.marquee-host`, `.marquee-static`, and `.marquee-track` animations.
- Implemented `ResizeObserver` (shared singleton) to detect overflow and enable marquee only when needed.
- Implemented `IntersectionObserver` (shared singleton) to trigger marquee on mobile when the card is in the center of the viewport.
- Configured dynamic animation duration based on text content width to ensure constant scrolling speed.
- Verified visual behavior via Playwright screenshots.
Moves the moderation warning badge ("Content blocked...") to overlay the blurred thumbnail image instead of sitting below it or increasing card height. This logic is applied to both the main `VideoCard` and the `SimilarContentCard` to ensure layout consistency.
Changes:
- VideoCard.js: Refactor `updateModerationBadge` to append the badge container as a child of the `anchorEl` (thumbnail wrapper) with absolute positioning.
- SimilarContentCard.js: Implement `refreshModerationUi` logic to generate and overlay a simplified moderation badge on the thumbnail when `trustedMuted` context is present.
- Fix tests/moderation/video-card.test.mjs: Patch test environment to mock `globalThis.navigator`.
- Moved view count from author metadata section to a new bottom "Engagement Section".
- Replaced "views" and "notes" text with SVG icons (Eye and Message Circle).
- Grouped views and comments side-by-side in the new section.
- Preserved existing data attributes for view/discussion counters.
- Cleaned up author metadata to only show Time and Edited status.
- Update `VideoCard.js` to display "• Edited" instead of "(edited)" for better visual consistency.
- Update `app.js` to format the modal's "Last Edited" timestamp as "Last edited: [Absolute] ([Relative])".
- Ensure `EditModal.js` correctly backfills and preserves `published_at` to prevent date resets.
- Verify edit logic with existing tests.
Prioritize `published_at` metadata over event `created_at` timestamp.
Backfill `published_at` during edit if missing to preserve original date.
Add "(edited)" label to video cards for modified content.
Display "Last Edited: [Date]" on video player modal.
google-labs-jules[bot]