← Back to team overview

sts-sponsors team mailing list archive

[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