[8874] Long filenames/internal names expand card height and break grid row alignment in Select an Item browse dialog

[jvega190]

#8874

Summary by CodeRabbit

• Bug Fixes
  • Improved media card headers with clearer title truncation and two-line subheader display.
  • Preserved full path visibility through the subheader tooltip.
  • Updated header styling for more consistent sizing and customization.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Essentials

Run ID: 7a4438e2-1e53-44ab-8b14-8c9977bcdb8e

📥 Commits

Reviewing files that changed from the base of the PR and between cc0ec43 and ee1449b.

📒 Files selected for processing (1)

• studio-ui/ui/app/src/components/MediaCard/MediaCard.tsx

Included review availability: 4 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.

---

Walkthrough

The media card header now uses MUI slotProps. Titles truncate with ellipsis, and subheaders clamp to two lines while retaining path tooltips.

Changes

Media Card Header

Layer / File(s)	Summary
Header typography and overflow handling studio-ui/ui/app/src/components/MediaCard/MediaCard.tsx	CardHeader replaces deprecated typography props with slotProps. The title uses full-width ellipsis truncation. The subheader uses two-line clamping and retains its path tooltip.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: jmendeza

Merge Risk: ⚪ Minimal · up to ee144

This update truncates media-card titles and limits subheaders to two lines while retaining path tooltips, preventing long names from disrupting grid alignment. No current merge-readiness risk is identified.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly describes the main change: preventing long filenames and internal names from increasing card height and breaking grid row alignment in the Select an Item browse dialog.
Description check	✅ Passed	The description provides the required ticket reference for issue #8874. The reference matches the stated pull request objective.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[jvega190]

@coderabbitai how does this work look to be merged? Any issues you can point out?

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Pull request metadata =="
gh pr view 8992 --repo craftersoftware/craftercms --json number,title,state,isDraft,baseRefName,headRefName,mergeable,reviewDecision,statusCheckRollup,files

echo
echo "== Pull request diff =="
gh pr diff 8992 --repo craftersoftware/craftercms -- studio-ui/ui/app/src/components/MediaCard/MediaCard.tsx || \
  gh pr diff 8992 --repo craftersoftware/craftercms

echo
echo "== Component outline =="
ast-grep outline studio-ui/ui/app/src/components/MediaCard/MediaCard.tsx --items all || true

echo
echo "== Component source =="
cat -n studio-ui/ui/app/src/components/MediaCard/MediaCard.tsx

echo
echo "== Dependency manifests =="
fd -a -t f '^package\.json$' studio-ui/ui 2>/dev/null | while IFS= read -r f; do
  echo "--- $f"
  rg -n -i -C2 '"`@mui/material`"|"`@mui/system`"|"`@material-ui/core`"' "$f" || true
done

echo
echo "== Focused tests and component usages =="
rg -n -i -C3 '\bMediaCard\b|<CardHeader\b|lineClamp|WebkitLineClamp' studio-ui/ui/app \
  -g '*.{ts,tsx,js,jsx}' -g '*.{test,spec}.*' || true

Length of output: 39668

---

@jvega190 I found no blocking issue in this change.

CardHeader.slotProps is valid for the repository’s MUI 7 version. The content slot can shrink because it has minWidth: 0. The title now truncates to one line. The subheader is limited to two lines. These changes should keep card headers at a consistent height in the grid.

Travis CI passed. The PR is mergeable.

Before merge, remove the draft state and obtain the required review approval. A final manual check should use a very long filename and path in the “Select an Item” dialog. This check confirms the CSS behavior in the supported browsers.

You are interacting with an AI system.