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
This commit is contained in:
Javi Martín
2025-09-30 13:18:29 +02:00
committed by GitHub
2 changed files with 27 additions and 28 deletions

View File

@@ -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;
}

View File

@@ -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>