From 943889e6d89137966f7e45ec279e1a75b0906e38 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Thu, 26 Dec 2024 22:07:58 +0100 Subject: [PATCH] fix: avoid text overflowing button that is too small --- .changeset/popular-singers-own.md | 6 ++++++ components/button/src/_mixin.scss | 4 ++-- 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 .changeset/popular-singers-own.md diff --git a/.changeset/popular-singers-own.md b/.changeset/popular-singers-own.md new file mode 100644 index 00000000000..6270bf4cdc4 --- /dev/null +++ b/.changeset/popular-singers-own.md @@ -0,0 +1,6 @@ +--- +"@utrecht/button-css": patch +"@utrecht/button-react": patch +--- + +Fix Button to avoid text overflowing button that is too small. diff --git a/components/button/src/_mixin.scss b/components/button/src/_mixin.scss index e8e3292f4fd..75a89ad5a12 100644 --- a/components/button/src/_mixin.scss +++ b/components/button/src/_mixin.scss @@ -231,8 +231,8 @@ justify-content: center; line-height: var(--_utrecht-button-line-height); max-inline-size: var(--utrecht-button-max-inline-size, fit-content); - min-block-size: var(--utrecht-button-min-block-size, 44px); - min-inline-size: var(--utrecht-button-min-inline-size, 44px); + min-block-size: max(var(--utrecht-button-min-block-size, 44px), fit-content); + min-inline-size: max(var(--utrecht-button-min-inline-size, 44px), fit-content); padding-block-end: var(--utrecht-button-padding-block-end); padding-block-start: var(--utrecht-button-padding-block-start); padding-inline-end: var(--utrecht-button-padding-inline-end);