+
{/* Image area */}
+
{/* Sidebar */}
+```
+
+**Requested Structure**: Article-like layout (title/author top, content below) with multimedia separated from text
+
+### 3. Videos Layout - AI Summary Position
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/VideosLayout.tsx`
+
+**Current Order**:
+
+1. EntryTitle
+2. AuthorHeader
+3. ContentBody
+4. AISummary ← Currently at bottom
+
+**Requested Order**: AI Summary should be above ContentBody (between AuthorHeader and ContentBody)
+
+### 4. Video Entry Popup Logic
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-column/Items/video-item.tsx`
+
+**Current Behavior**: Lines 104-126 - Click triggers modal popup instead of navigation
+
+```typescript
+onClick={(e) => {
+ if (iframeSrc) {
+ modalStack.present({
+ title: "",
+ content: (props) => ( {
+ previewMedia(media, i) // Triggers picture preview popup instead of navigation
+ }}
+/>
+```
+
+## Proposed Solutions
+
+### 1. Social Media Layout Fixes
+
+#### 1.1 Restore EntryHeader Functionality
+
+**Strategy**: Remove the SocialMedia exclusion from EntryHeader component and ensure proper integration
+
+**File Changes**:
+
+- `EntryHeader.tsx`: Remove `view !== FeedViewType.SocialMedia` condition
+- `EntryItemWrapper.tsx`: Change SocialMedia from `` to `NavLink` like other entry types
+- `SocialMediaLayout.tsx`: Ensure layout works with EntryHeader display
+
+#### 1.2 Layout Integration Pattern
+
+Follow the same pattern as ArticleLayout:
+
+```typescript
+// EntryContent.tsx integration (lines 120-127)
+{!isInPeekModal && (
+ previewMedia(media, i)} // Remove this line
+ className="aspect-square w-full overflow-hidden rounded-md"
+/>
+```
+
+#### 5.2 Maintain Preview in PicturesLayout
+
+**Note**: Users can still preview images via the restructured PicturesLayout with proper MediaGallery integration
+
+## Implementation Plan
+
+### Phase 1: Fix Social Media Layout EntryHeader (Priority: Critical)
+
+#### Task 1.1: Remove SocialMedia Exclusion from EntryHeader
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-content/components/entry-header/EntryHeader.tsx`
+
+```typescript
+// Remove condition: view !== FeedViewType.SocialMedia
+// Lines 72-77: Always show EntryHeaderActions regardless of view type
+` to `NavLink` might affect performance or behavior
+**Mitigation**:
+
+- Profile performance impact of additional NavLink components
+- Test keyboard navigation and accessibility compliance
+- Verify no conflicts with existing event handlers
+
+#### 3. Pictures Layout Restructuring
+
+**Risk**: Complete layout change might break existing user expectations
+**Mitigation**:
+
+- Maintain click-to-preview functionality for advanced image viewing
+- Test with various image entry types and content lengths
+- Consider user feedback mechanism for layout preference
+
+### Medium-Risk Areas
+
+#### Component Dependencies
+
+**Risk**: Changes to shared components might affect other areas
+**Mitigation**:
+
+- Audit all usage of modified components before changes
+- Use backward-compatible prop additions where possible
+- Test all entry list item displays remain functional
+
+#### Preview Functionality
+
+**Risk**: Removing popup logic might eliminate desired preview features
+**Mitigation**:
+
+- Preserve advanced preview functionality within content layouts
+- Ensure MediaGallery and video players provide equivalent experience
+- Test that preview modals still work when explicitly triggered
+
+### Rollback Strategy
+
+- Implement changes incrementally by layout type
+- Use git feature branches for each major change
+- Maintain existing layout components as backup during transition
+- Feature flag capability for reverting individual layout changes
+
+## Additional Considerations
+
+### Accessibility Standards
+
+- Ensure EntryHeader actions maintain proper ARIA labels and keyboard navigation
+- Test screen reader compatibility with restructured layouts
+- Maintain proper heading hierarchy across all layout changes
+- Verify video player controls remain keyboard accessible
+
+### Internationalization Support
+
+- Test all layout changes with RTL languages
+- Ensure proper text flow in restructured Pictures layout
+- Verify action button layouts work with translated text
+- Maintain consistent translation key usage across layouts
+
+### Future Extensibility
+
+- Pattern established for other layout types (Audio, Notifications)
+- EntryHeader integration approach reusable for new layout types
+- Component separation supports future customization options
+- Layout factory system ready for additional media types
+
+## Confidence Score: 8.5/10
+
+This PRP provides a comprehensive solution with high implementation confidence:
+
+### Strengths
+
+- ✅ **Root Cause Analysis**: Identified exact source of each issue with file and line references
+- ✅ **Proven Patterns**: Leverages existing successful EntryHeader and ArticleLayout patterns
+- ✅ **Focused Scope**: Addresses specific reported issues without unnecessary complexity
+- ✅ **Detailed Implementation**: Clear file-by-file changes with code examples
+- ✅ **Risk Management**: Identified potential issues with concrete mitigation strategies
+- ✅ **Comprehensive Testing**: Detailed validation steps for each change
+- ✅ **External Research**: Incorporates best practices for navigation and layout design
+
+### Implementation Confidence Factors
+
+1. **Clear Problem Definition**: Each issue has been thoroughly analyzed with exact file locations
+2. **Existing Foundation**: EntryHeader, ArticleLayout, and navigation patterns are already proven
+3. **Minimal Breaking Changes**: Most changes involve removing exclusions or simple reordering
+4. **Component Reuse**: Leveraging existing tested components rather than creating new ones
+5. **Incremental Approach**: Changes can be implemented and tested independently
+6. **Fallback Options**: Clear rollback strategy for each component change
+
+### Minor Risk Factors
+
+- **Layout Integration**: Need to verify EntryHeader spacing works with each layout type
+- **Navigation Changes**: SocialMedia routing change requires thorough cross-platform testing
+- **User Experience**: Pictures layout restructuring is most significant UX change
+
+The high confidence score reflects that this PRP addresses well-defined issues using existing proven components and patterns, with clear implementation steps and comprehensive validation approaches.
diff --git a/PRPs/entry-layouts-refinement-fixes.md b/PRPs/entry-layouts-refinement-fixes.md
new file mode 100644
index 000000000..1a9bdef28
--- /dev/null
+++ b/PRPs/entry-layouts-refinement-fixes.md
@@ -0,0 +1,660 @@
+# PRP: Entry Content Layout Refinement Fixes
+
+## Overview
+
+Address critical styling and functionality issues in the recently implemented adaptive entry content layouts. This PRP fixes three main areas: Social Media layout typography and avatar styling, Pictures layout carousel integration, and scroll container height calculation issues that cause content truncation.
+
+## Current Issues Analysis
+
+### Issue Context
+
+Following the implementation of adaptive entry content layouts in previous PRPs, user feedback has identified several refinement issues that affect the visual quality and functionality of the layouts.
+
+### 1. Social Media Layout - Typography and Avatar Issues
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/SocialMediaLayout.tsx`
+
+**Issue 1.1: Author Name Text Size**
+
+```typescript
+// Current AuthorHeader.tsx implementation (lines 64-67)
+
+ {/* Title and Author Section */}
+
+```
+
+#### 2.2 Multimedia Content Separation
+
+- Use `noMedia={true}` on ContentBody to remove multimedia elements from text
+- Display multimedia content separately in dedicated MediaGallery section
+- Maintain click-to-preview functionality via `usePreviewMedia` hook
+
+### 3. Videos Layout - AI Summary Position Fix
+
+**Simple Reordering**: Move AISummary component above ContentBody
+
+```typescript
+// Current order in VideosLayout.tsx (lines 49-72)
+
+
+
+ {/* Multimedia Content Section */}
+
+
+
+ {/* Text Content Section */}
+
+
+
+
+```
+
+#### Task 1.2: Fix SocialMedia Entry Navigation
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx`
+
+```typescript
+// Change line 212 from:
+const Link = view === FeedViewType.SocialMedia ? "article" : NavLink
+// To:
+const Link = NavLink // Use NavLink for all entry types including SocialMedia
+```
+
+#### Task 1.3: Verify SocialMediaLayout Integration
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/SocialMediaLayout.tsx`
+
+- Ensure layout works properly when EntryHeader is displayed above it
+- Test star collection overlay positioning doesn't conflict with EntryHeader
+- Verify responsive behavior with EntryHeader present
+
+### Phase 2: Restructure Pictures Layout (Priority: High)
+
+#### Task 2.1: Implement Article-Style Layout Structure
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/PicturesLayout.tsx`
+
+- Replace split-screen layout with vertical article-style layout
+- Move title and author to top section
+- Create dedicated multimedia content section with MediaGallery
+- Separate text content section with `noMedia={true}`
+
+#### Task 2.2: Update MediaGallery Integration
+
+- Ensure MediaGallery component supports click-to-preview functionality
+- Maintain existing `usePreviewMedia` hook integration for modal previews
+- Test multiple image handling and carousel behavior
+
+### Phase 3: Fix Videos Layout AI Summary Position (Priority: Medium)
+
+#### Task 3.1: Reorder Components
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/VideosLayout.tsx`
+
+- Move `
+
+
+```
+
+**Problem**: Avatar size increased to 48px but border radius remains `rounded-sm` (2px), creating visual inconsistency.
+
+### 2. Pictures Layout - Carousel Implementation Issues
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/PicturesLayout.tsx`
+
+**Issue 2.1: Multiple Image Display**
+
+```typescript
+// Current MediaGallery.tsx implementation (lines 47-113)
+if (isAllMediaSameRatio) {
+ return (
+
+ {media.map((mediaItem, i, mediaList) => {
+ // Multiple images displayed side by side
+```
+
+**Problem**: MediaGallery shows multiple images side by side instead of single image with carousel navigation.
+
+**Issue 2.2: Missing PreviewMediaContent Integration**
+**Expected**: Single image display that opens PreviewMediaContent modal on click with carousel functionality.
+**Current**: Direct MediaGallery display without modal integration.
+
+**Issue 2.3: Entry List Click Behavior Not Restored**
+**Problem**: Previous fixes removed SwipeMedia `onPreview` prop but didn't properly restore the expected clicking behavior for entry list images.
+
+### 3. Scroll Container Height Calculation Issues
+
+**Files**:
+
+- `packages/internal/components/src/ui/scroll-area/ScrollArea.tsx`
+- `apps/desktop/layer/renderer/src/modules/entry-content/components/entry-content/EntryContent.tsx`
+
+**Issue 3.1: Height Mismatch**
+
+```typescript
+// EntryContent.tsx ScrollArea usage (lines 242-244)
+rootClassName={cn(
+ "h-0 min-w-0 grow overflow-y-auto print:h-auto print:overflow-visible",
+ className,
+)}
+```
+
+**Problem**: `h-0 grow` pattern causes height calculation issues where content extends beyond scroll container.
+
+**Issue 3.2: Flex Container Min-Height Problem**
+**Root Cause**: Flexbox containers with implicit minimum size cause scroll containers to not properly calculate their available height.
+
+## Proposed Solutions
+
+### 1. Social Media Layout Typography and Avatar Fixes
+
+#### 1.1 Increase Author Name Font Size
+
+**Strategy**: Update AuthorHeader to use larger text size for social media context
+
+**Implementation**:
+
+```typescript
+// AuthorHeader.tsx - Enhanced author name styling
+
+ {/* Changed from text-sm */}
+ = ({ entryId, ... }) => {
+ const entry = useEntry(entryId, (state) => ({ media: state.media }))
+ const previewMedia = usePreviewMedia()
+
+ const handleImageClick = () => {
+ if (entry?.media && entry.media.length > 0) {
+ previewMedia(
+ entry.media.map(m => ({
+ url: m.url,
+ type: m.type,
+ blurhash: m.blurhash,
+ fallbackUrl: m.preview_image_url
+ })),
+ 0 // Start at first image
+ )
+ }
+ }
+
+ return (
+ {
+ previewMedia(
+ media.map(m => ({
+ url: m.url,
+ type: m.type,
+ blurhash: m.blurhash,
+ fallbackUrl: m.preview_image_url
+ })),
+ i
+ )
+ }}
+/>
+```
+
+### 3. Scroll Container Height Fixes
+
+#### 3.1 Apply Min-Height Fix to Flex Containers
+
+**Strategy**: Add explicit `min-height: 0` to flex containers to fix height calculation
+
+**Implementation**:
+
+```typescript
+// EntryContent.tsx - Fix flex container height calculation
+
+
+ div]:!flex [&>div]:!flex-col [&>div]:!min-h-0", // Add min-h-0 to flex children
+ viewportClassName
+ )}
+ // ... rest of props
+ >
+ {children}
+
+
+
+ )
+}
+```
+
+## Implementation Tasks
+
+### Phase 1: Social Media Layout Typography and Avatar Fixes (Priority: High)
+
+#### Task 1.1: Update AuthorHeader Font Sizes
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/shared/AuthorHeader.tsx`
+
+- Change author name from `text-sm` to `text-base` for better prominence
+- Ensure consistency across all AuthorHeader usages
+- Test with different author name lengths
+
+#### Task 1.2: Implement Size-Responsive Avatar Border Radius
+
+**File**: `apps/desktop/layer/renderer/src/modules/feed/feed-icon/FeedIcon.tsx`
+
+- Create `getBorderRadius()` utility function based on avatar size
+- Update AvatarImage className to use responsive border radius
+- Test with different avatar sizes (20px, 32px, 48px, 64px)
+
+#### Task 1.3: Update SocialMediaLayout Avatar Integration
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/SocialMediaLayout.tsx`
+
+- Verify 48px avatar size works with new border radius
+- Test visual consistency with typography changes
+- Ensure proper spacing and alignment
+
+### Phase 2: Pictures Layout Single Image Carousel (Priority: High)
+
+#### Task 2.1: Replace MediaGallery with Single Image Display
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/PicturesLayout.tsx`
+
+- Remove MediaGallery usage
+- Implement single image display with first image from media array
+- Add click handler for PreviewMediaContent modal
+- Add visual indicator for multiple images ("+X more" overlay)
+
+#### Task 2.2: Create Picture-Specific Media Component
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-content/components/layouts/shared/SingleImageDisplay.tsx`
+
+- Create reusable single image display component
+- Include click-to-carousel functionality
+- Handle edge cases (no images, single image, multiple images)
+- Support different aspect ratios and sizing
+
+#### Task 2.3: Restore Entry List Image Click Behavior
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-column/Items/picture-item.tsx`
+
+- Re-add `onPreview` prop to SwipeMedia component
+- Ensure proper media format for PreviewMediaContent
+- Test clicking behavior in entry list vs content view
+- Verify no conflicts with entry navigation
+
+### Phase 3: Scroll Container Height Fixes (Priority: Critical)
+
+#### Task 3.1: Apply Min-Height Fixes to Entry Content
+
+**File**: `apps/desktop/layer/renderer/src/modules/entry-content/components/entry-content/EntryContent.tsx`
+
+- Add `min-h-0` classes to flex containers
+- Update ScrollArea usage to include flex height fixes
+- Test with different content lengths and screen sizes
+- Verify fix applies to all layout types (Social Media, Videos, Articles, Pictures)
+
+#### Task 3.2: Enhance ScrollArea Component
+
+**File**: `packages/internal/components/src/ui/scroll-area/ScrollArea.tsx`
+
+- Add explicit `min-h-0` support for flex contexts
+- Update flex child selectors to include min-height fixes
+- Ensure backward compatibility with existing usage
+- Test across different scroll scenarios
+
+#### Task 3.3: Test Scroll Fixes Across All Layouts
+
+**Files**: All layout components
+
+- Test Social Media layout with long content
+- Test Video layout with long descriptions
+- Test Articles layout for regressions
+- Test Pictures layout after restructuring
+- Verify mobile responsive behavior
+
+### Phase 4: Integration Testing and Polish (Priority: Medium)
+
+#### Task 4.1: Cross-Layout Consistency Testing
+
+- Verify typography consistency across all layouts
+- Test avatar sizing consistency in different contexts
+- Ensure PreviewMediaContent modal works consistently
+- Test scroll behavior across all entry types
+
+#### Task 4.2: Performance and Accessibility Testing
+
+- Verify no performance regressions with scroll fixes
+- Test keyboard navigation with new carousel behavior
+- Ensure proper focus management in PreviewMediaContent
+- Test screen reader compatibility
+
+## Context & References
+
+### Codebase Architecture Understanding
+
+#### Core Components to Modify
+
+- **AuthorHeader.tsx**: Typography improvements for author names
+- **FeedIcon.tsx**: Size-responsive border radius implementation
+- **PicturesLayout.tsx**: Single image display with carousel integration
+- **ScrollArea.tsx**: Flex container height calculation fixes
+- **EntryContent.tsx**: Scroll container height fixes
+- **picture-item.tsx**: Restore image click preview behavior
+
+#### Existing Patterns to Follow
+
+- **PreviewMediaContent.tsx**: Modal-based media carousel (Embla carousel integration)
+- **usePreviewMedia**: Hook for triggering media preview modals
+- **Media component**: Image display with loading states and proxy support
+- **UIKit color system**: Consistent with `text-base`, `rounded-lg` etc.
+
+### External Best Practices & Documentation
+
+#### CSS Flexbox Height Calculation Fixes
+
+- **Min-Height Zero Pattern**: https://stackoverflow.com/questions/21515042/scrolling-a-flexbox-with-overflowing-content
+- **Flex Container Overflow**: https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/
+- **Critical Insight**: "There's a special case where the min-height of flex items defaults to the content size. We have to explicitly set the min height to zero."
+
+#### React Image Carousel Best Practices
+
+- **Single Image Display**: https://cloudinary.com/blog/add-a-responsive-image-carousel-to-your-react-app
+- **Click Navigation**: Custom controls with callback functions and hasNext/hasPrev state
+- **Responsive Design**: Automatic layout adjustment based on screen size
+- **Performance**: Lazy loading and video play control on selected slides
+
+#### Typography and Avatar Scaling
+
+- **Responsive Avatar Sizing**: Border radius should scale proportionally with avatar size
+- **Social Media Typography**: Author names should be prominent (16px+ / text-base) for readability
+- **Apple UIKit Standards**: Consistent size relationships (border radius = size/6 to size/4)
+
+### Implementation Guidelines
+
+#### Typography Scaling Pattern
+
+```typescript
+// Size-based styling patterns
+const getFontSize = (context: "social" | "article" | "compact") => {
+ switch (context) {
+ case "social":
+ return "text-base font-semibold" // 16px for prominence
+ case "article":
+ return "text-sm font-semibold" // 14px for articles
+ case "compact":
+ return "text-xs font-medium" // 12px for compact
+ }
+}
+```
+
+#### Border Radius Scaling Pattern
+
+```typescript
+// Size-responsive border radius
+const getBorderRadius = (size: number) => {
+ const ratio = size / 8 // Scale factor
+ if (ratio <= 3) return "rounded-sm" // 2px
+ if (ratio <= 4) return "rounded-md" // 6px
+ if (ratio <= 6) return "rounded-lg" // 8px
+ return "rounded-xl" // 12px
+}
+```
+
+#### Single Image Carousel Pattern
+
+```typescript
+// Media display with carousel integration
+const handleImageClick = useCallback(() => {
+ if (mediaArray.length > 0) {
+ previewMedia(
+ mediaArray.map(transformMediaForPreview),
+ 0, // Initial index
+ )
+ }
+}, [mediaArray, previewMedia])
+```
+
+## Validation Gates
+
+### Code Quality Checks
+
+```bash
+# TypeScript validation
+pnpm run typecheck
+
+# Linting validation
+pnpm run lint:tsl
+pnpm run lint
+
+# Code formatting
+pnpm run format
+
+# Build validation
+pnpm run build:web
+```
+
+### Functional Testing Checklist
+
+#### Social Media Layout Validation
+
+- [ ] Author name displays with `text-base` font size (16px)
+- [ ] Author name maintains proper font weight and color
+- [ ] Avatar border radius scales appropriately with 48px size
+- [ ] Avatar maintains circular appearance with proper radius
+- [ ] Typography is consistent across different author name lengths
+- [ ] Layout maintains proper spacing and alignment
+
+#### Pictures Layout Validation
+
+- [ ] Single image displays instead of multiple images side by side
+- [ ] First image from media array is shown as primary display
+- [ ] "+X more" indicator appears when multiple images exist
+- [ ] Clicking single image opens PreviewMediaContent modal
+- [ ] Carousel navigation works properly in modal (left/right arrows)
+- [ ] Image maintains proper aspect ratio and scaling
+- [ ] No layout shift when transitioning to/from modal
+
+#### Entry List Image Click Validation
+
+- [ ] Clicking images in picture-item triggers PreviewMediaContent modal
+- [ ] Modal opens with correct initial image and media array
+- [ ] Entry navigation still works when clicking non-image areas
+- [ ] No conflicts between image click and entry click behaviors
+- [ ] Touch gestures work properly on mobile devices
+
+#### Scroll Container Height Validation
+
+- [ ] Long content no longer gets cut off at bottom in Social Media layout
+- [ ] Long content no longer gets cut off at bottom in Video layout
+- [ ] ScrollArea height matches available container height
+- [ ] Content scrolls smoothly to very bottom without truncation
+- [ ] No visual glitches or layout shifts during scrolling
+- [ ] Fix applies to all entry types (Articles, Social Media, Videos, Pictures)
+- [ ] Mobile responsive behavior maintains proper scrolling
+
+### Performance & Integration Testing
+
+- [ ] No layout shift when switching between entry types
+- [ ] PreviewMediaContent modal opens smoothly without lag
+- [ ] Image loading states display properly
+- [ ] Scroll performance maintained with height fixes
+- [ ] No memory leaks with modal-based image preview
+- [ ] Typography rendering remains crisp at all zoom levels
+
+## Success Criteria
+
+### Primary Objectives
+
+- [ ] **Social Media**: Author names display prominently with proper typography
+- [ ] **Social Media**: Avatar border radius scales appropriately with size
+- [ ] **Pictures**: Single image display with click-to-carousel functionality
+- [ ] **Pictures**: Entry list image clicking restored and working properly
+- [ ] **Scroll Heights**: Long content fully visible without truncation in all layouts
+- [ ] **Performance**: All fixes implemented without performance regression
+
+### Quality Standards
+
+- [ ] Zero regressions in existing ArticleLayout functionality
+- [ ] All layout types maintain consistent typography patterns
+- [ ] PreviewMediaContent modal integration works seamlessly
+- [ ] ScrollArea height calculation robust across different content types
+- [ ] Mobile responsive design maintained across all fixes
+
+### User Experience Improvements
+
+- [ ] Social media author information more readable and prominent
+- [ ] Picture viewing experience enhanced with proper carousel integration
+- [ ] Content consumption improved with full scroll accessibility
+- [ ] Visual consistency improved with proper avatar styling
+- [ ] Interaction patterns consistent between entry list and content view
+
+## Risk Assessment & Mitigation
+
+### High-Risk Areas
+
+#### 1. ScrollArea Height Calculation Changes
+
+**Risk**: Height fixes might break existing scroll behavior in other components
+**Mitigation**:
+
+- Apply changes incrementally with thorough testing
+- Maintain backward compatibility with existing ScrollArea usage
+- Test all scroll containers across the application
+- Use feature flags for gradual rollout if needed
+
+#### 2. PreviewMediaContent Modal Integration
+
+**Risk**: Modal stacking conflicts or keyboard navigation issues
+**Mitigation**:
+
+- Test modal behavior with existing modal stack system
+- Verify proper cleanup of modal state
+- Ensure keyboard navigation (ESC, arrows) works correctly
+- Test touch gestures on mobile devices
+
+#### 3. Typography Changes Impact
+
+**Risk**: Font size changes might break layout in compact or mobile views
+**Mitigation**:
+
+- Test with various author name lengths and special characters
+- Verify responsive behavior across all screen sizes
+- Check international character rendering (CJK, Arabic, etc.)
+- Maintain proper line height and spacing
+
+### Medium-Risk Areas
+
+#### Component Dependencies
+
+**Risk**: Changes to shared components might affect other features
+**Mitigation**:
+
+- Audit all usage of modified components before changes
+- Use backward-compatible prop additions
+- Test AuthorHeader and FeedIcon usage across application
+- Verify no breaking changes to component APIs
+
+#### Image Loading Performance
+
+**Risk**: Single image display might affect loading performance
+**Mitigation**:
+
+- Maintain existing lazy loading behavior
+- Test image proxy functionality with new implementation
+- Profile image loading performance before and after changes
+- Ensure proper loading states and error handling
+
+### Rollback Strategy
+
+- Implement changes as separate commits for easy reversal
+- Use CSS custom properties for easy typography adjustments
+- Maintain original component implementations as backup
+- Feature flag capability for critical scroll height fixes
+
+## Additional Considerations
+
+### Accessibility Standards
+
+- Ensure author names maintain proper contrast ratios with larger text
+- Test screen reader compatibility with typography changes
+- Verify keyboard navigation works properly with image carousel
+- Maintain proper heading hierarchy across layout changes
+
+### Internationalization Support
+
+- Test typography changes with different language character sets
+- Ensure proper text flow with RTL languages
+- Verify avatar and text spacing works with longer translated text
+- Maintain consistent translation key usage across components
+
+### Future Extensibility
+
+- Typography pattern scalable to other layout types
+- Border radius pattern reusable for other avatar contexts
+- ScrollArea fixes applicable to other scroll containers
+- Image carousel pattern extensible to video content
+
+## Confidence Score: 9/10
+
+This PRP provides a comprehensive solution with high implementation confidence:
+
+### Strengths
+
+- ✅ **Root Cause Analysis**: Identified exact source of each issue with specific file/line references
+- ✅ **Proven External Research**: Incorporates CSS flexbox best practices and React carousel patterns
+- ✅ **Focused Scope**: Addresses specific reported issues without unnecessary complexity
+- ✅ **Detailed Implementation**: Clear component-by-component changes with code examples
+- ✅ **Risk Management**: Identified potential issues with concrete mitigation strategies
+- ✅ **Comprehensive Testing**: Detailed validation steps for each change
+- ✅ **Existing Pattern Leverage**: Uses established components (PreviewMediaContent, usePreviewMedia)
+
+### Implementation Confidence Factors
+
+1. **Clear Problem Definition**: Each issue traced to specific code locations with examples
+2. **External Best Practices**: CSS flexbox fixes and React carousel patterns are well-established
+3. **Component Reuse**: Leveraging existing PreviewMediaContent rather than building new carousel
+4. **Incremental Approach**: Changes can be implemented and tested independently
+5. **Minimal Breaking Changes**: Most fixes involve styling adjustments and proper component usage
+6. **Established Patterns**: Typography and avatar sizing follow existing codebase conventions
+
+### Minor Risk Areas
+
+- **ScrollArea Changes**: Need thorough testing across different content types
+- **Typography Impact**: Must verify responsive behavior with larger text
+- **Modal Integration**: Ensure smooth interaction with existing modal stack
+
+The high confidence score reflects that this PRP addresses well-defined styling and functional issues using established patterns and external best practices, with clear implementation steps and comprehensive validation approaches.
diff --git a/PRPs/entry-modal-to-routing.md b/PRPs/entry-modal-to-routing.md
new file mode 100644
index 000000000..ea9528628
--- /dev/null
+++ b/PRPs/entry-modal-to-routing.md
@@ -0,0 +1,278 @@
+# PRP: Entry Modal to Routing Refactoring
+
+## Overview
+
+Refactor the entry content display system from a full-page modal approach to a scoped, column-based routing approach. This will improve user experience by keeping the modal scoped to the entry list column and make the entry content display reflect in the URL for better navigation.
+
+## Current Implementation Analysis
+
+### Current Architecture
+
+- **Three-column layout**: Feed list (left) → Entry list (center) → AI chat (right)
+- **Main layout**: `MainDestopLayout` → `SubscriptionColumnContainer` + `
+ {/* Single image display */}
+ {entry?.media && entry.media.length > 0 && (
+
+ )
+}
+```
+
+#### 2.2 Restore Entry List Image Click Behavior
+
+**Strategy**: Re-add proper onPreview functionality to SwipeMedia in entry list contexts
+
+**Implementation**:
+
+```typescript
+// picture-item.tsx - Restore preview functionality
+
+
+ )}
+ {/* Rest of content */}
+
+
+
+ +{entry.media.length - 1} more
+
+ )}
+ {/* Add min-h-0 */}
+
+ {children}
+
+
+```
+
+#### 3.2 Update ScrollArea Component for Better Height Handling
+
+**Strategy**: Enhance ScrollArea component to handle flex container height issues
+
+**Implementation**:
+
+```typescript
+// ScrollArea.tsx - Enhanced flex support
+export const ScrollArea = ({
+ flex,
+ rootClassName,
+ viewportClassName,
+ ...props
+}) => {
+ return (
+
+
+
+// Proposed: Conditional entry content display
+
+
+```
+
+#### 3. Create Column-Scoped Entry Layout
+
+**New file**: `apps/desktop/layer/renderer/src/modules/entry-column/EntryColumnLayout.tsx`
+
+```typescript
+export const EntryColumnLayout = () => {
+ const { entryId } = useParams()
+ const navigate = useNavigateEntry()
+
+ if (!entryId || entryId === ROUTE_ENTRY_PENDING) {
+ return
+ {/* Entry list background */}
+
+ )
+}
+```
+
+#### 4. Update Route Configuration
+
+**File**: `apps/desktop/layer/renderer/src/pages/(main)/(layer)/timeline/[timelineId]/[feedId]/layout.tsx`
+
+Change from `CenterColumnLayout` to new scoped layout:
+
+```typescript
+// BEFORE
+export { CenterColumnLayout as Component } from "~/modules/app-layout/timeline-column/index"
+
+// AFTER
+export { EntryColumnLayout as Component } from "~/modules/entry-column/EntryColumnLayout"
+```
+
+## Implementation Tasks
+
+### Phase 1: Core Routing Setup
+
+1. **Create EntryColumnLayout component**
+ - Implement conditional rendering for entry content
+ - Add proper scoping within entry column boundaries
+ - Handle entry close navigation
+
+2. **Update CenterColumnLayout route**
+ - Replace component export in layout.tsx
+ - Ensure proper outlet rendering
+
+3. **Modify EntryItemWrapper click handler**
+ - Replace `peekModal` call with `navigateEntry`
+ - Import and use existing navigation utilities
+
+### Phase 2: Layout & Styling
+
+4. **Style scoped entry content**
+ - Ensure entry content stays within column boundaries
+ - Add proper animations for entry open/close
+ - Handle responsive behavior
+
+5. **Update entry content close behavior**
+ - Remove modal-specific close logic
+ - Implement navigation-based close
+
+### Phase 3: Testing & Validation
+
+6. **Test navigation flow**
+ - Verify URL changes correctly
+ - Test browser back/forward navigation
+ - Validate entry content display
+
+7. **Test edge cases**
+ - Direct URL access to entry routes
+ - Entry not found scenarios
+ - Mobile responsiveness
+
+## Context & References
+
+### Existing Patterns
+
+- **Navigation utilities**: `useNavigateEntry`, `getNavigateEntryPath` already exist
+- **Route structure**: Entry routing infrastructure already present
+- **Entry content component**: `EntryContent` component already handles rendering
+
+### External Documentation
+
+- **React Router Modal Patterns**: https://blog.logrocket.com/building-react-modal-module-with-react-router/
+- **Background Location Pattern**: https://dev.to/unorthodev/how-to-make-routable-modals-in-react-with-react-router-3hgp
+- **Scoped Navigation**: https://github.com/remix-run/react-router/discussions/9601
+
+### Best Practices Applied
+
+1. **Nested Route Approach**: Use existing route structure with outlets
+2. **Scoped Rendering**: Keep entry content within column boundaries
+3. **Persistent Navigation**: URL reflects entry selection state
+4. **Smooth Transitions**: Maintain existing animation patterns
+
+## Validation Gates
+
+### Code Quality
+
+```bash
+# TypeScript validation
+pnpm run typecheck
+
+# Linting
+pnpm run lint
+
+# Build validation
+pnpm run build:web
+```
+
+### Functional Testing
+
+```bash
+# Manual testing checklist
+1. Click entry in list → URL updates → Entry content displays in column
+2. Browser back/forward → Entry content appears/disappears correctly
+3. Direct URL access → Entry content renders properly
+4. Entry close action → Returns to entry list with correct URL
+5. Mobile responsiveness → Entry content adapts to smaller screens
+```
+
+### Performance Validation
+
+- No increase in bundle size
+- Smooth animations maintained
+- No layout shifts during entry display
+
+## Success Criteria
+
+- [ ] Entry clicks trigger navigation instead of modal
+- [ ] Entry content displays within column boundaries
+- [ ] URL reflects entry selection state
+- [ ] Browser navigation works correctly
+- [ ] Entry close returns to proper state
+- [ ] All existing functionality preserved
+- [ ] No visual regression in three-column layout
+
+## Risk Mitigation
+
+### Potential Issues
+
+1. **Layout disruption**: Entry content might overflow column boundaries
+2. **Animation conflicts**: Existing animations might conflict with new approach
+3. **Mobile compatibility**: Column-scoped display might not work on mobile
+
+### Mitigation Strategies
+
+1. **Absolute positioning**: Use absolute positioning to contain entry content
+2. **CSS containment**: Use CSS containment properties for layout isolation
+3. **Responsive design**: Implement mobile-specific fallbacks if needed
+
+## Confidence Score: 8/10
+
+This PRP provides a comprehensive approach with:
+
+- ✅ Detailed analysis of current implementation
+- ✅ Clear technical specifications
+- ✅ Existing code patterns leveraged
+- ✅ External best practices incorporated
+- ✅ Executable validation steps
+- ✅ Risk mitigation strategies
+
+The high confidence comes from the existing navigation infrastructure and clear understanding of the current modal system. The main implementation involves connecting existing pieces rather than building from scratch.
+ navigate({ entryId: null })}
+ />
+
+