Fix button content truncate (#3693)

Author: zenoachtig

.changeset/spicy-trainers-dance.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix button content truncate

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

@@ -1,7 +1,6 @@
 'use client';
 import { useLanguage } from '@/intl/client';
 import { t } from '@/intl/translate';
-import { tcls } from '@/lib/tailwind';
 import type { Assistant } from '../AI';
 import { Button } from '../primitives';
 import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
@@ -24,7 +23,7 @@ export function AIChatButton(props: {
             iconOnly={!showLabel}
             size="medium"
             variant="header"
-            className={tcls('h-9 px-2.5')}
+            className="h-9 px-2.5 max-md:[&_.button-content]:hidden"
             label={
                 <div className="flex items-center gap-2">
                     {t(language, 'ai_chat_ask', assistant.label)}
@@ -38,7 +37,7 @@ export function AIChatButton(props: {
             }
             onClick={() => assistant.open()}
         >
-            {showLabel ? <span className="max-md:hidden">{t(language, 'ask')}</span> : null}
+            {showLabel ? t(language, 'ask') : null}
         </Button>
     );
 }

packages/gitbook/src/components/Search/SearchInput.tsx

@@ -72,7 +72,7 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                         'has-[input:focus]:-translate-y-px h-9 grow cursor-pointer px-2.5 has-[input:focus]:bg-tint-base has-[input:focus]:depth-subtle:shadow-lg has-[input:focus]:depth-subtle:shadow-primary-subtle has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-primary-hover md:cursor-text',
                         'theme-bold:border-header-link/3 has-[input:focus-visible]:theme-bold:border-header-link/5 has-[input:focus-visible]:theme-bold:bg-header-link/3 has-[input:focus-visible]:theme-bold:ring-header-link/5',
                         'theme-bold:before:absolute theme-bold:before:inset-0 theme-bold:before:bg-header-background/7 theme-bold:before:backdrop-blur-xl ', // Special overlay to make the transparent colors of theme-bold visible.
-                        'relative z-30 shrink grow justify-start max-md:absolute max-md:right-0',
+                        'relative z-30 max-w-none shrink grow justify-start max-md:absolute max-md:right-0',
                         isOpen ? 'max-md:w-56' : 'max-md:w-[38px]'
                     )}
                 >

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

@@ -145,7 +145,9 @@ export const Button = React.forwardRef<
                         icon
                     )
                 ) : null}
-                {iconOnly ? null : (children ?? label)}
+                {iconOnly || (!children && !label) ? null : (
+                    <span className="button-content truncate">{children ?? label}</span>
+                )}
             </>
         );
 

packages/gitbook/src/components/primitives/styles.ts

@@ -35,6 +35,7 @@ export const ButtonStyles = [
     'grow-0',
     'shrink-0',
     'truncate',
+    'max-w-full',
 
     'disabled:cursor-not-allowed',
     'disabled:translate-y-0!',