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;
}
}
}
--
Mailing list: https://launchpad.net/~sts-sponsors
Post to : sts-sponsors@lists.launchpad.net
Unsubscribe : https://launchpad.net/~sts-sponsors
More help : https://help.launchpad.net/ListHelp
