sts-sponsors team mailing list archive

[Nick De Villiers <mp+442096@xxxxxxxxxxxxxxxxxx>]

Nick De Villiers has proposed merging ~nickdv99/maas-site-manager:1583-add-sticky-styling into maas-site-manager:main.

Commit message:
feat(tokens): Add sticky styling to header

Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~nickdv99/maas-site-manager/+git/site-manager/+merge/442096

Note: The header will scroll up slightly before sticking. This is due to top-padding on the main content class resulting in the table being visible above the header when scrolling, meaning that I had to delay the sticky effect by the same height as the padding (0.75rem).

QA steps:

- Go to /settings/tokens
- Scroll down
- Ensure header sticks to the top of the viewport
-- 
Your team MAAS Committers is requested to review the proposed merge of ~nickdv99/maas-site-manager:1583-add-sticky-styling into maas-site-manager:main.

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
index d67a3b7..71f09cf 100644
--- a/frontend/src/App.scss
+++ b/frontend/src/App.scss
@@ -66,6 +66,7 @@
 @import "@/components/SitesList/SitesTable/SitesTable";
 @import "@/components/Placeholder/Placeholder";
 @import "@/components/TokensList/components/TokensTable/TokensTable";
+@import "@/components/TokensList/TokensList";
 @import "@/components/base/CopyButton/CopyButton";
 @import "@/components/base/TablePagination/TablePagination";
 @import "@/components/base/PaginationBar/PaginationBar";
diff --git a/frontend/src/components/TokensList/_TokensList.scss b/frontend/src/components/TokensList/_TokensList.scss
new file mode 100644
index 0000000..25d995b
--- /dev/null
+++ b/frontend/src/components/TokensList/_TokensList.scss
@@ -0,0 +1,7 @@
+.tokens-list-header {
+  position: sticky;
+  top: -0.75rem;
+  background-color: white;
+  z-index: 1;
+  padding-top: 0.75rem;
+}