From a922ff7727e2be1ddf68b902829b7026c94aff8f Mon Sep 17 00:00:00 2001
From: xiejay97 <xiejay97@gmail.com>
Date: Fri, 10 Mar 2023 16:59:03 +0800
Subject: [PATCH] fix(platform): fix gap not support in old browser

---
 .../src/app/routes/exception/Exception.module.scss        | 4 +++-
 packages/platform/src/app/routes/login/Login.module.scss  | 3 ++-
 packages/platform/src/styles/components/detail-view.scss  | 5 ++++-
 packages/platform/src/styles/components/route-header.scss | 8 +++++---
 packages/platform/src/styles/components/status-dot.scss   | 2 +-
 packages/platform/src/styles/components/table-filter.scss | 3 ++-
 6 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/platform/src/app/routes/exception/Exception.module.scss b/packages/platform/src/app/routes/exception/Exception.module.scss
index 6932b8c3..2631c1d9 100644
--- a/packages/platform/src/app/routes/exception/Exception.module.scss
+++ b/packages/platform/src/app/routes/exception/Exception.module.scss
@@ -1,9 +1,10 @@
 @import '~styles/module';
 
 @include b(exception) {
+  @include polyfill-row-gap(20px);
+
   display: flex;
   flex-direction: column;
-  gap: 20px 100px;
   align-items: center;
   width: 100%;
   padding: 10% 20px 20px;
@@ -28,6 +29,7 @@
 
     @include media-breakpoint-up(md) {
       align-items: flex-start;
+      margin-left: 100px;
     }
   }
 
diff --git a/packages/platform/src/app/routes/login/Login.module.scss b/packages/platform/src/app/routes/login/Login.module.scss
index 6428926a..a48253d5 100644
--- a/packages/platform/src/app/routes/login/Login.module.scss
+++ b/packages/platform/src/app/routes/login/Login.module.scss
@@ -77,7 +77,8 @@
   }
 
   @include e(link-container) {
+    @include polyfill-column-gap(12px);
+
     display: flex;
-    gap: 0 12px;
   }
 }
diff --git a/packages/platform/src/styles/components/detail-view.scss b/packages/platform/src/styles/components/detail-view.scss
index d8f60ed2..be294867 100644
--- a/packages/platform/src/styles/components/detail-view.scss
+++ b/packages/platform/src/styles/components/detail-view.scss
@@ -5,6 +5,9 @@
     }
 
     @include e(item-label) {
+      margin-right: 0;
+      margin-bottom: 8px;
+
       &::after {
         content: none;
       }
@@ -13,7 +16,6 @@
 
   @include e(item) {
     display: inline-flex;
-    gap: 8px 12px;
 
     @include m(center) {
       align-items: center;
@@ -22,6 +24,7 @@
 
   @include e(item-label) {
     flex-shrink: 0;
+    margin-right: 12px;
     color: var(--#{$rd-prefix}text-color-sub);
 
     &::after {
diff --git a/packages/platform/src/styles/components/route-header.scss b/packages/platform/src/styles/components/route-header.scss
index 73c3b1df..5033638a 100644
--- a/packages/platform/src/styles/components/route-header.scss
+++ b/packages/platform/src/styles/components/route-header.scss
@@ -6,7 +6,7 @@
   background-color: var(--#{$rd-prefix}background-color);
 
   @include e(breadcrumb) {
-    height: 40px;
+    min-height: 40px;
   }
 
   @include e(breadcrumb-link) {
@@ -21,9 +21,10 @@
   }
 
   @include e(header) {
+    @include polyfill-gap(12px, 20px);
+
     display: flex;
     flex-wrap: wrap;
-    gap: 12px 20px;
     align-items: center;
     justify-content: space-between;
     padding-bottom: 16px;
@@ -60,9 +61,10 @@
   }
 
   @include e(header-actions) {
+    @include polyfill-gap(8px, 8px);
+
     display: inline-flex;
     flex-wrap: wrap;
-    gap: 8px;
     align-items: center;
   }
 }
diff --git a/packages/platform/src/styles/components/status-dot.scss b/packages/platform/src/styles/components/status-dot.scss
index 528ec81e..da68465e 100644
--- a/packages/platform/src/styles/components/status-dot.scss
+++ b/packages/platform/src/styles/components/status-dot.scss
@@ -14,7 +14,6 @@
   --app-status-dot-color: var(--#{$rd-prefix}tag-background-color-fill);
 
   display: inline-flex;
-  gap: 0 8px;
   align-items: center;
   vertical-align: top;
 
@@ -44,6 +43,7 @@
     position: relative;
     width: 6px;
     height: 6px;
+    margin-right: 8px;
     background-color: var(--app-status-dot-color);
     border-radius: 50%;
   }
diff --git a/packages/platform/src/styles/components/table-filter.scss b/packages/platform/src/styles/components/table-filter.scss
index e131abc0..a53f3751 100644
--- a/packages/platform/src/styles/components/table-filter.scss
+++ b/packages/platform/src/styles/components/table-filter.scss
@@ -20,9 +20,10 @@
   }
 
   @include e(button-container) {
+    @include polyfill-gap(12px, 8px);
+
     display: flex;
     flex-wrap: wrap;
-    gap: 12px 8px;
     align-items: center;
   }