Fix followup & suggested questions overflow (#3995)

packages/gitbook/src/components/AIChat/AIChatSuggestedQuestions.tsx

@@ -20,11 +20,12 @@ export default function AIChatSuggestedQuestions(props: {
 
     return (
         <div
-            className="flex flex-col items-start gap-2 self-start"
+            className="flex max-w-full max-w-full flex-col items-start gap-2 self-start"
             data-testid="ai-chat-suggested-questions"
         >
             {suggestions.map((question, index) => (
                 <Button
+                    truncate={false}
                     data-testid="ai-chat-suggested-question"
                     key={question}
                     variant="blank"

packages/gitbook/src/components/AIChat/AiChatFollowupSuggestions.tsx

@@ -17,18 +17,19 @@ export function AIChatFollowupSuggestions(props: {
     return (
         <div className="flex grow flex-col">
             <div
-                className="sticky bottom-0 mt-auto flex flex-col items-start gap-2"
+                className="sticky bottom-0 mt-auto flex max-w-full flex-col items-start gap-2"
                 data-testid="ai-chat-followup-suggestions"
             >
                 {chat.followUpSuggestions.map((suggestion, index) => (
                     <Button
+                        truncate={false}
                         data-testid="ai-chat-followup-suggestion"
                         key={index}
                         onClick={() => {
                             chatController.postMessage({ message: suggestion });
                         }}
                         label={suggestion}
-                        className="starting:h-0 max-w-full origin-left animate-blur-in-slow whitespace-normal border-none bg-primary-11/1 starting:py-0 text-left transition-all transition-discrete duration-500 *:whitespace-normal hover:bg-primary-hover"
+                        className="starting:h-0 max-w-full origin-left animate-blur-in-slow border-none bg-primary-11/1 starting:py-0 text-left transition-all transition-discrete duration-500 hover:bg-primary-hover"
                         size="small"
                         variant="blank"
                         style={{

packages/gitbook/src/components/primitives/Button.tsx

@@ -21,6 +21,7 @@ export type ButtonProps = {
     children?: React.ReactNode;
     active?: boolean;
     tooltipProps?: TooltipProps;
+    truncate?: boolean;
 } & LinkInsightsProps &
     React.HTMLAttributes<HTMLElement>;
 
@@ -115,6 +116,7 @@ export const Button = React.forwardRef<
             trailing,
             disabled,
             tooltipProps,
+            truncate = true,
             ...rest
         },
         ref
@@ -166,7 +168,14 @@ export const Button = React.forwardRef<
             <>
                 {iconElement}
                 {iconOnly || (!children && !label) ? null : (
-                    <span className="button-content truncate">{children ?? label}</span>
+                    <span
+                        className={tcls(
+                            'button-content',
+                            truncate ? 'truncate' : 'whitespace-normal text-start'
+                        )}
+                    >
+                        {children ?? label}
+                    </span>
                 )}
             </>
         );