fix: .container set to width larger than viewport

less/admin/PermissionsPage.less

@@ -50,6 +50,7 @@
     color: var(--muted-color);
   }
   thead th {
+    position: -webkit-sticky;
     position: sticky;
     top: 0;
     padding-bottom: 10px;
@@ -73,6 +74,7 @@
   }
   tbody {
     th {
+      position: -webkit-sticky;
       position: sticky;
       left: 0;
       padding-right: 50px;

less/common/App.less

@@ -2,8 +2,8 @@
   position: relative !important;
   padding-top: var(--header-height);
   padding-bottom: 50px;
-  overflow-x: hidden;
   min-height: 100vh;
+  width: 100%;
 
   @media @phone {
     padding-top: var(--header-height-phone);
@@ -27,13 +27,16 @@
       box-shadow: 0 2px 6px var(--shadow-color);
     }
   }
-  .App-primaryControl, .App-titleControl, .App-backControl {
+  .App-primaryControl,
+  .App-titleControl,
+  .App-backControl {
     position: absolute !important;
     z-index: calc(~"var(--zindex-header) + 1");
     top: 0 !important;
     margin: 0;
 
-    .App.affix &, .Composer & {
+    .App.affix &,
+    .Composer & {
       position: fixed !important;
     }
 
@@ -59,15 +62,18 @@
     right: 0;
 
     &.Dropdown {
-      .Button, .Button-caret {
+      .Button,
+      .Button-caret {
         display: none !important;
       }
-      .Dropdown-toggle, .Button-icon {
+      .Dropdown-toggle,
+      .Button-icon {
         display: block !important;
       }
     }
   }
-  .App-primaryControl, .App-backControl {
+  .App-primaryControl,
+  .App-backControl {
     margin: 0 !important;
 
     > .Button {
@@ -90,7 +96,8 @@
     text-align: center;
     color: var(--header-color) !important;
 
-    &, > .Button {
+    &,
+    > .Button {
       font-size: 16px;
     }
     > .Button {
@@ -142,6 +149,7 @@
     z-index: var(--zindex-modal);
 
     .drawerOpen & {
+      -webkit-transform: none !important;
       transform: none !important;
     }
   }
@@ -199,12 +207,15 @@
     > li {
       padding: 0 10px 0;
     }
-    .FormControl, .ButtonGroup, .Button {
+    .FormControl,
+    .ButtonGroup,
+    .Button {
       width: 100%;
       text-align: left;
     }
     .Dropdown-menu {
-      .ButtonGroup, .Button {
+      .ButtonGroup,
+      .Button {
         width: auto;
       }
     }
@@ -220,7 +231,7 @@
 @media @phone {
   .App-drawer {
     & when (@config-colored-header = true) {
-      .light-contents(@name: 'header-colored');
+      .light-contents(@name: "header-colored");
     }
   }
 }
@@ -244,7 +255,7 @@
     }
 
     & when (@config-colored-header = true) {
-      .light-contents(@name: 'header-colored');
+      .light-contents(@name: "header-colored");
     }
   }
 
@@ -253,7 +264,8 @@
     margin-right: 25px;
   }
   .Header-controls {
-    &, > li {
+    &,
+    > li {
       display: inline-block;
       vertical-align: middle;
     }

less/common/Dropdown.less

@@ -177,6 +177,7 @@
     box-shadow: 0 2px 6px var(--shadow-color);
     visibility: hidden;
     overflow: auto;
+    -webkit-overflow-scrolling: touch;
     transform: translate(0, 70vh);
     transition: transform 0.3s, visibility 0s 0.3s;
 
@@ -207,7 +208,8 @@
       }
     }
     .open& {
-      transform: none;
+      -webkit-transform: none;
+              transform: none;
       visibility: visible;
       transition-delay: 0s;
     }

less/common/Modal.less

@@ -33,6 +33,7 @@
   bottom: 0;
   left: 0;
   z-index: var(--zindex-modal);
+  -webkit-overflow-scrolling: touch;
 
   // When fading in the modal, animate it to slide down
   .Modal {
@@ -142,7 +143,8 @@
     transform: translate(0, 100vh);
 
     &.in {
-      transform: none !important;
+      -webkit-transform: none !important;
+              transform: none !important;
     }
     &:before {
       content: " ";
@@ -153,7 +155,8 @@
   .Modal {
     max-width: 100%;
     margin: 0;
-    transform: none !important;
+    -webkit-transform: none !important;
+            transform: none !important;
   }
   .Modal-content {
     border-radius: 0;
@@ -180,6 +183,7 @@
     z-index: 1;
   }
   .Modal-content {
+
     border: 0;
     border-radius: var(--border-radius);
     box-shadow: 0 7px 15px var(--shadow-color);

less/common/Select.less

@@ -6,6 +6,7 @@
     display: inline-block;
     width: auto;
     -webkit-appearance: none;
+    -moz-appearance: none;
     padding-right: 30px;
     cursor: pointer;
     line-height: 1;

less/common/mixins/vendor-prefixes.less

@@ -65,7 +65,11 @@
 // CSS3 Content Columns
 /** @deprecated */
 .content-columns(@column-count; @column-gap: @grid-gutter-width) {
+  // Safari
+  -webkit-column-count: @column-count;
   column-count: @column-count;
+  // Safari
+  -webkit-column-gap: @column-gap;
   column-gap: @column-gap;
 }
 
@@ -81,6 +85,7 @@
 // Placeholder text
 .placeholder(@color) {
   // Safari
+  &::-webkit-input-placeholder,
   &::placeholder {
     color: @color;
   }
@@ -171,7 +176,7 @@
 // User select
 // For selecting text on the page
 .user-select(@select) {
-  // Safari
+  // Safari + MS Edge
   -webkit-user-select: @select;
   user-select: @select;
 }

less/common/scaffolding.less

@@ -13,6 +13,7 @@ body {
   font-size: 13px;
   line-height: 1.5;
   overflow-y: scroll;
+  width: 100%;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -65,6 +66,8 @@ p {
   @media @desktop-hd {
     width: @screen-desktop-hd;
   }
+
+  max-width: 100%;
 }
 
 .containerNarrow {

less/common/sideNav.less

@@ -80,6 +80,7 @@
   padding: 15px 0;
   white-space: nowrap;
   overflow: auto;
+  -webkit-overflow-scrolling: touch;
 
   &:after {
     content: " ";

less/forum/DiscussionPage.less

@@ -15,7 +15,8 @@
       margin: 15px;
       display: inline-block;
 
-      &.item-controls, &.item-scrubber {
+      &.item-controls,
+      &.item-scrubber {
         margin: 0;
         display: block;
       }
@@ -23,22 +24,27 @@
   }
 }
 @media @tablet-up {
-  .DiscussionPage-nav {
-    float: right;
+  .DiscussionPage-discussion > .container {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .DiscussionPage-nav {
+    min-width: 150px;
 
-    &, > ul {
-      width: 150px;
-    }
     > ul {
-      position: fixed;
-      margin-top: 30px;
+      margin-top: 24px;
+      position: sticky;
+      top: ~"calc(24px + var(--header-height))";
       z-index: 1;
+      width: 100%;
 
       > li {
         margin-bottom: 10px;
       }
     }
-    .ButtonGroup, .Button {
+    .ButtonGroup,
+    .Button {
       width: 100%;
     }
     .ButtonGroup:not(.itemCount1) {
@@ -54,7 +60,7 @@
 
 @media @tablet-up {
   .DiscussionPage-stream {
-    margin-right: 225px;
+    margin-right: 75px;
   }
 }
 
@@ -132,7 +138,8 @@
     }
   }
   // When the pane is pinned, move the other page content inwards
-  .App-content, .App-footer {
+  .App-content,
+  .App-footer {
     .hasPane.panePinned & {
       margin-left: var(--pane-width);
 

views/install/app.php

@@ -107,15 +107,25 @@
       }
 
       .animated {
+        -webkit-animation-fill-mode: both;
         animation-fill-mode: both;
+
+        -webkit-animation-duration: 0.5s;
         animation-duration: 0.5s;
+
         animation-delay: 1.7s;
+        -webkit-animation-delay: 1.7s;
+      }
+      @-webkit-keyframes fadeIn {
+        0% {opacity: 0}
+        100% {opacity: 1}
       }
       @keyframes fadeIn {
         0% {opacity: 0}
         100% {opacity: 1}
       }
       .fadeIn {
+        -webkit-animation-name: fadeIn;
         animation-name: fadeIn;
       }