From b93de450707f78a0938664d0b7ecfc4051c7f15c Mon Sep 17 00:00:00 2001
From: klm-turing <litaaba.a@turing.com>
Date: Tue, 28 May 2024 21:23:11 +0000
Subject: [PATCH] fix(style): make operation summary fluid

- Make sure that the text elements of the operation summary are always visible and do not shrink when the copy icon appears, whatever the screen size and whatever the length of the text.
---
 src/core/components/operation-summary.jsx |  6 ++-
 src/style/_layout.scss                    | 59 ++++++++++++-----------
 2 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/core/components/operation-summary.jsx b/src/core/components/operation-summary.jsx
index d31f56d3f9c..14e9569873a 100644
--- a/src/core/components/operation-summary.jsx
+++ b/src/core/components/operation-summary.jsx
@@ -67,12 +67,12 @@ export default class OperationSummary extends PureComponent {
     const allowAnonymous = !hasSecurity || securityIsOptional
     return (
       <div className={`opblock-summary opblock-summary-${method}`} >
+        <OperationSummaryMethod method={method} />
         <button
           aria-expanded={isShown}
           className="opblock-summary-control"
           onClick={toggleShown}
         >
-          <OperationSummaryMethod method={method} />
           <div className="opblock-summary-path-description-wrapper">
             <OperationSummaryPath getComponent={getComponent} operationProps={operationProps} specPath={specPath} />
 
@@ -85,7 +85,9 @@ export default class OperationSummary extends PureComponent {
 
           {displayOperationId && (originalOperationId || operationId) ? <span className="opblock-summary-operation-id">{originalOperationId || operationId}</span> : null}
         </button>
-        <CopyToClipboardBtn textToCopy={`${specPath.get(1)}`} />
+        <div className="opblock-summary-copy">
+          <CopyToClipboardBtn textToCopy={`${specPath.get(1)}`} />
+        </div>
         {
           allowAnonymous ? null :
             <AuthorizeOperationBtn
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index b97083a2605..0802ac5abd9 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -203,7 +203,7 @@
     border: 1px solid $opblock-border-color;
     border-radius: 4px;
     box-shadow: 0 0 3px rgba($opblock-box-shadow-color,.19);
-
+    
     .tab-header
     {
         display: flex;
@@ -374,21 +374,10 @@
     .opblock-summary-path-description-wrapper
     {
         display: flex;
-        flex-direction: row;
         align-items: center;
         flex-wrap: wrap;
-        gap: 0px 10px;
-
-        padding: 0 10px;
-
-        width: 100%;
-    }
-
-    @media (max-width: 550px) {
-      .opblock-summary-path-description-wrapper {
-        flex-direction: column;
-        align-items: flex-start;
-      }
+        gap: .5rem;
+        padding: 0 .5rem;
     }
 
     .opblock-summary
@@ -402,30 +391,46 @@
 
         .view-line-link
         {
-            position: relative;
-            top: 2px;
-
-            width: 0;
-            margin: 0;
-
+            width: 24px;
             cursor: pointer;
-            transition: all .5s;
+            opacity: 0;
+            transform: translateX(20px);
+            pointer-events: none;
+            transition: .3s;
         }
 
         &:hover
         {
             .view-line-link
             {
-                width: 18px;
-                margin: 0 5px;
-
-                &.copy-to-clipboard {
-                    width: 24px;
-                }
+                opacity: 1;
+                transform: translateX(0);
+                pointer-events: auto;
             }
         }
     }
 
+    @media screen and (max-width: 768px) {
+        position: relative;
+        margin: 2.5rem 0;
+        border-top-left-radius: 0;
+
+        .opblock-summary-method {
+            position: absolute;
+            top: -1.7rem;
+            left: -1px;
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        .opblock-summary {
+            .opblock-summary-copy {
+                position: absolute;
+                right: -6px;
+                top: -1.7rem;
+            }
+        }
+    }
 
 
     &.opblock-post