Defect #43984
closed
Current page background in pagination overflows its border
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
Updated by Go MAEDA about 2 months ago
- Target version set to Candidate for next minor release
Updated by Go MAEDA about 2 months ago
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.
Updated by Mizuki ISHIKAWA about 2 months ago
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);
Updated by Go MAEDA about 2 months ago
- 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.
Updated by Go MAEDA about 2 months ago
- 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.
Updated by Go MAEDA about 2 months ago
- Status changed from Resolved to Closed
Merged the fix into 6.1-stable branch in r24613.