Begin of the insertionTwo independent implementations handle truncated/expandable text using Primer's `HiddenTextExpander`:End of the insertion Begin of the deletion Primer's `HiddenTextExpander` ([edge Lookbook docs](https://qa.openproject-edge.com/lookbook/inspect/primer/alpha/hidden_text_expander/playground)) is currently used in at least two different ways:End of the deletion

1. Begin of the insertion**Inline expansion** — `OpPrimer::ExpandableTextComponent` +End of the insertion Begin of the deletion **additional content is expanded inline**: on the Permissions Report and Workflows pages using theEnd of the deletion Stimulus `TruncationController` Begin of the insertion
- Horizontal truncation (CSS ellipsis via `Primer::Beta::Truncate`)
- Text expands/collapsesEnd of the insertion Begin of the deletion

1. Example: [https://qa.openproject-edge.com/admin/roles/report](https://qa.openproject-edge.com/admin/roles/report)

2. Example: [https://qa.openproject-edge.com/workflows/7/edit](https://qa.openproject-edge.com/workflows/7/edit)

2. **additional content is shownEnd of the deletion in Begin of the insertionplace
- Used on: [Permissions Report](https://qa.openproject-edge.com/admin/roles/report), [Workflows](https://qa.openproject-edge.com/workflows/7/edit)

2. **Dialog expansion** — `OpenProject::Common::AttributeComponent` + Stimulus `AttributeController`
- Vertical truncation (`max-height` + `overflow: hidden`)
- OpensEnd of the insertion a Begin of the insertion`Primer::Alpha::Dialog` with full text
- Used forEnd of the insertion Begin of the deletion dialog**: whereEnd of the deletion Project Attributes Begin of the insertion

These share the same core problem — detect truncation, show an expander — but differ on two orthogonal axes:
- **Truncation direction:** horizontal (single-line) vs vertical (multi-lineEnd of the insertion Begin of the deletion are renderedEnd of the deletion via Begin of the insertion`line-clamp`)
- **Expansion mode:** inline (toggle in place) vs dialog (open modal)

### Scope

1. **UnifyEnd of the insertion Begin of the deletion `OpenProject::Common::AttributeComponent` andEnd of the deletion Stimulus Begin of the insertioncontrollers** — foldEnd of the insertion `AttributeController` Begin of the insertioninto `TruncationController` with `mode` (horizontal/vertical) and `inline` (true/false) values
2. **Extend `ExpandableTextComponent`** — support all four combinations of truncation direction × expansion mode
3. **Refactor `AttributeComponent`** — compose `ExpandableTextComponent` instead of managing truncation markup directly
4. **DocumentEnd of the insertion Begin of the deletion


These patterns should be documentedEnd of the deletion in Begin of the insertionLookbook** — previews for all modes + docs page

### Open question for reviewers

The old `AttributeController` had a "text hider" overlay that masked truncated content behind a solid background (needed becauseEnd of the insertion the Begin of the insertionexpand button was absolutely positioned over the text). With the new flex layout and `line-clamp`, this overlay should be unnecessary. Flagged for review.End of the insertion Begin of the deletion Lookbook.End of the deletion

Begin of the insertion### ScreenshotsEnd of the insertion Begin of the deletion #### **Example 1**End of the deletion

#### Begin of the insertionExample 1 (Permissions Report — horizontal inline)

End of the insertion <img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/921290/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/921291/content">

#### Example 2 Begin of the insertion(Project Attributes — vertical dialog)End of the insertion

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/921293/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/921292/content">

### Begin of the insertionRelatedEnd of the insertion Begin of the deletion Scope (tbd)End of the deletion

Begin of the insertion- #75275 — extracted `ExpandableTextComponent`End of the insertion Begin of the deletion Optionally, we may want to consider (or create separate work packages for):

* extracting one ~~or both~~ implementations into a higher-level component, e.g. `OpPrimer::ExpandableText` (done as part of <mention class="mention" data-id="75275" data-type="work_package" data-text="#75275">#75275</mention> )

* investigating whether any `TruncationController`End of the deletion and Begin of the insertionfixed ellipsis alignment (merged)End of the insertion Begin of the deletion `AttributesController` implementation can be shared/DRY&#39;ed up.

* evaiuate accessibility of both approaches.


<br>End of the deletion