UX: prevent badge description text overflow, adjust favorite button (#38284)

Reported here:
https://meta.discourse.org/t/long-description-text-box-for-badges-extends-beyond-boundary/396167

This prevents the overflow, adds a class to the parent container when
the favorite button is available, and makes the favorite button a little
smaller to give it more space from descriptions (which could technically
overlap in some specific cases).

Before:
<img width="400" alt="image"
src="https://github.com/user-attachments/assets/33166922-12af-4595-aec6-7824a9e77ce5"
/>


After:
<img width="400" alt="image"
src="https://github.com/user-attachments/assets/02ee0a94-1cee-4539-8837-0329ed9a213a"
/>

Before:
<img width="400" alt="image"
src="https://github.com/user-attachments/assets/e88ea366-e504-49d1-ba14-08904e52ce6c"
/>

After:
<img width="400" alt="image"
src="https://github.com/user-attachments/assets/04dba4f2-ae03-49a0-af95-7bd786b39e93"
/>

app/assets/stylesheets/common/base/user-badges.scss

@@ -165,6 +165,8 @@
     right: 0;
     bottom: 0;
     z-index: 1;
+    border-radius: var(--d-button-border-radius) 0 var(--d-button-border-radius)
+      0;
   }
 
   .badge-contents {
@@ -188,11 +190,15 @@
       }
     }
 
-    .badge-summary:has(a) {
-      // for summary links to be reachable
-      // they must be positioned above .badge-link:after
-      position: relative;
-      z-index: 1;
+    .badge-summary {
+      overflow-wrap: break-word;
+
+      &:has(a) {
+        // for summary links to be reachable
+        // they must be positioned above .badge-link:after
+        position: relative;
+        z-index: 1;
+      }
     }
 
     .badge-icon {
@@ -226,6 +232,7 @@
     }
 
     .badge-info {
+      min-width: 0;
       color: var(--primary);
 
       h3 {
@@ -253,6 +260,15 @@
       }
     }
   }
+
+  &.--can-favorite {
+    // helps description text avoid favorite button overlap
+    .badge-summary {
+      width: 100%;
+      padding-right: var(--space-6);
+      box-sizing: border-box;
+    }
+  }
 }
 
 .badges-granted {

frontend/discourse/app/components/badge-card.gjs

@@ -62,7 +62,10 @@ export default class BadgeCard extends Component {
 
   <template>
     <div
-      class="badge-card --badge-{{this.size}}"
+      class="badge-card --badge-{{this.size}}{{if
+          @canFavorite
+          ' --can-favorite'
+        }}"
       data-badge-slug={{@badge.slug}}
     >
       <div class="badge-contents">
@@ -124,7 +127,7 @@ export default class BadgeCard extends Component {
           <DButton
             @icon="star"
             @action={{@onFavoriteClick}}
-            class="btn-default favorite-btn"
+            class="btn-default favorite-btn btn-small"
           />
         {{else}}
           <DButton
@@ -136,7 +139,7 @@ export default class BadgeCard extends Component {
               "badges.favorite_max_reached"
             }}
             @disabled={{not @canFavoriteMoreBadges}}
-            class="btn-default favorite-btn"
+            class="btn-default favorite-btn btn-small"
           />
         {{/if}}
       {{/if}}