Narrow smallest width by a small amount globally (#8300)

Author: ryuyu

src/Bootstrap/dist/css/bootstrap-theme.css

@@ -249,7 +249,7 @@ body {
   .alert {
     margin: 0;
     padding: 10px;
-  } 
+  }
 }
 
 .alert-transient-jumbotron {
@@ -261,7 +261,7 @@ body {
 
   li {
     position: relative;
-    
+
     i.ms-Icon {
       position: absolute;
       left: -24px;
@@ -286,11 +286,12 @@ h2, h3 {
   .container {
     // Bootstrap doesn't set the container width when the screen is xs.
     // This works fine when there are no elements in the container that are wider than the viewport,
-    // however, if there are elements in the container that are wider than the viewport, 
+    // however, if there are elements in the container that are wider than the viewport,
     // their overflow properties will not work properly because they are not bound by the size of the container.
     // To fix this, we need to set the container width to be the width of the viewport minus the row margin on xs screens.
     // This way, those elements that are larger than the viewport are properly bound by the size of the container and overflow properly.
-    width: calc(100vw - 15px);
+    // 2020.10.27: We actually need to set it slightly smaller than the row margin as a horizontal scrollbar appears at xs when exactly matched.
+    width: calc(100vw - 20px);
   }
 
   .navbar-toggle {
@@ -425,4 +426,4 @@ img.reserved-indicator-icon {
 
 .sortable {
 	cursor: pointer;
-}
+}