@douyinfe/semi-foundation 2.99.0 → 2.99.1

package/lib/cjs/modal/modal.css

@@ -41,7 +41,7 @@
 }
 .semi-modal-wrap-center {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 }
 .semi-modal-title {
   display: inline-flex;
@@ -152,7 +152,7 @@
 }
 
 .semi-modal-centered {
-  margin: 0 auto;
+  margin: auto;
 }
 
 .semi-modal-popup .semi-modal-mask,

package/lib/cjs/modal/modal.scss

@@ -46,7 +46,14 @@ $module: #{$prefix}-modal;
         outline: 0;
         &-center{
             display: flex;
-            align-items: center;
+            // Use flex-start + auto margin instead of `align-items: center`.
+            // When content fits the viewport, `margin: auto` on the modal
+            // centers it vertically. When content exceeds the viewport, auto
+            // margins collapse to 0 per the flexbox spec, so the modal aligns
+            // to the top of the wrap and the wrap's `overflow: auto` can scroll
+            // to both the top and the bottom of the modal. This prevents the
+            // "centered modal becomes unreachable" bug when content overflows.
+            align-items: flex-start;
         }
     }
 
@@ -194,7 +201,10 @@ $module: #{$prefix}-modal;
 }
 
 .#{$module}-centered {
-    margin: 0 auto;
+    // `margin: auto` (instead of `0 auto`) lets the wrap's `display: flex;
+    // align-items: flex-start` produce visual vertical centering when content
+    // fits, while degrading to top-aligned + scrollable when content overflows.
+    margin: auto;
 }
 
 .#{$module}-popup {

package/lib/es/modal/modal.css

@@ -41,7 +41,7 @@
 }
 .semi-modal-wrap-center {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 }
 .semi-modal-title {
   display: inline-flex;
@@ -152,7 +152,7 @@
 }
 
 .semi-modal-centered {
-  margin: 0 auto;
+  margin: auto;
 }
 
 .semi-modal-popup .semi-modal-mask,

package/lib/es/modal/modal.scss

@@ -46,7 +46,14 @@ $module: #{$prefix}-modal;
         outline: 0;
         &-center{
             display: flex;
-            align-items: center;
+            // Use flex-start + auto margin instead of `align-items: center`.
+            // When content fits the viewport, `margin: auto` on the modal
+            // centers it vertically. When content exceeds the viewport, auto
+            // margins collapse to 0 per the flexbox spec, so the modal aligns
+            // to the top of the wrap and the wrap's `overflow: auto` can scroll
+            // to both the top and the bottom of the modal. This prevents the
+            // "centered modal becomes unreachable" bug when content overflows.
+            align-items: flex-start;
         }
     }
 
@@ -194,7 +201,10 @@ $module: #{$prefix}-modal;
 }
 
 .#{$module}-centered {
-    margin: 0 auto;
+    // `margin: auto` (instead of `0 auto`) lets the wrap's `display: flex;
+    // align-items: flex-start` produce visual vertical centering when content
+    // fits, while degrading to top-aligned + scrollable when content overflows.
+    margin: auto;
 }
 
 .#{$module}-popup {

package/modal/modal.scss

@@ -46,7 +46,14 @@ $module: #{$prefix}-modal;
         outline: 0;
         &-center{
             display: flex;
-            align-items: center;
+            // Use flex-start + auto margin instead of `align-items: center`.
+            // When content fits the viewport, `margin: auto` on the modal
+            // centers it vertically. When content exceeds the viewport, auto
+            // margins collapse to 0 per the flexbox spec, so the modal aligns
+            // to the top of the wrap and the wrap's `overflow: auto` can scroll
+            // to both the top and the bottom of the modal. This prevents the
+            // "centered modal becomes unreachable" bug when content overflows.
+            align-items: flex-start;
         }
     }
 
@@ -194,7 +201,10 @@ $module: #{$prefix}-modal;
 }
 
 .#{$module}-centered {
-    margin: 0 auto;
+    // `margin: auto` (instead of `0 auto`) lets the wrap's `display: flex;
+    // align-items: flex-start` produce visual vertical centering when content
+    // fits, while degrading to top-aligned + scrollable when content overflows.
+    margin: auto;
 }
 
 .#{$module}-popup {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.99.0",
+    "version": "2.99.1",
     "description": "",
     "scripts": {
         "clean": "rimraf lib",
@@ -14225,8 +14225,8 @@
         }
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.99.0",
-        "@douyinfe/semi-json-viewer-core": "2.99.0",
+        "@douyinfe/semi-animation": "2.99.1",
+        "@douyinfe/semi-json-viewer-core": "2.99.1",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -14247,7 +14247,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "c62861b574b51ae39afe7da796ab4f14d1462ef2",
+    "gitHead": "18031e63923290207dd08bb6c476accea3e0116c",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",