From c1811f449894b7217d8ad2ee1d5e7c390c38c52d Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Thu, 2 Feb 2023 18:40:34 +0530
Subject: [PATCH 01/20] #24023 Update _HelpUserSettingsTab.pcss

Updated _HelpUserSettingsTab.pcss File, made the access key field scroll able as required for some cases when access key is longer it overflows out of border.
( Tested this logic on google devtools online )
---
 res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index c03de9f36ce..bcf285295fa 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -29,3 +29,7 @@ limitations under the License.
         }
     }
 }
+
+.mx_CopyableText {
+    overflow:scroll;
+}

From 8b2fc7424f83de1705522f56f856758df1ecc20c Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Fri, 3 Feb 2023 16:06:30 +0530
Subject: [PATCH 02/20] Fix for Access token overflows the box Issue

On Element-web, when Access Key is longer in some cases it overflows the box , as defined in issue #24023.
So, to solve this issue, I made changes for the case of overflow of Access Key value, it should be scroll-able rather than overflowing outside.
---
 res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index bcf285295fa..712ba85c3fd 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -33,3 +33,4 @@ limitations under the License.
 .mx_CopyableText {
     overflow:scroll;
 }
+

From 92dc19505bfee66081f1bcff82fa12f46ba7f7b0 Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Fri, 3 Feb 2023 23:34:08 +0530
Subject: [PATCH 03/20] Update _HelpUserSettingsTab.pcss

---
 res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index 712ba85c3fd..3a5f587ca7f 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -31,6 +31,5 @@ limitations under the License.
 }
 
 .mx_CopyableText {
-    overflow:scroll;
-}
-
+    overflow: scroll;
+}
\ No newline at end of file

From 003067efdb3d41b6f953a4398ac61eb8564c27f2 Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Sat, 4 Feb 2023 13:56:42 +0530
Subject: [PATCH 04/20] Update _HelpUserSettingsTab.pcss

---
 res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index 3a5f587ca7f..ae232661d41 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -31,5 +31,5 @@ limitations under the License.
 }
 
 .mx_CopyableText {
-    overflow: scroll;
+  overflow: scroll;
 }
\ No newline at end of file

From 5a0f7d9d5f479b07fce58420b2759d91d78d8bb8 Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Sat, 4 Feb 2023 13:58:34 +0530
Subject: [PATCH 05/20] Update _HelpUserSettingsTab.pcss

---
 res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index ae232661d41..171afd05821 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -31,5 +31,5 @@ limitations under the License.
 }
 
 .mx_CopyableText {
-  overflow: scroll;
+   overflow: scroll;
 }
\ No newline at end of file

From c7a27a776162109f8f7f4c85facc525a29b1b179 Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Sun, 5 Feb 2023 22:05:27 +0530
Subject: [PATCH 06/20] Update _HelpUserSettingsTab.pcss

---
 res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index 171afd05821..9380c003672 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -31,5 +31,6 @@ limitations under the License.
 }
 
 .mx_CopyableText {
-   overflow: scroll;
+   overflow-x: scroll;
+   overflow-y: scroll;
 }
\ No newline at end of file

From 88dc9bd48af9084a7f890f0cc287489ab2f8170e Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Mon, 6 Feb 2023 16:15:05 +0530
Subject: [PATCH 07/20] Fix issue which caused the access token to overflow the
 box #10069

---
 .../views/settings/tabs/user/_HelpUserSettingsTab.pcss    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index 9380c003672..385c471477c 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -28,9 +28,9 @@ limitations under the License.
             margin-bottom: $spacing-16;
         }
     }
-}
 
-.mx_CopyableText {
-   overflow-x: scroll;
-   overflow-y: scroll;
+    div .mx_CopyableText {
+        overflow-x: scroll;
+        overflow-y: scroll;
+    }
 }
\ No newline at end of file

From 209ff28f77387bcccce5f315c60f1be1afb61240 Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Wed, 8 Feb 2023 18:56:40 +0530
Subject: [PATCH 08/20] Fix issue which caused the access token to overflow the
 box #10069

---
 res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index 385c471477c..166c7791469 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -33,4 +33,4 @@ limitations under the License.
         overflow-x: scroll;
         overflow-y: scroll;
     }
-}
\ No newline at end of file
+}

From 5419d66707a0d6b9159c0aa03916a77c772cacfc Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Wed, 8 Feb 2023 19:10:43 +0530
Subject: [PATCH 09/20] Fix issue which caused the access token to overflow the
 box #10069

Added Comments for code
---
 res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index 166c7791469..415b4df911c 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -15,6 +15,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+/*
+     overflow-x and overflow-y is set to scrollable for 
+     .max_CopyableText class under div tag which is for Access Key
+     field, So it won't go outside boundary.
+*/
 .mx_HelpUserSettingsTab {
     code {
         word-break: break-all;

From a2923df9a79ee648b075b92985a17b4cecf6e977 Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Thu, 9 Feb 2023 17:52:49 +0530
Subject: [PATCH 10/20] Stop access token overflowing the box

---
 .../settings/tabs/user/_HelpUserSettingsTab.pcss  | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index 415b4df911c..4e99387a44a 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -15,11 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/*
-     overflow-x and overflow-y is set to scrollable for 
-     .max_CopyableText class under div tag which is for Access Key
-     field, So it won't go outside boundary.
-*/
 .mx_HelpUserSettingsTab {
     code {
         word-break: break-all;
@@ -34,8 +29,12 @@ limitations under the License.
         }
     }
 
+    /*
+     overflow property is set as scroll to make sure
+     if Access Key length is large it won't overflow 
+     out of boundary
+    */
     div .mx_CopyableText {
-        overflow-x: scroll;
-        overflow-y: scroll;
+        overflow: scroll;
     }
-}
+}
\ No newline at end of file

From ab37188e754614bee6d82578a5eae16b65bccf53 Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Thu, 9 Feb 2023 19:29:24 +0530
Subject: [PATCH 11/20] Stop access token overflowing the box

---
 res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index 4e99387a44a..c926b81b266 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -29,11 +29,7 @@ limitations under the License.
         }
     }
 
-    /*
-     overflow property is set as scroll to make sure
-     if Access Key length is large it won't overflow 
-     out of boundary
-    */
+    /* prevent the access token from overflowing the text box */
     div .mx_CopyableText {
         overflow: scroll;
     }

From fca6f5938dc3f2aba44c1619d68e2159ddce188c Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Thu, 9 Feb 2023 20:34:52 +0530
Subject: [PATCH 12/20] Ran prettier again on file

---
 res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index c926b81b266..d318ebd0ea4 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -30,7 +30,8 @@ limitations under the License.
     }
 
     /* prevent the access token from overflowing the text box */
+
     div .mx_CopyableText {
         overflow: scroll;
     }
-}
\ No newline at end of file
+}

From 734a14c872ae6d35c033c1ded47124774cff3ffb Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Date: Thu, 9 Feb 2023 15:38:49 +0000
Subject: [PATCH 13/20] Update
 res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss

---
 res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index d318ebd0ea4..5a61bcd2dab 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -30,7 +30,6 @@ limitations under the License.
     }
 
     /* prevent the access token from overflowing the text box */
-
     div .mx_CopyableText {
         overflow: scroll;
     }

From b7e864a6bd44654e6e512a8b676fe74efd106caf Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Sat, 11 Feb 2023 13:36:02 +0530
Subject: [PATCH 14/20] making copy button sticky

---
 res/css/views/settings/tabs/_SettingsTab.pcss              | 7 +++++++
 res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss | 1 +
 2 files changed, 8 insertions(+)

diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss
index 544b5c623b2..6c227517437 100644
--- a/res/css/views/settings/tabs/_SettingsTab.pcss
+++ b/res/css/views/settings/tabs/_SettingsTab.pcss
@@ -62,6 +62,13 @@ limitations under the License.
     margin-inline-end: 80px; /* Align with the rest of the view */
     margin-bottom: 10px; /* TODO: Use a spacing variable */
     margin-inline-start: 0;
+
+    .mx_CopyableText_border .mx_CopyableText_copyButton {
+        position: sticky;
+        right: 0;
+        z-index: 100;
+        background: white;
+    }
 }
 
 .mx_SettingsTab_section {
diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index d318ebd0ea4..ca8f7fc8a35 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -33,5 +33,6 @@ limitations under the License.
 
     div .mx_CopyableText {
         overflow: scroll;
+        position: relative;
     }
 }

From 0c137d2543d535b0488e674b7de3134596fe8aa7 Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Sat, 11 Feb 2023 19:15:22 +0530
Subject: [PATCH 15/20] adding comment

---
 res/css/views/settings/tabs/_SettingsTab.pcss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss
index 6c227517437..2008a19c95b 100644
--- a/res/css/views/settings/tabs/_SettingsTab.pcss
+++ b/res/css/views/settings/tabs/_SettingsTab.pcss
@@ -63,6 +63,7 @@ limitations under the License.
     margin-bottom: 10px; /* TODO: Use a spacing variable */
     margin-inline-start: 0;
 
+    /* Making copy button stick to the right while scrolling */
     .mx_CopyableText_border .mx_CopyableText_copyButton {
         position: sticky;
         right: 0;

From 8421fe7ca1c8b0dce1be2950d961d37133a1bb4e Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <52606915+sbjaj33@users.noreply.github.com>
Date: Mon, 13 Feb 2023 16:09:43 +0530
Subject: [PATCH 16/20] Update res/css/views/settings/tabs/_SettingsTab.pcss

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
---
 res/css/views/settings/tabs/_SettingsTab.pcss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss
index 2008a19c95b..a33b44185fb 100644
--- a/res/css/views/settings/tabs/_SettingsTab.pcss
+++ b/res/css/views/settings/tabs/_SettingsTab.pcss
@@ -63,7 +63,7 @@ limitations under the License.
     margin-bottom: 10px; /* TODO: Use a spacing variable */
     margin-inline-start: 0;
 
-    /* Making copy button stick to the right while scrolling */
+    /* Make copy button stick to the right while scrolling */
     .mx_CopyableText_border .mx_CopyableText_copyButton {
         position: sticky;
         right: 0;

From ff5646d0ca312a2f6555394524daf47bfbe8092e Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Mon, 13 Feb 2023 18:23:41 +0530
Subject: [PATCH 17/20] Make copy button stick to the right while scrolling

---
 res/css/views/elements/_CopyableText.pcss     | 5 +++++
 res/css/views/settings/tabs/_SettingsTab.pcss | 8 --------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/res/css/views/elements/_CopyableText.pcss b/res/css/views/elements/_CopyableText.pcss
index e6b3b1ebf92..7ebaea706b3 100644
--- a/res/css/views/elements/_CopyableText.pcss
+++ b/res/css/views/elements/_CopyableText.pcss
@@ -41,6 +41,11 @@ limitations under the License.
         /* center to first line */
         position: relative;
         top: 0.15em;
+        /* Make copy button stick to the right while scrolling */
+        position: sticky;
+        right: 0;
+        z-index: 100;
+        background: white;
 
         &::before {
             content: "";
diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss
index a33b44185fb..544b5c623b2 100644
--- a/res/css/views/settings/tabs/_SettingsTab.pcss
+++ b/res/css/views/settings/tabs/_SettingsTab.pcss
@@ -62,14 +62,6 @@ limitations under the License.
     margin-inline-end: 80px; /* Align with the rest of the view */
     margin-bottom: 10px; /* TODO: Use a spacing variable */
     margin-inline-start: 0;
-
-    /* Make copy button stick to the right while scrolling */
-    .mx_CopyableText_border .mx_CopyableText_copyButton {
-        position: sticky;
-        right: 0;
-        z-index: 100;
-        background: white;
-    }
 }
 
 .mx_SettingsTab_section {

From 8da7ceb351cab2a5784aa950a01aca1157a667fb Mon Sep 17 00:00:00 2001
From: Shivam Bajaj <sbjaj33@gmail.com>
Date: Sun, 19 Feb 2023 15:25:04 +0530
Subject: [PATCH 18/20] Make copy button stick to the right while scrolling

Implementing the required changes and also trying to resolve copy button background issue while dark mode
---
 res/css/views/elements/_CopyableText.pcss                 | 8 ++++----
 .../views/settings/tabs/user/_HelpUserSettingsTab.pcss    | 1 -
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/res/css/views/elements/_CopyableText.pcss b/res/css/views/elements/_CopyableText.pcss
index 7ebaea706b3..6b70df132bb 100644
--- a/res/css/views/elements/_CopyableText.pcss
+++ b/res/css/views/elements/_CopyableText.pcss
@@ -39,13 +39,13 @@ limitations under the License.
         margin-left: 20px;
         display: block;
         /* center to first line */
-        position: relative;
+        // position: relative;
         top: 0.15em;
-        /* Make copy button stick to the right while scrolling */
+        /* If the copy button is used within a scrollable div,
+        make it stick to the right while scrolling  */
         position: sticky;
         right: 0;
-        z-index: 100;
-        background: white;
+        background-color: $background;
 
         &::before {
             content: "";
diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index a74e3ddfea8..5a61bcd2dab 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -32,6 +32,5 @@ limitations under the License.
     /* prevent the access token from overflowing the text box */
     div .mx_CopyableText {
         overflow: scroll;
-        position: relative;
     }
 }

From 9219a1f12e16a168f176dd573b204cec182f5e5e Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Date: Tue, 21 Feb 2023 12:22:20 +0000
Subject: [PATCH 19/20] Update res/css/views/elements/_CopyableText.pcss

---
 res/css/views/elements/_CopyableText.pcss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/views/elements/_CopyableText.pcss b/res/css/views/elements/_CopyableText.pcss
index 6b70df132bb..f3869fcd90d 100644
--- a/res/css/views/elements/_CopyableText.pcss
+++ b/res/css/views/elements/_CopyableText.pcss
@@ -39,7 +39,6 @@ limitations under the License.
         margin-left: 20px;
         display: block;
         /* center to first line */
-        // position: relative;
         top: 0.15em;
         /* If the copy button is used within a scrollable div,
         make it stick to the right while scrolling  */

From 472b7f159c53829aea9ad516d29d05f507c78ebd Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Date: Tue, 21 Feb 2023 12:26:51 +0000
Subject: [PATCH 20/20] Update _CopyableText.pcss

---
 res/css/views/elements/_CopyableText.pcss | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/res/css/views/elements/_CopyableText.pcss b/res/css/views/elements/_CopyableText.pcss
index f3869fcd90d..8e1d3f3cfd7 100644
--- a/res/css/views/elements/_CopyableText.pcss
+++ b/res/css/views/elements/_CopyableText.pcss
@@ -38,12 +38,11 @@ limitations under the License.
         cursor: pointer;
         margin-left: 20px;
         display: block;
-        /* center to first line */
-        top: 0.15em;
-        /* If the copy button is used within a scrollable div,
-        make it stick to the right while scrolling  */
+        /* If the copy button is used within a scrollable div, make it stick to the right while scrolling */
         position: sticky;
         right: 0;
+        /* center to first line */
+        top: 0.15em;
         background-color: $background;
 
         &::before {