Fix copy button icon overlapping with copyable text (#10227)

* Modified css for copy button and the copyable text accross the app specially to solve the overlapping problem in the access token div

* Modified css for copy button and the copyable text accross the app specially to solve the overlapping problem in the access token div and replaced the scroll with auto

res/css/views/elements/_CopyableText.pcss

@@ -23,11 +23,12 @@ limitations under the License.
     max-width: 100%;
 
     &.mx_CopyableText_border {
+        overflow: auto;
         border-radius: 5px;
         border: solid 1px $light-fg-color;
         margin-bottom: 10px;
         margin-top: 10px;
-        padding: 10px;
+        padding: 10px 0 10px 10px;
     }
 
     .mx_CopyableText_copyButton {
@@ -36,7 +37,8 @@ limitations under the License.
         width: 1em;
         height: 1em;
         cursor: pointer;
-        margin-left: 20px;
+        padding-left: 12px;
+        padding-right: 10px;
         display: block;
         /* If the copy button is used within a scrollable div, make it stick to the right while scrolling */
         position: sticky;

res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss

@@ -28,9 +28,4 @@ limitations under the License.
             margin-bottom: $spacing-16;
         }
     }
-
-    /* prevent the access token from overflowing the text box */
-    div .mx_CopyableText {
-        overflow: scroll;
-    }
 }