Adjust legislation title height to prevent a layout break

The long question legislation process title will overflow the text box contain,
block the description and make the layout so bad.

The question title box should fit the size of the text, no matter how long it is.

Increase the min-height of the quiz title container in legislation_process.scss to ensure
long titles remain visually contained and do not overflow the header area.
This change improves UI consistency for legislation process pages.

Issue: #6047

app/assets/stylesheets/legislation_process.scss

@@ -173,13 +173,25 @@
   .quiz-header {
     margin-bottom: $line-height;
 
+    @include breakpoint(medium) {
+      display: flex;
+
+      > * {
+        @include grid-column-gutter;
+      }
+
+      .quiz-title {
+        flex-basis: 75%;
+      }
+
+      .quiz-next {
+        flex-basis: 25%;
+      }
+    }
+
     .quiz-title,
     .quiz-next {
       padding: $line-height;
-
-      @include breakpoint(medium) {
-        height: $line-height * 4;
-      }
     }
 
     .quiz-title {
@@ -200,16 +212,15 @@
     }
 
     .quiz-next-link {
-      display: block;
+      @include anchor-color;
 
       &:hover,
       &:active {
-        text-decoration: none;
+        @include anchor-color-hover;
       }
     }
 
     .quiz-next {
-      @include brand-color;
       background: #ccdbe5;
       font-size: $small-font-size;
       font-weight: bold;
@@ -220,12 +231,6 @@
       .icon-angle-right {
         vertical-align: middle;
       }
-
-      &:hover,
-      &:active {
-        @extend %brand-background;
-        text-decoration: none;
-      }
     }
   }
 

app/views/legislation/questions/show.html.erb

@@ -2,26 +2,20 @@
 
 <section class="debate-questions">
   <div class="quiz-header row small-collapse">
-    <div class="small-12 medium-9 column">
     <div class="quiz-title">
       <p class="quiz-header-title"><%= t("legislation.questions.show.title") %></p>
       <strong><%= link_to @process.title, @process %></strong>
     </div>
-    </div>
-    <div class="small-12 medium-3 column">
+    <div class="quiz-next">
       <% if @question.next_question_id %>
         <%= link_to legislation_process_question_path(@process, @question.next_question_id), class: "quiz-next-link" do %>
-          <div class="quiz-next">
           <%= t("legislation.questions.show.next_question") %>
           <span class="icon-angle-right" aria-hidden="true"></span>
-          </div>
         <% end %>
       <% elsif @question.first_question_id %>
         <%= link_to legislation_process_question_path(@process, @question.first_question_id), class: "quiz-next-link" do %>
-          <div class="quiz-next">
           <%= t("legislation.questions.show.first_question") %>
           <span class="icon-angle-right" aria-hidden="true"></span>
-          </div>
         <% end %>
       <% end %>
     </div>