Merge pull request #2532 from overleaf/hb-fix-bonus-overflow

Set a min width for the perks on the bonus page

GitOrigin-RevId: c767787c14c38790e5250c1647f392ec7d8a8861

services/web/app/views/referal/bonus.pug

@@ -28,7 +28,7 @@ block content
 											i.fa.fa-fw.fa-2x.fa-twitter(aria-hidden)
 											|
 											| Tweet
-									
+
 							.row
 								.col-md-8.col-md-offset-2.bonus-banner
 									.title
@@ -78,7 +78,7 @@ block content
 										.progress-bar.progress-bar-info(style="width: "+refered_user_count+"0%")
 
 							.row.ab-bonus
-								.col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 70px;")
+								.col-md-10.col-md-offset-1.bonus-banner(style="position: relative; height: 110px;")
 									.perk(style="left: 10%;", class = refered_user_count >= 1 ? "active" : "") #{translate("one_free_collab")}
 									.perk(style="left: 30%;", class = refered_user_count >= 3 ? "active" : "") #{translate("three_free_collab")}
 									.perk(style="left: 60%;", class = refered_user_count >= 6 ? "active" : "") #{translate("free_dropbox_and_history")} + #{translate("three_free_collab")}
@@ -93,7 +93,7 @@ block content
 										p.thanks !{translate("you_introed_small_number", {numberOfPeople:"<strong>" + refered_user_count + "</strong>"})}
 									- else
 										p.thanks !{translate("you_introed_high_number", {numberOfPeople:"<strong>" + refered_user_count + "</strong>"})}
-						
+
 						script(type="text/ng-template", id="BonusLinkToUsModal")
 							.modal-header
 								button.close(
@@ -163,4 +163,3 @@ block append foot-scripts
 				ga('send', 'event', 'referal-button', 'clicked', "direct-link")
 			});
 		});
-

services/web/frontend/stylesheets/app/bonus.less

@@ -93,6 +93,7 @@
     border-radius: 5px;
     text-align: center;
     padding: 5px 5px;
+    min-width: min-content;
     width: 110px;
     margin-left: -50px;
     font-size: 14px;