Multiple UI Improvements

3 files changed, 29 insertions, 9 deletions

diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 6f70e502f..7627f6a4c 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -229,6 +229,12 @@
 				height: 80%;
 			}
 
+			audio, canvas, progress, video {
+				max-width: 100%;
+				height: auto;
+				display: block;
+			}
+
 			.modal-close {
 				background: url("../images/close.png") no-repeat;
 				@include background-size(100% 100%);
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 635b46077..8491869a6 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -299,15 +299,6 @@
                 .settings-content {
                     &.minimize-settings {
                         display: block;
-                        .section-edit {
-                            position: absolute;
-                            top: 7px;
-                            right: 0;
-                            width: 50px;
-                            .fa {
-                                display: inline-block;
-                            }
-                        }
                     }
                     .section-min:hover {
                         background: none;
@@ -349,6 +340,15 @@
                 width: 100%;
             }
             .settings-content {
+                .section-edit {
+                    position: absolute;
+                    top: 14px;
+                    right: 0;
+                    padding-right: 0;
+                    .fa {
+                        display: inline-block;
+                    }
+                }
                 &.minimize-settings {
                     padding: 0;
                     display: none;
@@ -356,6 +356,9 @@
                         padding: 70px 20px 30px;
                     }
                 }
+                .section-min:hover {
+                    background: none !important;
+                }
             }
             .settings-links {
                 background: #fff;
@@ -736,6 +739,9 @@
     }
 }
 @media screen and (max-width: 480px) {
+    .tip-overlay.tip-overlay--sidebar {
+        min-height: 350px;
+    }
     .modal {
         .modal-body {
             max-height: 70%;
diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss
index 9e5e1ad7a..20a15441e 100644
--- a/web/sass-files/sass/partials/_tutorial.scss
+++ b/web/sass-files/sass/partials/_tutorial.scss
@@ -32,6 +32,14 @@
     &.tip-overlay--sidebar {
         max-width: 75%;
         margin: 50px 0 0 10px;
+        min-height: 310px;
+        .tutorial__footer {
+            position: absolute;
+            width: 100%;
+            bottom: 20px;
+            left: 0;
+            padding: 0 20px;
+        }
         .arrow {
             top: 80px;
             left: -10px;