Merge pull request #2079 from LiFaytheGoblin/2065/title-too-long-warning

Implemented design for title-too-long-warning

src/views/preview/preview.scss

@@ -6,6 +6,12 @@ $player-width: 482px;
 $player-height: 406px;
 $stage-width: 480px;
 
+/* screen sizes */
+$small: "screen and (max-width : #{$mobile}-1)";
+$medium: "screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
+$big: "screen and (min-width : #{$tablet})";
+$medium-and-small: "screen and (max-width : #{$tablet}-1)";
+
 /* override view padding for share banner */
 #view {
     padding: 0;
@@ -29,7 +35,7 @@ $stage-width: 480px;
         &.has-error {
 
             .validation-message {
-                transform: translate(22rem, 0);
+                right: 0;
             }
         }
 
@@ -73,7 +79,6 @@ $stage-width: 480px;
 
     .title {
         margin-left: 1rem;
-        /* width: inherit;  Inherits the width of whatever this is in. This works well for the preview page and might need to change if used in a different context*/
         min-width: 0;
         text-align: left;
         font-size: .8rem;
@@ -81,12 +86,11 @@ $stage-width: 480px;
     }
 
     .validation-message {
-        $arrow-border-width: 1rem;
         display: block;
         position: absolute;
-        top: 0;
-        left: 0;
-        margin-left: $arrow-border-width;
+        z-index: 1;
+        $arrow-border-width: 1rem;
+        margin-top: $arrow-border-width;
         border: 1px solid $active-gray;
         border-radius: 5px;
         background-color: $ui-orange;
@@ -97,13 +101,18 @@ $stage-width: 480px;
         color: $type-white;
         font-size: 1rem;
 
+        @media #{$medium-and-small} {
+            margin-top: calc($arrow-border-width / 2);
+            width: 100%;
+        }
+
         &:before {
             display: block;
             position: absolute;
-            top: 1rem;
-            left: -$arrow-border-width / 2;
+            top: -.5rem;
+            left: calc(50% - calc(#{$arrow-border-width} / 2));
 
-            transform: rotate(45deg);
+            transform: rotate(135deg);
 
             border-bottom: 1px solid $active-gray;
             border-left: 1px solid $active-gray;
@@ -114,6 +123,10 @@ $stage-width: 480px;
             height: $arrow-border-width;
 
             content: "";
+
+            @media #{$medium-and-small} {
+                display: none;
+            }
         }
     }
 
@@ -458,7 +471,7 @@ $stage-width: 480px;
             content: "";
         }
     }
-    
+
     .studio-button {
         &:before {
             background-image: url("/svgs/project/studio-add-white.svg");