← Back to team overview

sts-sponsors team mailing list archive

[Merge] ~jonesogolo/maas-site-manager:1546-fix-copy-button-tokens-length-64 into maas-site-manager:main

 

Jones Ogolo has proposed merging ~jonesogolo/maas-site-manager:1546-fix-copy-button-tokens-length-64 into maas-site-manager:main.

Commit message:
Increase token length to 64 characters and updated display styling

Requested reviews:
  MAAS Committers (maas-committers)

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

Steps to QA: 
1. Goto /tokens
2. Examine table on different screen sizes and try focusing on the copy button to make sure it's visible.
-- 
Your team MAAS Committers is requested to review the proposed merge of ~jonesogolo/maas-site-manager:1546-fix-copy-button-tokens-length-64 into maas-site-manager:main.
diff --git a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
index 4215dfb..ab1c15b 100644
--- a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
+++ b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
@@ -3,13 +3,31 @@
     width: 3rem;
   }
 
+  thead th:last-child {
+    width: 15rem;
+  }
+
+  thead th:nth-child(3) {
+    width: 15rem;
+  }
+
   @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
     thead th:last-child {
       width: 10rem;
     }
 
     thead th:nth-child(3) {
-      width: 15rem;
+      width: 10rem;
+    }
+  }
+
+  @media screen and (max-width: $breakpoint-small) {
+    thead th:last-child {
+      width: auto;
+    }
+
+    thead th:nth-child(3) {
+      width: auto;
     }
   }
 
@@ -22,14 +40,13 @@
     width: 100%;
     display: flex;
     align-items: center;
-    min-width: 15rem;
 
     &:hover .table-cell__copy-button {
       opacity: 1;
     }
 
     .token-text {
-      max-width: 70%;
+      max-width: 80%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
diff --git a/frontend/src/components/base/CopyButton/_CopyButton.scss b/frontend/src/components/base/CopyButton/_CopyButton.scss
index e535e69..6f4ddd9 100644
--- a/frontend/src/components/base/CopyButton/_CopyButton.scss
+++ b/frontend/src/components/base/CopyButton/_CopyButton.scss
@@ -3,7 +3,7 @@
   border: none;
   background-color: $color-light;
   font-weight: $font-weight-bold;
-  font-size: 0.75rem;
+  font-size: 0.75rem !important;
   border-radius: 0.1875rem;
   opacity: 0;
   transition: all 0.2s ease-out;
diff --git a/frontend/src/mocks/factories.ts b/frontend/src/mocks/factories.ts
index 85894dd..f98b4bc 100644
--- a/frontend/src/mocks/factories.ts
+++ b/frontend/src/mocks/factories.ts
@@ -52,7 +52,7 @@ export const tokenFactory = Factory.define<Token>(({ sequence }) => {
   const chance = new Chance(`maas-${sequence}`);
   return {
     name: `${sequence}`,
-    token: chance.hash({ length: 32 }),
+    token: chance.hash({ length: 64 }),
     expires: new Date(chance.date({ year: 2024 })).toISOString(), //<ISO 8601 date string>,
     created: new Date(chance.date({ year: 2023 })).toISOString(), //<ISO 8601 date string>
   };

Follow ups