Skip to content

fix(blocks): truncate long field values with ellipsis - #246

Merged
ascorbic merged 6 commits into
emdash-cms:mainfrom
estepanov:fix/fields-block-text-overflow
Apr 11, 2026
Merged

fix(blocks): truncate long field values with ellipsis#246
ascorbic merged 6 commits into
emdash-cms:mainfrom
estepanov:fix/fields-block-text-overflow

Conversation

@estepanov

@estepanov estepanov commented Apr 4, 2026

Copy link
Copy Markdown
Contributor

What does this PR do?

Long field values in the FieldsBlock component would overflow their container, breaking layout in cards and panels. This adds Tailwind's truncate utility (which sets overflow-hidden, text-ellipsis) to the field value element, and a title attribute so users can hover to see the full value.

test

A test was added to verify the title attribute is present and contains the full field value.

Type of change

  • Bug fix
  • Feature (requires approved Discussion)
  • Refactor (no behavior change)
  • Documentation
  • Performance improvement
  • Tests
  • Chore (dependencies, CI, tooling)

Checklist

  • I have read CONTRIBUTING.md
  • pnpm typecheck passes
  • pnpm --silent lint:json | jq '.diagnostics | length' returns 0
  • pnpm test passes (or targeted tests for my change)
  • pnpm format has been run
  • I have added/updated tests for my changes (if applicable)
  • I have added a changeset (if this PR changes a published package)
  • New features link to an approved Discussion: https://github.com/emdash-cms/emdash/discussions/...

AI-generated code disclosure

  • This PR includes AI-generated code

Screenshots / test output

Different sizes with truncate fix Screenshot size 1 larger size Screenshot size 2 fewer characters visible Screenshot size 3 fewest characters visible
@changeset-bot

changeset-bot Bot commented Apr 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 013abaf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages
Name Type
@emdash-cms/blocks Patch
@emdash-cms/admin Patch
emdash Patch
@emdash-cms/plugin-embeds Patch
@emdash-cms/cloudflare Patch
@emdash-cms/plugin-ai-moderation Patch
@emdash-cms/plugin-atproto Patch
@emdash-cms/plugin-audit-log Patch
@emdash-cms/plugin-color Patch
@emdash-cms/plugin-forms Patch
@emdash-cms/plugin-webhook-notifier Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions

github-actions Bot commented Apr 4, 2026

Copy link
Copy Markdown
Contributor

All contributors have signed the CLA ✍️ ✅
Posted by the CLA Assistant Lite bot.

@estepanov

Copy link
Copy Markdown
Contributor Author

I have read the CLA Document and I hereby sign the CLA

@estepanov

Copy link
Copy Markdown
Contributor Author

recheck

github-actions Bot added a commit that referenced this pull request Apr 4, 2026
@estepanov
estepanov marked this pull request as ready for review April 4, 2026 19:18

@ascorbic ascorbic left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect, thanks!

@pkg-pr-new

pkg-pr-new Bot commented Apr 11, 2026

Copy link
Copy Markdown

Open in StackBlitz

@emdash-cms/admin

npm i https://pkg.pr.new/@emdash-cms/admin@246

@emdash-cms/auth

npm i https://pkg.pr.new/@emdash-cms/auth@246

@emdash-cms/blocks

npm i https://pkg.pr.new/@emdash-cms/blocks@246

@emdash-cms/cloudflare

npm i https://pkg.pr.new/@emdash-cms/cloudflare@246

emdash

npm i https://pkg.pr.new/emdash@246

create-emdash

npm i https://pkg.pr.new/create-emdash@246

@emdash-cms/gutenberg-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/gutenberg-to-portable-text@246

@emdash-cms/x402

npm i https://pkg.pr.new/@emdash-cms/x402@246

@emdash-cms/plugin-ai-moderation

npm i https://pkg.pr.new/@emdash-cms/plugin-ai-moderation@246

@emdash-cms/plugin-atproto

npm i https://pkg.pr.new/@emdash-cms/plugin-atproto@246

@emdash-cms/plugin-audit-log

npm i https://pkg.pr.new/@emdash-cms/plugin-audit-log@246

@emdash-cms/plugin-color

npm i https://pkg.pr.new/@emdash-cms/plugin-color@246

@emdash-cms/plugin-embeds

npm i https://pkg.pr.new/@emdash-cms/plugin-embeds@246

@emdash-cms/plugin-forms

npm i https://pkg.pr.new/@emdash-cms/plugin-forms@246

@emdash-cms/plugin-webhook-notifier

npm i https://pkg.pr.new/@emdash-cms/plugin-webhook-notifier@246

commit: 013abaf

@ascorbic
ascorbic merged commit e1349e3 into emdash-cms:main Apr 11, 2026
25 checks passed
This was referenced Apr 11, 2026
fmhall pushed a commit to fmhall/emdash that referenced this pull request Apr 13, 2026
* fix(blocks): truncate long field values with ellipsis

* add changeset

* switch to truncate

* fix format

---------

Co-authored-by: Matt Kane <mkane@cloudflare.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment