fix(styling): make Operations more responsive on smaller screens (#9325)

Along with the operations, Topbar and Authorization button has been made more responsive as well. Refs #8940
swagger-api · Nov 10, 2023 · e34d8fb · e34d8fb · AlexanderKhudoev · Nov 15, 2023
1 parent 9bdbaef
commit e34d8fb
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 13 deletions.
diff --git a/src/core/components/operation-summary.jsx b/src/core/components/operation-summary.jsx
@@ -73,13 +73,15 @@ export default class OperationSummary extends PureComponent {
           onClick={toggleShown}
         >
           <OperationSummaryMethod method={method} />
-          <OperationSummaryPath getComponent={getComponent} operationProps={operationProps} specPath={specPath} />
+          <div className="opblock-summary-path-description-wrapper">
+            <OperationSummaryPath getComponent={getComponent} operationProps={operationProps} specPath={specPath} />
 
-          {!showSummary ? null :
-            <div className="opblock-summary-description">
-              {toString(resolvedSummary || summary)}
-            </div>
-          }
+            {!showSummary ? null :
+              <div className="opblock-summary-description">
+                {toString(resolvedSummary || summary)}
+              </div>
+            }
+          </div>
 
           {displayOperationId && (originalOperationId || operationId) ? <span className="opblock-summary-operation-id">{originalOperationId || operationId}</span> : null}
         </button>

diff --git a/src/style/_layout.scss b/src/style/_layout.scss
@@ -305,6 +305,9 @@
     {
         font-size: 14px;
         font-weight: bold;
+        @media (max-width: 768px) {
+          font-size: 12px;
+        }
 
         min-width: 80px;
         padding: 6px 0;
@@ -333,23 +336,20 @@
 
         word-break: break-word;
 
-        padding: 0 10px;
-
         @include text_code();
 
     }
 
     .opblock-summary-path
     {
         flex-shrink: 0;
-        max-width: calc(100% - 110px - 15rem);
     }
 
     @media (max-width: 640px) {
       .opblock-summary-path
       {
-          flex-shrink: 1;
-          max-width: 100%;
+        flex-shrink: 1;
+        max-width: 100%;
       }
     }
 
@@ -367,13 +367,31 @@
     {
         font-size: 13px;
 
-        flex: 1 1 auto;
-
         word-break: break-word;
 
         @include text_body();
     }
 
+    .opblock-summary-path-description-wrapper
+    {
+        display: flex;
+        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: start;
+        }
+    }
+
     .opblock-summary
     {
         display: flex;
@@ -772,6 +790,10 @@
     {
         display: flex;
         align-items: flex-end;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        gap: 10px;
 
         > label
         {
@@ -792,6 +814,27 @@
                 text-transform: uppercase;
             }
         }
+
+        /* 
+        Target Authorize Button in schemes wrapper
+        This was added here to fix responsiveness issues with the authorize button
+        within the schemes wrapper without affecting other instances of it's usage
+        */
+        .auth-wrapper 
+        {
+            flex: none;
+            justify-content: none;
+
+            .authorize
+            {
+                padding-right: 20px;
+                margin: 0;
+
+                display: flex;
+
+                flex-wrap: nowrap;
+            }
+        }
     }
 }
 

diff --git a/src/style/_topbar.scss b/src/style/_topbar.scss
@@ -7,7 +7,17 @@
     {
         display: flex;
         align-items: center;
+        flex-wrap: wrap;
+        gap: 10px;
     }
+    @media (max-width: 550px) {
+        .topbar-wrapper
+        {
+            flex-direction: column;
+            align-items: start;
+        }
+    }
+
     a
     {
         font-size: 1.5em;
@@ -39,6 +49,7 @@
         input[type=text]
         {
             width: 100%;
+            max-width: 100%;
             margin: 0;
 
             border: 2px solid $topbar-download-url-wrapper-element-border-color;
@@ -93,4 +104,10 @@
             @include text_headline($topbar-download-url-button-font-color);
         }
     }
+    @media (max-width: 550px) {
+        .download-url-wrapper
+        {
+            width: 100%;
+        }
+    }
 }