From c36f240e4767017540b8cdbf7ca478a66b5ed214 Mon Sep 17 00:00:00 2001
From: yzhe819 <68207314+yzhe819@users.noreply.github.com>
Date: Tue, 2 Aug 2022 09:11:47 +1200
Subject: [PATCH] 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 |  3 ++-
 src/style/_form.scss      |  5 +++++
 src/style/_layout.scss    | 20 ++++++++++++++++++++
 src/style/_servers.scss   |  1 +
 src/style/_table.scss     |  6 +++---
 5 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/style/_authorize.scss b/src/style/_authorize.scss
index 396dfe558d8..24fc09c144d 100644
--- a/src/style/_authorize.scss
+++ b/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();
diff --git a/src/style/_form.scss b/src/style/_form.scss
index f649b35fabf..e46057296a7 100644
--- a/src/style/_form.scss
+++ b/src/style/_form.scss
@@ -34,6 +34,11 @@ select
     {
         min-width: 180px;
     }
+    @media (max-width: 640px)
+    {
+        width: 100%;
+        min-width: 100%;
+    }
 }
 
 label
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index 82110e0164c..910a1e544df 100644
--- a/src/style/_layout.scss
+++ b/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;
diff --git a/src/style/_servers.scss b/src/style/_servers.scss
index ae99765fa29..fe53a549b88 100644
--- a/src/style/_servers.scss
+++ b/src/style/_servers.scss
@@ -12,6 +12,7 @@
         {
             min-width: 130px;
             max-width: 100%;
+            width: 100%;
         }
     }
 
diff --git a/src/style/_table.scss b/src/style/_table.scss
index d3894d676cc..efda2e92beb 100644
--- a/src/style/_table.scss
+++ b/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;