From 44f35d55b017e897872d2d8c7c157de4bb5aeb0b Mon Sep 17 00:00:00 2001
From: IDRISSI HAMZA <97639117+idrissi-hamza@users.noreply.github.com>
Date: Sat, 21 Oct 2023 13:09:10 +0100
Subject: [PATCH] fix(components): fix text wrapping issue in buttons (#1548)

## What does this PR do?

This pull request resolves an issue where the button text wraps onto the next line in specific screen sizes when the text contains two or more words. By applying the whitespace-nowrap utility class to the button element, the text now remains on a single line, even on screens with limited space. This enhancement ensures a consistent and visually pleasing user experience across various devices :

### Before (Get Started Button)
![before](https://github.com/shadcn-ui/ui/assets/97639117/50c8211d-2ed7-46d0-8ab2-d4c565d0d6f3)


### After  (Get Started Button)
![after](https://github.com/shadcn-ui/ui/assets/97639117/0f9f7e68-31e8-4011-a2ca-d7e59b3690ee)





This problem arises in other projects utilizing Shadcn, and this pull request addresses and resolves the issue, as demonstrated in the Cal.com project example:

### Before (Set Up Button)
![button-before](https://github.com/calcom/cal.com/assets/97639117/8f588a53-411a-4e9d-95df-76bd42d480d7)

### After  (Set Up Button)
![button-fixed](https://github.com/calcom/cal.com/assets/97639117/4c74e77a-a2cd-4b0c-87ee-a82dbefc23eb)
---
 apps/www/registry/default/ui/button.tsx  | 2 +-
 apps/www/registry/new-york/ui/button.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/registry/default/ui/button.tsx b/apps/www/registry/default/ui/button.tsx
index ac8e0c9ada..0ba4277355 100644
--- a/apps/www/registry/default/ui/button.tsx
+++ b/apps/www/registry/default/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
diff --git a/apps/www/registry/new-york/ui/button.tsx b/apps/www/registry/new-york/ui/button.tsx
index 4ecf36902a..85d20f2867 100644
--- a/apps/www/registry/new-york/ui/button.tsx
+++ b/apps/www/registry/new-york/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {