consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust legislation title height to prevent a layout break

Browse Source 
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
This commit is contained in:
khanhvancong
2025-09-06 16:18:13 +07:00
parent 6f87a0912c
commit 1d437eab03
2 changed files with 27 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/stylesheets/legislation_process.scss
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;
}

22
app/views/legislation/questions/show.html.erb
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>