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