Defect #43984
closed
Current page background in pagination overflows its border
Added by Mizuki ISHIKAWA 21 days ago.
Updated 17 days ago.
Description
It is noticeable that the background color of the current page exceeds the border area. This behavior seems unintended.
This issue can be resolved by adjusting the styles as shown below.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 6684210c1a..6e4949d206 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1206,7 +1206,6 @@ span.pagination {margin-inline-start: 3px; color: var(--oc-gray-6); display: blo
display: inline-block;
padding: 0;
border: 1px solid var(--oc-gray-4);
- margin-inline-start: -1px;
line-height: 2em;
margin-block-end: 1em;
white-space: nowrap;
Before change

After change

Files
- Target version set to Candidate for next minor release
Thank you for posting the fix. However, after applying it, I noticed that the vertical lines between the pagination cells are now displayed at 2px instead of the intended 1px.

Go MAEDA wrote in #note-2:
Thank you for posting the fix. However, after applying it, I noticed that the vertical lines between the pagination cells are now displayed at 2px instead of the intended 1px.
I didn't notice that, thank you for pointing it out.
In the updated patch, I changed the approach to avoid overlapping borders: all items except the first child no longer have a left border.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 6684210c1a..b0a88f58ec 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1206,7 +1206,7 @@ span.pagination {margin-inline-start: 3px; color: var(--oc-gray-6); display: blo
display: inline-block;
padding: 0;
border: 1px solid var(--oc-gray-4);
- margin-inline-start: -1px;
+ border-inline-start-width: 0;
line-height: 2em;
margin-block-end: 1em;
white-space: nowrap;
@@ -1220,6 +1220,7 @@ span.pagination {margin-inline-start: 3px; color: var(--oc-gray-6); display: blo
.pagination ul.pages li:first-child {
border-start-start-radius: 4px;
border-end-start-radius: 4px;
+ border-inline-start-width: 1px;
}
.pagination ul.pages li:last-child {
border-start-end-radius: 4px;
@@ -1228,7 +1229,6 @@ span.pagination {margin-inline-start: 3px; color: var(--oc-gray-6); display: blo
.pagination ul.pages li.current {
color: white;
background-color: var(--oc-blue-7);
- border-color: var(--oc-blue-7);
}
.pagination ul.pages li.page:hover {
background-color: var(--oc-gray-2);

- Tracker changed from Patch to Defect
- Target version changed from Candidate for next minor release to 6.1.3
Thank you for updating the patch. The new one looks fine.
Setting the target version to 6.1.3.
- Subject changed from Pagination current page background extends beyond border to Current page background in pagination overflows its border
- Status changed from New to Resolved
- Assignee set to Go MAEDA
- Resolution set to Fixed
Committed the fix in r24610. Thank you.
- Status changed from Resolved to Closed
Merged the fix into 6.1-stable branch in r24613.
Also available in: Atom
PDF