make button not overflow

src/components/AdventurerRecruitment.vue

@@ -32,10 +32,10 @@
     </div>
     <div>
       <button
-        class="button metal"
+        class="button metal find-recruit"
         :disabled="recruitSlotsFilled || guild.gold < newRecruitCost"
         @click="findNewRecruit()"
-      >Find a recruit now {{(`${formatGold(newRecruitCost)} gold`)}}</button>
+      >Find a recruit now {{(`(${formatGold(newRecruitCost)}) gold`)}}</button>
     </div>
   </section>
 </template>
@@ -107,6 +107,10 @@ section {
   overflow-x: hidden;
 }
 
+.find-recruit {
+  text-wrap: wrap;
+}
+
 .adventurers {
   display: flex;
   flex-direction: row;