fix(style): use container queries for responsive design (#10763)

Author: glowcloud

src/style/_form.scss

@@ -33,10 +33,10 @@ select {
 
 .opblock-body select {
   min-width: 230px;
-  @media (max-width: 768px) {
+  @container swagger-ui (max-width: 768px) {
     min-width: 180px;
   }
-  @media (max-width: 640px) {
+  @container swagger-ui (max-width: 640px) {
     width: 100%;
     min-width: 100%;
   }
@@ -58,7 +58,7 @@ input[type="email"],
 input[type="file"] {
   line-height: 1;
 
-  @media (max-width: 768px) {
+  @container swagger-ui (max-width: 768px) {
     max-width: 175px;
   }
 }

src/style/_layout.scss

@@ -78,7 +78,7 @@
     font-weight: 400;
   }
 
-  @media (max-width: 640px) {
+  @container swagger-ui (max-width: 640px) {
     small {
       flex: 1;
     }
@@ -262,7 +262,7 @@
 
     @include type.text_headline($opblock-summary-method-font-color);
 
-    @media (max-width: 768px) {
+    @container swagger-ui (max-width: 768px) {
       font-size: 12px;
     }
   }
@@ -279,7 +279,7 @@
 
     @include type.text_code();
 
-    @media (max-width: 768px) {
+    @container swagger-ui (max-width: 768px) {
       font-size: 12px;
     }
   }
@@ -288,7 +288,7 @@
     flex-shrink: 1;
   }
 
-  @media (max-width: 640px) {
+  @container swagger-ui (max-width: 640px) {
     .opblock-summary-path {
       max-width: 100%;
     }
@@ -322,7 +322,7 @@
     flex-grow: 1;
   }
 
-  @media (max-width: 550px) {
+  @container swagger-ui (max-width: 550px) {
     .opblock-summary-path-description-wrapper {
       flex-direction: column;
       align-items: flex-start;

src/style/_mixins.scss

@@ -112,22 +112,22 @@ $browser-context: 16;
 }
 
 @mixin maxHeight($height) {
-  @media (max-height: $height) {
+  @container swagger-ui (max-height: $height) {
     @content;
   }
 }
 
 @mixin breakpoint($class) {
   @if $class == tablet {
-    @media (min-width: 768px) and (max-width: 1024px) {
+    @container swagger-ui (min-width: 768px) and (max-width: 1024px) {
       @content;
     }
   } @else if $class == mobile {
-    @media (min-width: 320px) and (max-width: 736px) {
+    @container swagger-ui (min-width: 320px) and (max-width: 736px) {
       @content;
     }
   } @else if $class == desktop {
-    @media (min-width: 1400px) {
+    @container swagger-ui (min-width: 1400px) {
       @content;
     }
   } @else {

src/style/_topbar.scss

@@ -11,7 +11,7 @@
     flex-wrap: wrap;
     gap: 10px;
   }
-  @media (max-width: 550px) {
+  @container swagger-ui (max-width: 550px) {
     .topbar-wrapper {
       flex-direction: column;
       align-items: start;
@@ -97,7 +97,7 @@
       @include type.text_headline($topbar-download-url-button-font-color);
     }
   }
-  @media (max-width: 550px) {
+  @container swagger-ui (max-width: 550px) {
     .download-url-wrapper {
       width: 100%;
     }

src/style/main.scss

@@ -2,6 +2,9 @@
 @use "type";
 
 .swagger-ui {
+  container-name: swagger-ui;
+  container-type: inline-size;
+  
   @include type.text_body();
   @include meta.load-css("~tachyons-sass/tachyons.scss");
   @include meta.load-css("mixins");