Multiple UI Improvements (#4253)

Reverting config

Reverting config.json

webapp/sass/components/_popover.scss

@@ -25,6 +25,8 @@
     }
 
     .popover-content {
+        word-break: break-word;
+
         p {
             &:last-child {
                 margin-bottom: 5px;

webapp/sass/layout/_post.scss

@@ -530,6 +530,12 @@ body.ios {
             }
         }
 
+        .status-wrapper {
+            &:after {
+                bottom: 10px;
+            }
+        }
+
         blockquote {
             display: inline-block;
             font-size: 1em;
@@ -636,12 +642,13 @@ body.ios {
 
         .post__img {
             padding-top: 3px;
-            width: 27px;
+            width: 16px;
 
             img,
             svg {
                 height: 20px;
-                width: 20px;
+                visibility: hidden;
+                width: 9px;
             }
         }
     }

webapp/sass/responsive/_mobile.scss

@@ -21,6 +21,21 @@
         }
     }
 
+    .video-div {
+        &.embed-responsive-item {
+            height: 0;
+            padding-bottom: 75%;
+
+            iframe {
+                height: 100%;
+                left: 0;
+                position: absolute;
+                top: 0;
+                width: 100%;
+            }
+        }
+    }
+
     .tutorial-steps__container {
         .tutorial__content {
             .tutorial__steps {
@@ -124,6 +139,14 @@
             }
         }
 
+        &.post--compact {
+            .status-wrapper {
+                &:after {
+                    bottom: 12px;
+                }
+            }
+        }
+
         &.same--root {
             &.same--user {
                 .flag-icon__container {
@@ -795,7 +818,7 @@
     }
 
     .sidebar--menu {
-        @include single-transition(transform, .5s, ease);
+        @include single-transition(transform, .35s, ease);
         @include translate3d(290px, 0, 0);
         border: none;
         display: block;
@@ -808,10 +831,11 @@
     }
 
     .sidebar--left {
-        @include single-transition(transform, .5s, ease);
+        @include single-transition(transform, .35s, ease);
         @include translate3d(-290px, 0, 0);
-        width: 290px;
         border: none;
+        width: 290px;
+
         &.sidebar--padded {
             padding-top: 0;
         }
@@ -944,7 +968,7 @@
     }
 
     .inner-wrap {
-        @include single-transition(all, .5s, ease);
+        @include single-transition(all, .35s, ease);
 
         .app__body & {
             &:before {
@@ -955,7 +979,7 @@
                 left: -15px;
                 position: absolute;
                 top: 0;
-                transition: background-color 0.5s ease, z-index 0s ease 0.5s;
+                transition: background-color .35s ease, z-index 0s ease .35s;
                 width: calc(100% + 30px);
                 z-index: 0;
             }
@@ -965,8 +989,9 @@
             @include translate3d(290px, 0, 0);
 
             &:before {
+                @include single-transition(all, .35s, ease);
+
                 background-color: rgba(0, 0, 0, .4);
-                transition: background-color .5s ease;
                 z-index: 9999;
             }
         }
@@ -975,8 +1000,8 @@
             @include translate3d(-290px, 0, 0);
 
             &:before {
-                background-color: rgba(0, 0, 0, 0.4);
-                transition: background-color 0.5s ease;
+                @include single-transition(all, .35s, ease);
+                background-color: rgba(0, 0, 0, .4);
                 z-index: 9999;
             }
         }