Diff comments:
> diff --git a/frontend/src/components/TokensList/_TokensList.scss
> b/frontend/src/components/TokensList/_TokensList.scss
> index 3171cbd..cf0fca6 100644
> --- a/frontend/src/components/TokensList/_TokensList.scss
> +++ b/frontend/src/components/TokensList/_TokensList.scss
> @@ -1,9 +1,46 @@
> +$header-height-medium: 34.6875rem;
> +$header-height-large: 23.4375rem;
> +$instructions-height-medium: 10.9375rem;
Thanks for updating. I created a follow up JIRA issue for this:
https://warthogs.atlassian.net/browse/MAASENG-1609
> +
> .tokens-list-header {
> + display: grid;
> +
> @media only screen and (min-width: $breakpoint-small) {
> + height: $header-height-medium;
> position: sticky;
> top: -0.75rem;
> background-color: white;
> z-index: 1;
> padding-top: 0.75rem;
> }
> +
> + @media only screen and (min-width: $breakpoint-large) {
> + height: $header-height-large;
> + }
> +
> + .tokens-list-certificate {
> + display: grid;
> + width: 100%;
> + grid-template-columns: 1fr 1fr;
> + grid-gap: $spv--small;
> + overflow-x: auto;
> + white-space: nowrap;
> + margin-bottom: $spv--large * 2;
> +
> + @media only screen and (min-width: $breakpoint-large) {
> + width: fit-content;
> + }
> + }
> +
> + .tokens-list-instructions {
> + height: $instructions-height-medium;
> +
> + @media only screen and (min-width: $breakpoint-large) {
> + height: auto;
> + }
> + }
> +
> + .pagination-bar {
> + margin-bottom: 0;
> + }
> }
> diff --git
> a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
> b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
> index 2dd28ec..208e9f1 100644
> ---
> a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
> +++
> b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
> @@ -1,4 +1,20 @@
> .tokens-table {
> + thead th {
> + position: sticky;
> + top: -0.75rem;
Please use $spv--medium variable
> + background-color: white;
> + z-index: 1;
> + padding-top: $spv--large;
> +
> + @media only screen and (min-width: $breakpoint-small){
> + top: calc($header-height-medium - 0.75rem);
> + }
> +
> + @media only screen and (min-width: $breakpoint-large) {
> + top: calc($header-height-large - 0.75rem);
> + }
> + }
> +
> td,
> th {
> vertical-align: middle;
--
https://code.launchpad.net/~nickdv99/maas-site-manager/+git/site-manager/+merge/442192
Your team MAAS Committers is requested to review the proposed merge of
~nickdv99/maas-site-manager:adjust-sticky-styling into maas-site-manager:main.
--
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
