From 641eb4e3a293e73c50586c7bed9b06fce1cc6f50 Mon Sep 17 00:00:00 2001
From: Juan Pablo Mitriatti <juan.mitriatti@gmail.com>
Date: Wed, 16 Jul 2025 14:07:20 -0300
Subject: [PATCH 1/2] feat(unity-bootstrap-theme): added mixin to expand
 clickable area for btn

UDS-1970
---
 .../src/scss/extends/_buttons.scss               | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss b/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss
index 97233328e3..d3d75a96fb 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss
@@ -5,6 +5,19 @@
     1rem;
 }
 
+@mixin clickable-area($min-width: 80px, $min-height: 44px) {
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    min-width: $min-width;
+    min-height: $min-height;
+    z-index: -1;
+    inset: 0;
+    margin: auto;
+  }
+}
+
 // Extra styles that don't have bootstrap variables to override
 .btn {
   text-decoration: none;
@@ -20,11 +33,14 @@
   }
   &.btn-md {
     @include btn-md;
+    @include clickable-area(80px, 44px);
   }
   &.btn-sm {
     font-size: 0.75rem;
     padding: $uds-component-button-padding-y-small
       $uds-component-button-padding-x-small;
+
+    @include clickable-area(64px, 44px);
   }
   &.btn-tag {
     font-size: 0.75rem;

From 6b791b57d4411eaa2aa71c91824e746c36367e5c Mon Sep 17 00:00:00 2001
From: Juan Pablo Mitriatti <juan.mitriatti@gmail.com>
Date: Wed, 13 Aug 2025 09:27:02 -0300
Subject: [PATCH 2/2] feat(unity-bootstrap-theme): applied some feedback
 changes

UDS-1970
---
 .../src/scss/extends/_buttons.scss                   | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss b/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss
index d3d75a96fb..2ac972f13a 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_buttons.scss
@@ -5,15 +5,12 @@
     1rem;
 }
 
-@mixin clickable-area($min-width: 80px, $min-height: 44px) {
+@mixin clickable-area() {
   position: relative;
   &::before {
     content: "";
     position: absolute;
-    min-width: $min-width;
-    min-height: $min-height;
-    z-index: -1;
-    inset: 0;
+    inset: -10px;
     margin: auto;
   }
 }
@@ -24,6 +21,8 @@
   font-weight: bold;
   white-space: nowrap;
   width: max-content !important;
+  @include clickable-area();
+
   &::first-letter {
     text-transform: uppercase;
   }
@@ -33,14 +32,11 @@
   }
   &.btn-md {
     @include btn-md;
-    @include clickable-area(80px, 44px);
   }
   &.btn-sm {
     font-size: 0.75rem;
     padding: $uds-component-button-padding-y-small
       $uds-component-button-padding-x-small;
-
-    @include clickable-area(64px, 44px);
   }
   &.btn-tag {
     font-size: 0.75rem;