sts-sponsors team mailing list archive

[Peter Makowski <mp+442634@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/maas-site-manager:fix-validation-message-cutoff-MAASENG-1611 into maas-site-manager:main.

Commit message:
fix: validation message cutoff MAASENG-1611


Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/442634
-- 
Your team MAAS Committers is requested to review the proposed merge of ~petermakowski/maas-site-manager:fix-validation-message-cutoff-MAASENG-1611 into maas-site-manager:main.

diff --git a/frontend/src/components/base/PaginationBar/PaginationBar.tsx b/frontend/src/components/base/PaginationBar/PaginationBar.tsx
index 0c1eefe..69d8bb4 100644
--- a/frontend/src/components/base/PaginationBar/PaginationBar.tsx
+++ b/frontend/src/components/base/PaginationBar/PaginationBar.tsx
@@ -49,28 +49,30 @@ const PaginationBar = ({
 
   return (
     <section className="pagination-bar u-flex u-flex--justify-between u-flex--wrap">
-      <strong className="pagination-bar__description">
-        Showing {getDisplayedDataCount()} out of {totalItems} {dataContext}
-      </strong>
+      <div className="p-form p-form--inline">
+        <strong className="pagination-bar__description">
+          Showing {getDisplayedDataCount()} out of {totalItems} {dataContext}
+        </strong>
 
-      <div className="u-flex u-flex--wrap u-flex--column-x-small pagination-bar__right">
-        <TablePagination
-          currentPage={currentPage}
-          isLoading={isLoading}
-          itemsPerPage={itemsPerPage}
-          onNextClick={onNextClick}
-          onPreviousClick={onPreviousClick}
-          setCurrentPage={setCurrentPage}
-          totalItems={totalItems}
-        />
+        <div className="u-flex u-flex--wrap u-flex--column-x-small pagination-bar__right">
+          <TablePagination
+            currentPage={currentPage}
+            isLoading={isLoading}
+            itemsPerPage={itemsPerPage}
+            onNextClick={onNextClick}
+            onPreviousClick={onPreviousClick}
+            setCurrentPage={setCurrentPage}
+            totalItems={totalItems}
+          />
 
-        <Select
-          aria-label="Tokens per page"
-          name="Tokens per page"
-          onChange={handleSizeChange}
-          options={pageOptions}
-          value={itemsPerPage}
-        />
+          <Select
+            aria-label="Tokens per page"
+            name="Tokens per page"
+            onChange={handleSizeChange}
+            options={pageOptions}
+            value={itemsPerPage}
+          />
+        </div>
       </div>
     </section>
   );
diff --git a/frontend/src/components/base/PaginationBar/_PaginationBar.scss b/frontend/src/components/base/PaginationBar/_PaginationBar.scss
index 7ee6678..4227570 100644
--- a/frontend/src/components/base/PaginationBar/_PaginationBar.scss
+++ b/frontend/src/components/base/PaginationBar/_PaginationBar.scss
@@ -5,6 +5,14 @@
   padding: $spv--small 0;
   margin-bottom: $spv--large;
 
+  .p-form--inline {
+      width: 100%;
+  }
+  
+  label {
+    margin-bottom: 0;
+  }
+
   .pagination-bar__description {
     margin: 0;
     padding: 0;
@@ -12,6 +20,8 @@
 
   .pagination-bar__right {
     width: 100%;
+    margin-left: auto;
+    margin-right: 0;
 
     @media screen and (min-width: $breakpoint-small) {
       width: auto;
diff --git a/frontend/src/components/base/TablePagination/TablePagination.tsx b/frontend/src/components/base/TablePagination/TablePagination.tsx
index b5887f1..ce8d599 100644
--- a/frontend/src/components/base/TablePagination/TablePagination.tsx
+++ b/frontend/src/components/base/TablePagination/TablePagination.tsx
@@ -70,7 +70,9 @@ const TablePagination = ({
       >
         <Icon className="u__left-rotate" name="chevron-down" />
       </Button>
-      <strong>Page</strong>
+      <label>
+        <strong>Page</strong>
+      </label>
       <Input
         aria-label="current page"
         className="current-page"
@@ -82,7 +84,9 @@ const TablePagination = ({
         type="number"
         value={pageNumber}
       />
-      <strong className="u-no-wrap"> of {totalPages}</strong>
+      <label>
+        <strong className="u-no-wrap"> of {totalPages}</strong>
+      </label>
       <Button
         appearance="base"
         aria-label="next page"
diff --git a/frontend/src/components/base/TablePagination/_TablePagination.scss b/frontend/src/components/base/TablePagination/_TablePagination.scss
index 1291e8c..7c23942 100644
--- a/frontend/src/components/base/TablePagination/_TablePagination.scss
+++ b/frontend/src/components/base/TablePagination/_TablePagination.scss
@@ -3,9 +3,7 @@
   margin: 0 $sph--x-large $spv--large 0;
   display: flex;
   gap: $sph--small;
-  align-items: center;
   list-style: none;
-  padding: 0;
 
   @media screen and (min-width: $breakpoint-small) {
     margin-bottom: 0;
@@ -13,6 +11,7 @@
 
   button {
     margin: 0;
+    align-self: flex-start;
   }
 
   .u__left-rotate {
@@ -28,7 +27,7 @@
     margin-bottom: 0;
 
     .current-page {
-      width: 100%;
+      width: 3rem;
       min-width: 1.625rem;
       margin-bottom: 0;
       text-align: center;
@@ -49,10 +48,9 @@
     }
 
     .p-form-validation__message {
-      position: absolute;
-      left: 0.625rem;
-      margin-top: 0;
-      white-space: nowrap;
+      width: max-content;
+      margin-top: $sph--small;
+      margin-bottom: 0;
     }
   }
 }