Merge pull request #6071 from KhanhVanCong/fix-bug/6047-the-legislation-title-text-box-does-not-fix-size-of-text

Adjust legislation title height to prevent a layout break

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>