sts-sponsors team mailing list archive
-
sts-sponsors team
-
Mailing list archive
-
Message #08046
[Merge] ~jonesogolo/maas-site-manager:1595-pagination-single-direction-media-queries into maas-site-manager:main
Jones Ogolo has proposed merging ~jonesogolo/maas-site-manager:1595-pagination-single-direction-media-queries into maas-site-manager:main.
Commit message:
Used single direction media queries for pagination bar styling (mobile-first)
Requested reviews:
MAAS Committers (maas-committers)
For more details, see:
https://code.launchpad.net/~jonesogolo/maas-site-manager/+git/maas-site-manager/+merge/442261
Q.A:
- Navigate to '/settings/tokens'
- Ensure the pagination bar displays correctly on different screens
--
Your team MAAS Committers is requested to review the proposed merge of ~jonesogolo/maas-site-manager:1595-pagination-single-direction-media-queries into maas-site-manager:main.
diff --git a/frontend/src/components/base/PaginationBar/_PaginationBar.scss b/frontend/src/components/base/PaginationBar/_PaginationBar.scss
index 2dbd5c1..753a2e5 100644
--- a/frontend/src/components/base/PaginationBar/_PaginationBar.scss
+++ b/frontend/src/components/base/PaginationBar/_PaginationBar.scss
@@ -5,8 +5,8 @@
padding: $spv--small 0;
margin-bottom: $spv--large;
- @media screen and (max-width: $breakpoint-small) {
- padding-bottom: $spv--small;
+ @media screen and (min-width: $breakpoint-small) {
+ padding-bottom: $spv--medium;
}
.pagination-bar__description {
@@ -15,8 +15,9 @@
}
.pagination-bar__right {
- @media screen and (max-width: $breakpoint-small) {
- width: 100%;
+ width: 100%;
+ @media screen and (min-width: $breakpoint-small) {
+ width: auto;
}
}
diff --git a/frontend/src/components/base/TablePagination/_TablePagination.scss b/frontend/src/components/base/TablePagination/_TablePagination.scss
index 3c96af4..1291e8c 100644
--- a/frontend/src/components/base/TablePagination/_TablePagination.scss
+++ b/frontend/src/components/base/TablePagination/_TablePagination.scss
@@ -1,14 +1,14 @@
.table-pagination {
position: relative;
- margin: 0 $sph--x-large 0 0;
+ margin: 0 $sph--x-large $spv--large 0;
display: flex;
gap: $sph--small;
align-items: center;
list-style: none;
padding: 0;
- @media screen and (max-width: $breakpoint-small) {
- margin-bottom: $spv--large;
+ @media screen and (min-width: $breakpoint-small) {
+ margin-bottom: 0;
}
button {
Follow ups