Fix asset-info overlap

[RealFinalCode]

Summary

Fixes #434: Add responsive max-width constraints to asset info containers

Changes

• Set default max-width of asset info containers to 44vw
• Reduce to 22vw when two images are displayed side-by-side
• Implement text truncation with CSS ellipsis to prevent overflow

Testing

The fix works reliably across most screen sizes, including desktops, tablets, and phones.
Only very narrow split-view scenarios still show some overlap, which would require moving either the clock or asset info to fully resolve.

Summary by CodeRabbit

• New Features
  • Added a split view mode for side-by-side asset display.
  • Asset info fields (date, description, albums, people, location) now use progressive text truncation for a cleaner compact layout.
  • Improved text overflow handling so asset metadata remains readable and visually consistent across display modes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Introduces a new split boolean prop across three Svelte components and threads it through the component hierarchy. Asset text fields are wrapped with .info-text spans and a conditional .short-text class; CSS rules for truncation and ellipsis are added to control overflow.

Changes

Cohort / File(s)	Summary
Prop Threading immichFrame.Web/src/lib/components/elements/image.svelte, immichFrame.Web/src/lib/components/elements/image-component.svelte, immichFrame.Web/src/lib/components/elements/image.svelte	Add split?: boolean/split: boolean to component Props, initialize default where applicable, and forward split to child components (Image, ImageOverlay, AssetInfo).
Text Truncation Styling immichFrame.Web/src/lib/components/elements/asset-info.svelte	Wrap dynamic fields (date, description, albums, people, location) in <span class="info-text"> and apply class:short-text={split} for conditional truncation; add CSS: .info-text (max-width: 40vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis) and .short-text (max-width: 22vw).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Check prop declarations and defaulting in image-component.svelte and image.svelte.
• Verify split is forwarded to all intended child components and no call sites missed.
• Confirm asset-info.svelte uses class:short-text={split} consistently and CSS selectors/units match project conventions.
• Validate layout on representative viewport sizes to ensure truncation behaves as intended.

Suggested labels

enhancement

Poem

🐇 I twitch my nose and hop with cheer,

When long names shrink and lines appear,
Split spaces tidy, edges neat,
No more names and widgets meet —
A rabbit nods: design, complete.

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix asset-info overlap' directly and concisely describes the main objective of the PR, which is to address overlapping text in the asset-info component.
Linked Issues check	✅ Passed	The PR implements responsive max-width constraints and CSS text truncation with ellipsis to prevent overlap of people names, album names, and location text with the date/weather widget across different device sizes and layouts.
Out of Scope Changes check	✅ Passed	All changes are scoped to implementing the split-view responsive layout feature and text truncation to fix the overlap issue; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4d9340d and 0d5ad1c.

📒 Files selected for processing (1)

• immichFrame.Web/src/lib/components/elements/asset-info.svelte (4 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• immichFrame.Web/src/lib/components/elements/asset-info.svelte

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

immichFrame.Web/src/lib/components/elements/asset-info.svelte (1)

81-81: Apply conditional truncation to formattedDate for consistency in split view

The formattedDate at line 81 lacks the conditional short-text={split} class applied to all other metadata fields (lines 87, 93, 99, 105). Since photoDateFormat is configurable and can produce varying lengths depending on user settings, add the same truncation class for consistency and to prevent potential text overlap in split view:

<span class="info-text" class:short-text={split}>{formattedDate}</span>

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b10959b and 4d9340d.

📒 Files selected for processing (3)

• immichFrame.Web/src/lib/components/elements/asset-info.svelte (4 hunks)
• immichFrame.Web/src/lib/components/elements/image-component.svelte (3 hunks)
• immichFrame.Web/src/lib/components/elements/image.svelte (3 hunks)

🔇 Additional comments (5)

immichFrame.Web/src/lib/components/elements/asset-info.svelte (2)

17-17: LGTM! Split prop added correctly.

The split prop is properly typed and destructured for use in conditional styling.

Also applies to: 28-28

---

118-126: No CSS property fix needed. The code is correct.

The property text-wrap: nowrap is a valid CSS keyword value, contrary to the original review. The combination of text-wrap: nowrap, overflow: hidden, and text-overflow: ellipsis is a valid pattern for text truncation with ellipsis and requires no changes.

Regarding the max-width value discrepancy (40vw vs 44vw claimed in the PR description): the code currently uses max-width: 40vw at line 119. Please verify the PR description and update it if it incorrectly states 44vw, or clarify if the value should be changed to match documentation.

immichFrame.Web/src/lib/components/elements/image.svelte (1)

23-23: LGTM! Split prop threaded correctly.

The split prop is properly added to the interface, destructured, and forwarded to the AssetInfo component.

Also applies to: 38-38, 184-184

immichFrame.Web/src/lib/components/elements/image-component.svelte (2)

19-19: LGTM! Split prop initialized with sensible default.

The optional split prop with a false default value is a good pattern, ensuring backward compatibility.

Also applies to: 37-37

---

95-95: LGTM! Split prop forwarded consistently.

The split prop is correctly passed to all three Image component instances (both split-view images and the default single-image view).

Also applies to: 111-111, 129-129