fix: prevent skeleton screen overflow causing horizontal scrollbar

Co-authored-by: afc163 <507615+afc163@users.noreply.github.com>

public/scripts/loading.js

@@ -13,10 +13,14 @@
           height: 100%;
           margin: 0;
           padding: 0;
+          overflow-x: hidden;
+          box-sizing: border-box;
         }
         #root {
           background-repeat: no-repeat;
           background-size: 100% auto;
+          max-width: 100%;
+          box-sizing: border-box;
         }
 
         .loading-title {
@@ -34,6 +38,8 @@
           align-items: center;
           justify-content: center;
           padding: 26px;
+          max-width: 100%;
+          box-sizing: border-box;
         }
         .ant-spin {
           position: absolute;
@@ -179,6 +185,10 @@
         justify-content: center;
         height: 100%;
         min-height: 362px;
+        max-width: 100%;
+        overflow-x: hidden;
+        box-sizing: border-box;
+        padding: 20px;
       ">
         <div class="page-loading-warp">
           <div class="ant-spin ant-spin-lg ant-spin-spinning">

src/global.less

@@ -45,6 +45,7 @@ body,
   height: 100%;
   margin: 0;
   padding: 0;
+  overflow-x: hidden;
   font-family:
     AlibabaSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
     sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

src/loading.tsx

@@ -1,7 +1,15 @@
 import { Skeleton } from 'antd';
 
 const Loading: React.FC = () => (
-  <Skeleton style={{ margin: '24px 40px', height: '60vh' }} active />
+  <Skeleton
+    style={{
+      margin: '24px 40px',
+      height: '60vh',
+      maxWidth: '100%',
+      boxSizing: 'border-box',
+    }}
+    active
+  />
 );
 
 export default Loading;