From a204040a072c88c98b65fea90b4cc9ab59cde172 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 2 Sep 2020 16:57:38 +0800
Subject: [PATCH] chore: improve API table style in small screen

close #26510
---
 site/theme/static/markdown.less | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less
index 46d598f57e..2013455697 100644
--- a/site/theme/static/markdown.less
+++ b/site/theme/static/markdown.less
@@ -254,15 +254,16 @@
 }
 
 .markdown.api-container {
-  overflow-x: auto;
-
   table {
-    min-width: 720px;
+    display: block;
     margin: 2em 0;
+    overflow-x: auto;
+    overflow-y: hidden;
     font-size: max(@font-size-base - 1px, 12px);
     font-family: @code-family;
     line-height: @line-height-base;
     border: 1px solid @border-color-split;
+    -webkit-overflow-scrolling: touch;
 
     th,
     td {
@@ -285,18 +286,25 @@
 
     td {
       &:first-child {
-        width: 20%;
+        width: 18%;
         color: @gray-8;
         font-weight: 600;
+        white-space: nowrap;
+      }
+      &:nth-child(2) {
+        width: 55%;
       }
       &:nth-child(3) {
         width: 22%;
         color: @magenta-7;
         font-size: max(@font-size-base - 1px, 12px);
-        word-break: break-all;
       }
       &:nth-child(4) {
-        width: 16%;
+        width: 15%;
+        font-size: max(@font-size-base - 1px, 12px);
+      }
+      &:nth-child(5) {
+        width: 8%;
         font-size: max(@font-size-base - 1px, 12px);
       }
     }