💄 UI: better phone mode style (#652)

ant-design · Jul 22, 2020 · e79cf58 · e79cf58
1 parent ef23cf0
commit e79cf58
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/src/component/toolBar/index.less b/src/component/toolBar/index.less
@@ -39,16 +39,41 @@
   }
 }
 
+@media (max-width: @screen-xs) {
+  .@{pro-table-prefix-cls} {
+    .ant-table {
+      width: 100%;
+      overflow-x: auto;
+      &-thead > tr,
+      &-tbody > tr {
+        > th,
+        > td {
+          white-space: pre;
+          > span {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}
+
 @media (max-width: 575px) {
   .@{pro-table-prefix-cls}-toolbar {
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
+    height: auto;
     margin-bottom: 16px;
     margin-left: 16px;
-    padding: 0;
+    padding: 8px;
+    padding-top: 16px;
     line-height: normal;
 
+    &-title {
+      margin-bottom: 16px;
+    }
+
     &-option {
       display: flex;
       justify-content: space-between;

diff --git a/src/form/index.less b/src/form/index.less
@@ -61,6 +61,8 @@
 
 @media (max-width: 575px) {
   .@{pro-table-search-prefix-cls} {
+    height: auto !important;
+    padding-bottom: 24px;
     .@{ant-prefix}-form-item {
       display: inline;
     }