feat(atomic): add variable for collapsed rga height (#4633)

Following [this PR](#4622).
Backporting the variable addition to V2 to be able to support the
feature ASAP in the builders.

---------

Co-authored-by: Jean-Philippe Marceau <39384459+jpmarceau@users.noreply.github.com>
Co-authored-by: GitHub Actions Bot <>

packages/atomic/src/components.d.ts

@@ -1064,7 +1064,7 @@ export namespace Components {
          */
         "answerStyle": GeneratedAnswerStyle;
         /**
-          * Whether to allow the answer to be collapsed when the text is taller than 250px.
+          * Whether to allow the answer to be collapsed when the text is taller than the specified `--atomic-crga-collapsed-height` value (16rem by default).
           * @default false
          */
         "collapsible"?: boolean;
@@ -6749,7 +6749,7 @@ declare namespace LocalJSX {
          */
         "answerStyle"?: GeneratedAnswerStyle;
         /**
-          * Whether to allow the answer to be collapsed when the text is taller than 250px.
+          * Whether to allow the answer to be collapsed when the text is taller than the specified `--atomic-crga-collapsed-height` value (16rem by default).
           * @default false
          */
         "collapsible"?: boolean;

packages/atomic/src/components/common/generated-answer/styles/generated-answer.pcss

@@ -96,17 +96,24 @@
   }
 }
 
+/**
+ * @prop --atomic-crga-collapsed-height: The maximum height of the collapsed generated answer container.
+ */
 [part='generated-container'] {
   &.answer-collapsed {
-    @apply relative max-h-64 overflow-hidden content-[''];
+    @apply relative overflow-hidden content-[''];
+    max-height: var(--atomic-crga-collapsed-height, 16rem);
 
     .feedback-buttons {
       @apply hidden;
     }
   }
   &.answer-collapsed:before {
     @apply absolute left-0 top-0 h-full w-full content-[''];
-    background: linear-gradient(transparent 11.25rem, var(--atomic-background));
+    background: linear-gradient(
+      transparent calc(var(--atomic-crga-collapsed-height, 16rem) * 0.7),
+      var(--atomic-background)
+    );
   }
 }
 

packages/atomic/src/components/search/atomic-generated-answer/atomic-generated-answer.tsx

@@ -109,7 +109,7 @@ export class AtomicGeneratedAnswer implements InitializableComponent {
   @Prop() withToggle?: boolean;
 
   /**
-   * Whether to allow the answer to be collapsed when the text is taller than 250px.
+   * Whether to allow the answer to be collapsed when the text is taller than the specified `--atomic-crga-collapsed-height` value (16rem by default).
    * @default false
    */
   @Prop() collapsible?: boolean;