feat(splits): Narrow width for narrow splits and mobile UI

[jbecke]

Screen.Recording.2025-12-11.at.5.45.18.PM.mov

Summary of Code Changes

1. Container Query Setup

File: js/app/packages/app/component/split-layout/components/SplitContainer.tsx

• Added @container/split to the content wrapper div (line 110) to enable container queries for split width detection

2. Main Layout Structure

File: js/app/packages/macro-entity/src/components/EntityWithEverything.tsx

Main Container (line 732):

• Switched from grid to flex-col at narrow widths: @max-sm/split:flex @max-sm/split:flex-col
• Added padding for narrow widths: @max-sm/split:px-2 @max-sm/split:py-2
• Kept existing pr-2 for larger widths

3. Checkbox Behavior

Lines 762-787:

• Original checkbox button: Hidden in narrow mode with @max-sm/split:hidden
• Unread indicator: Hidden in narrow mode with @max-sm/split:hidden (line 783)

Lines 797-845 (Icon/Checkbox Container):

• Added checkbox button that appears on hover in narrow mode
• Checkbox: hidden @max-sm/split:flex @min-sm/split:hidden — visible only in narrow mode
• Icon: Hidden on hover when checkbox appears (@max-sm/split:group-hover/icon-checkbox:opacity-0)
• When checked: Checkbox stays visible, icon hidden
• Prevents double checkboxes at larger widths

4. Email Entity Layout (Narrow Mode)

Lines 505-567:

• Sender: Full width, truncates properly
• Subject + Timestamp: Flexbox with justify-between — subject left, timestamp right (Gmail-style)
• Preview: Below subject, smaller text (@max-sm/split:text-xs)
• Stacked vertically: @max-sm/split:flex-col

5. Non-Email Entity Layout (Narrow Mode)

Lines 595-640:

• Title + Timestamp: Flexbox with justify-between
• Channel messages: Stacked vertically
• Same vertical stacking pattern as emails

6. Right-Side Content Repositioning

Lines 849-900:

• Properties, badges, timestamps: Moved below main content in narrow mode
• Timestamp: Hidden from right column in narrow mode (@max-sm/split:hidden), shown inline with title/subject
• Done button: Hidden in narrow mode (@max-sm/split:hidden)

7. Content Hits & Notifications

Lines 901-920:

• Updated grid column references for narrow mode
• Content hits and notifications: Repositioned to work with flex-col layout

Breakpoint

• Uses @max-sm/split (640px) as the narrow width breakpoint
• All narrow-mode styles apply when split container width < 640px

Result

• Wide mode: Original horizontal layout preserved
• Narrow mode: Vertical stacked layout with:
  • Checkbox appears on icon hover
  • Timestamp inline with subject/title
  • No done button
  • No unread indicator star
  • Proper padding on all sides
  • Content organized vertically (sender → subject+timestamp → preview)

[sedson]

email snippet on the right looks ridiculous

[sedson]

the Enity icon should be aligned with the top line of next, not items center on the row

[sedson]

the - in between the subject and sender should only be visible if not stacked

[jbecke]

nice @sedson i agree this looks better (?)

[jbecke]

wide email fixed