make copy all button sticky (#148)

saucelabs · Aug 27, 2024 · f58bd07 · f58bd07
1 parent ee26a96
commit f58bd07
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/src/Components/ReqDetail/ReqDetail.styles.scss b/src/Components/ReqDetail/ReqDetail.styles.scss
@@ -23,7 +23,7 @@
 
   .section-title {
     display: flex;
-    align-content: center;
+    align-items: center;
 
     .caret-icon {
       fill: $brand-primary-gray;
@@ -45,6 +45,7 @@
 
 .section-detail {
   padding: $size-xs-s $size-s;
+  width: 100%;
 
   .info-row {
     margin: 0;
@@ -75,14 +76,21 @@
   color: $brand-primary-dark-gray;
 }
 
-.response-content {
+.payload-content {
   font-size: $font-size-small;
   width: 100%;
   display: flex;
   flex-direction: column;
 
   .copy-button {
-    align-self: end;
+    display: flex;
+    justify-content: end;
+    width: 100%;
+    margin-top: -$size-xs-s;
+    background: $white-100;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
   }
 
   .payload-body {

diff --git a/src/Components/ReqDetail/Response.jsx b/src/Components/ReqDetail/Response.jsx
@@ -17,7 +17,7 @@ const Response = ({ data }) => {
 
   return (
     <div className={Styles['section-detail']}>
-      <div className={Styles['response-content']}>
+      <div className={Styles['payload-content']}>
         <div className={Styles['copy-button']}>
           <CopyAllButton text={content} />
         </div>

diff --git a/src/Components/ReqDetail/request/RequestPayload.jsx b/src/Components/ReqDetail/request/RequestPayload.jsx
@@ -12,7 +12,7 @@ const RequestPayload = ({ data, isPayloadTransformed }) => {
 
   return (
     <div className={Styles['section-detail']}>
-      <div className={Styles['response-content']}>
+      <div className={Styles['payload-content']}>
         <div className={Styles['copy-button']}>
           <CopyAllButton text={payload} />
         </div>

diff --git a/src/Containers/ReqDetailContainer.styles.scss b/src/Containers/ReqDetailContainer.styles.scss
@@ -1,7 +1,7 @@
 @import "./../styles/variables";
 
 $close-button-width: 35px;
-$tab-height: 32px;
+$tab-height: 35px;
 
 .req-detail-container {
   width: 70%;