diff --git a/.changeset/easy-cobras-design.md b/.changeset/easy-cobras-design.md new file mode 100644 index 0000000000..693eb3bd4d --- /dev/null +++ b/.changeset/easy-cobras-design.md @@ -0,0 +1,5 @@ +--- +'@openproject/primer-view-components': patch +--- + +Fix `CollapsibleHeader` title truncation when `multi_line: false`. diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/dark_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/dark_colorblind.png index bec83a07fd..a9f1f2f611 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/dark_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/dark_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/light.png index a405f0b63c..6dda568924 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/light.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/light_colorblind.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/light_colorblind.png index 8b7c4900e5..323cd3d2d9 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/light_colorblind.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/light_colorblind.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/light_high_contrast.png index a6b224f774..d6d8d5a7ea 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/light_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/dark_dimmed.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/dark_dimmed.png index 84b8475ca1..b55755348c 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/dark_dimmed.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/dark_dimmed.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/light.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/light.png index ad56d0d4ed..a890f61506 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/light.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/light.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/light_high_contrast.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/light_high_contrast.png index 017774d6f4..2756ff889f 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/light_high_contrast.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/light_high_contrast.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/collapsed/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/collapsed/default.png index 8a65440975..b7e47665e7 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/collapsed/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/collapsed/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/collapsed/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/collapsed/focused.png index 26abc5637d..58811e0227 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/collapsed/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/collapsed/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/default/default.png index 9b433c1af6..841143623b 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/default/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/default/focused.png index 2763dead4c..b762a0a770 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/default/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/default/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_count/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_count/default.png index 96a8803ad2..ad8d469a26 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_count/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_count/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_count/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_count/focused.png index de1cc4d91f..711c5625c0 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_count/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_count/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_description/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_description/default.png index fd0392de36..df6e578bbc 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_description/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_description/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_description/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_description/focused.png index 3aa37503c6..c3e71bb950 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_description/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/border_box/collapsible_header/with_description/focused.png differ diff --git a/app/components/primer/open_project/border_box/collapsible_header.pcss b/app/components/primer/open_project/border_box/collapsible_header.pcss index 561e6ac7f3..2be7fd3a3a 100644 --- a/app/components/primer/open_project/border_box/collapsible_header.pcss +++ b/app/components/primer/open_project/border_box/collapsible_header.pcss @@ -26,6 +26,7 @@ align-items: center; column-gap: var(--stack-gap-normal); row-gap: var(--base-size-4); + overflow: hidden; .CollapsibleHeader > & { flex: 1; @@ -66,10 +67,12 @@ } .CollapsibleHeader-title-line { + flex-basis: 66%; display: flex; align-items: center; gap: var(--stack-gap-condensed); - min-width: fit-content; + overflow: hidden; + max-width: 100%; } .CollapsibleHeader-description { diff --git a/app/components/primer/open_project/border_box/collapsible_header.rb b/app/components/primer/open_project/border_box/collapsible_header.rb index 7ce74202ae..c4d0a99551 100644 --- a/app/components/primer/open_project/border_box/collapsible_header.rb +++ b/app/components/primer/open_project/border_box/collapsible_header.rb @@ -22,7 +22,7 @@ class CollapsibleHeader < Primer::Component "Box-title" ) - Primer::Beta::Heading.new(tag: fetch_or_fallback(TITLE_TAG_OPTIONS, tag, TITLE_TAG_DEFAULT), **system_arguments) + Primer::Beta::Truncate.new(tag: fetch_or_fallback(TITLE_TAG_OPTIONS, tag, TITLE_TAG_DEFAULT), **system_arguments) } # Optional count