fix(ux): responsive ui display (#8132)

* fix: responsive operation

* fix: responsive tag display

* fix: responsive content type selector

* fix: input display

* fix: width of server selector

src/style/_authorize.scss

@@ -21,6 +21,7 @@
     .authorize
     {
         padding-right: 20px;
+        margin-left: 10px;
         margin-right: 10px;
     }
 }
@@ -68,7 +69,7 @@
         background-color: #ffeeee;
 
         color: red;
-        
+
         margin: 1em;
 
         @include text_code();

src/style/_form.scss

@@ -34,6 +34,11 @@ select
     {
         min-width: 180px;
     }
+    @media (max-width: 640px)
+    {
+        width: 100%;
+        min-width: 100%;
+    }
 }
 
 label

src/style/_layout.scss

@@ -106,6 +106,18 @@
         flex: 1 1 150px;
         font-weight: 400;
     }
+
+    @media (max-width: 640px) {
+      small
+      {
+        flex: 1;
+      }
+
+      >div
+      {
+          flex: 1;
+      }
+    }
 }
 
 .parameter__type
@@ -328,6 +340,14 @@
         max-width: calc(100% - 110px - 15rem);
     }
 
+    @media (max-width: 640px) {
+      .opblock-summary-path
+      {
+          flex-shrink: 1;
+          max-width: 100%;
+      }
+    }
+
     .opblock-summary-path__deprecated
     {
         text-decoration: line-through;

src/style/_servers.scss

@@ -12,6 +12,7 @@
         {
             min-width: 130px;
             max-width: 100%;
+            width: 100%;
         }
     }
 

src/style/_table.scss

@@ -39,9 +39,9 @@ table
             @include text_code();
         }
 
-        .header-example 
+        .header-example
         {
-            color: #999; 
+            color: #999;
             font-style: italic;
         }
     }
@@ -91,7 +91,7 @@ table
 {
     width: 99%; // forces other columns to shrink to their content widths
     margin-bottom: 2em;
-    input[type=text]
+    input
     {
         width: 100%;
         max-width: 340px;