fix(styles): fix regressions in operations on smaller screens

Refs #8940
swagger-api · Dec 14, 2023 · 599519d · 599519d
1 parent f308eb3
commit 599519d
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 24 deletions.
diff --git a/src/style/_form.scss b/src/style/_form.scss
@@ -30,11 +30,11 @@ select
 .opblock-body select
 {
     min-width: 230px;
-    @media (max-width: 768px)
+    @container (max-width: 768px)
     {
         min-width: 180px;
     }
-    @media (max-width: 640px)
+    @container (max-width: 640px)
     {
         width: 100%;
         min-width: 100%;
@@ -59,7 +59,7 @@ input[type=file]
 {
     line-height: 1;
 
-    @media (max-width: 768px) {
+    @container (max-width: 768px) {
       max-width: 175px;
     }
 }

diff --git a/src/style/_layout.scss b/src/style/_layout.scss
@@ -1,3 +1,8 @@
+.swagger-ui {
+  container-type: inline-size;
+}
+
+
 .wrapper
 {
     width: 100%;
@@ -107,7 +112,7 @@
         font-weight: 400;
     }
 
-    @media (max-width: 640px) {
+    @container (max-width: 640px) {
       small
       {
         flex: 1;
@@ -305,7 +310,7 @@
     {
         font-size: 14px;
         font-weight: bold;
-        @media (max-width: 768px) {
+        @container (max-width: 768px) {
           font-size: 12px;
         }
 
@@ -326,7 +331,7 @@
     .opblock-summary-path__deprecated
     {
         font-size: 16px;
-        @media (max-width: 768px) {
+        @container (max-width: 768px) {
           font-size: 12px;
         }
 
@@ -342,13 +347,12 @@
 
     .opblock-summary-path
     {
-        flex-shrink: 0;
+        flex-shrink: 1;
     }
 
-    @media (max-width: 640px) {
+    @container (max-width: 640px) {
       .opblock-summary-path
       {
-        flex-shrink: 1;
         max-width: 100%;
       }
     }
@@ -375,6 +379,7 @@
     .opblock-summary-path-description-wrapper
     {
         display: flex;
+        flex-direction: row;
         align-items: center;
         flex-wrap: wrap;
         gap: 0px 10px;
@@ -384,12 +389,11 @@
         width: 100%;
     }
 
-    @media (max-width: 550px) {
-        .opblock-summary-path-description-wrapper
-        {
-            flex-direction: column;
-            align-items: start;
-        }
+    @container (max-width: 550px) {
+      .opblock-summary-path-description-wrapper {
+        flex-direction: column;
+        align-items: flex-start;
+      }
     }
 
     .opblock-summary
@@ -837,16 +841,16 @@
             justify-content: flex-end;
         }
 
-        /* 
+        /*
         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 
+        .auth-wrapper
         {
             flex: none;
             justify-content: none;
-            
+
             .authorize
             {
                 padding-right: 20px;

diff --git a/src/style/_mixins.scss b/src/style/_mixins.scss
@@ -127,7 +127,7 @@ $browser-context: 16;
 
 @mixin maxHeight($height)
 {
-    @media (max-height: $height)
+    @container (max-height: $height)
     {
         @content;
     }
@@ -138,23 +138,23 @@ $browser-context: 16;
 {
     @if $class == tablet
     {
-        @media (min-width: 768px) and (max-width: 1024px)
+        @container (min-width: 768px) and (max-width: 1024px)
         {
             @content;
         }
     }
 
     @else if $class == mobile
     {
-        @media (min-width: 320px) and (max-width : 736px)
+        @container (min-width: 320px) and (max-width : 736px)
         {
             @content;
         }
     }
 
     @else if $class == desktop
     {
-        @media (min-width: 1400px)
+        @container (min-width: 1400px)
         {
             @content;
         }

diff --git a/src/style/_topbar.scss b/src/style/_topbar.scss
@@ -10,7 +10,7 @@
         flex-wrap: wrap;
         gap: 10px;
     }
-    @media (max-width: 550px) {
+    @container (max-width: 550px) {
         .topbar-wrapper
         {
             flex-direction: column;
@@ -104,7 +104,7 @@
             @include text_headline($topbar-download-url-button-font-color);
         }
     }
-    @media (max-width: 550px) {
+    @container (max-width: 550px) {
         .download-url-wrapper
         {
             width: 100%;