Actions
Defect #43984
closed
Current page background in pagination overflows its border
Resolution:
Fixed
Affected version:
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 
Updated by Mizuki ISHIKAWA 20 days 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);
Actions