Two independent implementations handle truncated/expandable text using Begin of the insertionPrimer'sEnd of the insertion Begin of the deletion Primer'sEnd of the deletion `HiddenTextExpander`:

1. Begin of the insertion End of the insertion **Inline expansion** — `OpPrimer::ExpandableTextComponent` + Stimulus `TruncationController` Begin of the insertion

* End of the insertion Begin of the deletion
-End of the deletion Horizontal truncation (CSS ellipsis via `Primer::Beta::Truncate`) Begin of the insertion

* End of the insertion Begin of the deletion
-End of the deletion Text expands/collapses in place Begin of the insertion

* End of the insertion Begin of the deletion
-End of the deletion Used on: [Permissions Report](https://qa.openproject-edge.com/admin/roles/report), [Workflows](https://qa.openproject-edge.com/workflows/7/edit) Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion 2. Begin of the insertion End of the insertion **Dialog expansion** — `OpenProject::Common::AttributeComponent` + Stimulus `AttributeController` Begin of the insertion

* End of the insertion Begin of the deletion
-End of the deletion Vertical truncation (`max-height` + `overflow: hidden`) Begin of the insertion

* End of the insertion Begin of the deletion
-End of the deletion Opens a `Primer::Alpha::Dialog` with full text Begin of the insertion

* End of the insertion Begin of the deletion
-End of the deletion Used for Project Attributes Begin of the insertion


End of the insertion Begin of the deletion

End of the deletion These share the same core problem — detect truncation, show an expander — but differ on two orthogonal axes: Begin of the insertion

* End of the insertion Begin of the deletion
-End of the deletion **Truncation direction:** horizontal (single-line) vs vertical (multi-line via `line-clamp`) Begin of the insertion

* End of the insertion Begin of the deletion
-End of the deletion **Expansion mode:** inline (toggle in place) vs dialog (open modal) Begin of the insertion


End of the insertion Begin of the deletion

End of the deletion ### Scope

1. Begin of the insertion End of the insertion **Unify Stimulus controllers** — fold `AttributeController` into `TruncationController` with `mode` (horizontal/vertical) and `inline` (true/false) values Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion 2. Begin of the insertion **Extend** `**ExpandableTextComponent**`End of the insertion Begin of the deletion **Extend `ExpandableTextComponent`**End of the deletion — support all four combinations of truncation direction × expansion mode Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion 3. Begin of the insertion **Refactor** `**AttributeComponent**`End of the insertion Begin of the deletion **Refactor `AttributeComponent`**End of the deletion — compose `ExpandableTextComponent` instead of managing truncation markup directly Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion 4. Begin of the insertion End of the insertion **Document in Lookbook** — previews for all modes + docs page Begin of the insertion


End of the insertion Begin of the deletion

End of the deletion ### Open question for reviewers

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

### Screenshots

#### Example 1 (Permissions Report — horizontal inline)

<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 (Project Attributes — vertical dialog)

<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">

### Related

Begin of the insertion* End of the insertion Begin of the deletion -End of the deletion #75275 — extracted `ExpandableTextComponent` and fixed ellipsis alignment (merged) Begin of the insertion


### Hints for QA

* **Smoke test the Lookbook pages** (ensure they render, no need to check content in-depth)

* Pages &gt; Components &gt; Expandable Text `/lookbook/pages/components/expandable_text`

* Previews &gt; OpenProject &gt; Primer &gt; Expandable Text `/lookbook/inspect/OpenProject/Primer/expandable_text/default`

* Check the application pages listed under &quot;Used in&quot; in the Lookbook (includes pages recently touched in [DREAM-694](https://community.openproject.org/work_packages/DREAM-694))

* Check long text project attributes render correctly in various places: when added as a column in Projects table, or shown in the sidebar on the Project Overview page.


<br>End of the insertion