From f2cd7af8b8a3ab84e3ac21b9b0e9aa99a9b98c3e Mon Sep 17 00:00:00 2001
From: Paul Ryan <125274+figureone@users.noreply.github.com>
Date: Sun, 8 Dec 2024 17:01:37 -1000
Subject: [PATCH] Prevent height change in Collapse component title (#3144)

When toggling show/hide, if the title has a different background color than the content, and if there is lengthy content, you can see the title row/track grow during the animation before returning to its original size. Using `max-content` instead of `auto` in the grid-template-rows rule will lock the height of the title, so only the 2nd row (content) changes from `0fr` to `1fr`.
---
 src/components/unstyled/collapse.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/unstyled/collapse.css b/src/components/unstyled/collapse.css
index 390abbec9d0..caf3df56d45 100644
--- a/src/components/unstyled/collapse.css
+++ b/src/components/unstyled/collapse.css
@@ -3,7 +3,7 @@
 }
 .collapse {
   @apply relative grid overflow-hidden;
-  grid-template-rows: auto 0fr;
+  grid-template-rows: max-content 0fr;
   transition: grid-template-rows 0.2s;
 }
 .collapse-title,
@@ -27,11 +27,11 @@
 .collapse[open],
 .collapse-open,
 .collapse:focus:not(.collapse-close) {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: max-content 1fr;
 }
 .collapse:not(.collapse-close):has(> input[type="checkbox"]:checked),
 .collapse:not(.collapse-close):has(> input[type="radio"]:checked) {
-  grid-template-rows: auto 1fr;
+  grid-template-rows: max-content 1fr;
 }
 .collapse[open] > .collapse-content,
 .collapse-open > .collapse-content,