From 1d437eab03e12a3ead3b74301a32f83404990717 Mon Sep 17 00:00:00 2001
From: khanhvancong <khanhvc2310@gmail.com>
Date: Sat, 6 Sep 2025 16:18:13 +0700
Subject: [PATCH] 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
---
 .../stylesheets/legislation_process.scss      | 33 +++++++++++--------
 app/views/legislation/questions/show.html.erb | 22 +++++--------
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index b752d3688..b738b96e5 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/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;
-      }
     }
   }
 
@@ -247,7 +252,7 @@
       display: inline-block;
       margin-bottom: calc($line-height / 2);
       margin-right: $line-height;
-      padding: calc($line-height / 2)  $line-height * 2;
+      padding: calc($line-height / 2) $line-height * 2;
       position: relative;
     }
 
diff --git a/app/views/legislation/questions/show.html.erb b/app/views/legislation/questions/show.html.erb
index 0f9a800a1..5578932f5 100644
--- a/app/views/legislation/questions/show.html.erb
+++ b/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 class="quiz-title">
+      <p class="quiz-header-title"><%= t("legislation.questions.show.title") %></p>
+      <strong><%= link_to @process.title, @process %></strong>
     </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>
+          <%= t("legislation.questions.show.next_question") %>
+          <span class="icon-angle-right" aria-hidden="true"></span>
         <% 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>
+          <%= t("legislation.questions.show.first_question") %>
+          <span class="icon-angle-right" aria-hidden="true"></span>
         <% end %>
       <% end %>
     </div>