Merge pull request #286 from storytold/bflat-fy-landing-product-overflow-fix

landing page face animation product box text overflow fix

packages/fakeyou.com/src/scss/site-refresh.scss

@@ -673,10 +673,10 @@ styles with important tags:
     font-weight: 600;
     font-size: 12px;
     padding: 2px 6px;
+    margin-top: -1px !important;
     border: none;
     border-radius: 0.3rem;
     opacity: 0.85;
-    max-height: 18px;
     background-color: #fff3d0;
     color: #833c00;
   }

packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx

@@ -303,13 +303,17 @@ function LandingPage(props: Props) {
             >
               <div className="d-flex px-4 pt-4 align-items-start w-100">
                 <div className="flex-grow-1">
-                  <h4 className="fw-bold text-white mb-1 d-flex align-items-center text-nowrap">
-                    <span className="badge-new mt-0 me-2">
+                  <div className="mb-1">
+                    <span className="badge-new d-inline-flex align-items-center mb-2 me-2">
                       <FontAwesomeIcon icon={faSparkles} className="me-1" />
                       {t("productNewTag")}
                     </span>
-                    {t("productFaceAnimatorTitle")}
-                  </h4>
+
+                    <h4 className="fw-bold text-white d-inline-flex align-items-center mb-0">
+                      <span>{t("productFaceAnimatorTitle")}</span>
+                    </h4>
+                  </div>
+
                   <h6 className="fw-normal opacity-75 text-white">
                     {t("productFaceAnimatorText")}
                   </h6>