Add green CTA partial to ResultsBoxComponent (#4498)

* Add cta component to routes wizard results box

* Fix responsiveness of cta circle icon

app/components/content/results_box_component.html.erb

@@ -27,7 +27,7 @@
     </div>
     <div class="results-box__text results-box__full-width-text"><%= text %></div>
     <div class="results-box__cta">
-      <%= render Content::LinkAsButtonComponent.new(link_text: @link_text, href: @link_target) %>
+      <%= render "content/shared/links_and_buttons/cta_circle_button_link", href: @link_target, cta_link_text: @link_text %>
     </div>
   </section>
 </div>

app/webpacker/styles/links-and-buttons.scss

@@ -242,9 +242,9 @@ body a.govuk-back-link {
 // CTA link with green arrow circle button
 // Partial for rendering here: app/views/shared/_cta_circle_link.html.erb
 .cta-circle-link-wrapper {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4em;
+  display: flex;
+  align-items: top;
+  gap: 0.5em;
   padding: 0.1em;
   @extend .link;
   text-decoration: none;
@@ -257,18 +257,19 @@ body a.govuk-back-link {
     background-color: $cta-green;
     height: 28px;
     width: 28px;
-
+    flex-shrink: 0;
+
     i {
       color: $white;
     }
   }
-  
+
   .cta-link-text {
     @include font-size("small");
     @extend .link;
     text-decoration: underline;
   }
-  
+
   &:hover {
     .cta-circle-button {
       background-color: darken($cta-green, 5%);
@@ -284,7 +285,7 @@ body a.govuk-back-link {
       color: $white;
       text-decoration: none;
     }
-    
+
     .cta-circle-button {
       background-color: $cta-green;
     }