address issues associated with guides in singlepane

src/main/content/_assets/css/guide-common.scss

@@ -428,7 +428,7 @@
   width: 38px;	
   height: 38px;	
   padding: 8.5px 10px;
-  z-index: 9997;
+  z-index: 97;
   top: 1px;
   right: 1px;
   &:hover {	
@@ -450,6 +450,10 @@
   }
 }
 
+@media (max-width: 1169.98px){//me added
+  .code_command .copy_to_clipboard{right: 42px;}
+}
+
 @media (max-width: 1199.98px) {
   .guide_item {
     width: 100%;
@@ -507,13 +511,29 @@
   #guide_content .code_command > .code_block_wrapper:before {
     display: none;
   }
+
+  .view_code{
+    display: block;
+  }
+
+  .code_command pre{
+    cursor:text;
+  } 
 }
 
 @media (min-width: 1170px) {
   #background_container {
     background-image: inherit;
     margin-bottom: 0;
   }
+
+  .view_code{
+    display: none;
+  }
+
+  .code_command pre{
+    cursor:pointer;
+  } 
 }
 
 @media (min-width: 1440px) {
@@ -583,4 +603,20 @@
   .paragraph {
     font-style: italic;
   }
+}
+
+.view_code {
+  position: absolute;
+  background-color: #eeeff3;
+  width: 38px;
+  height: 38px;
+  padding: 8.5px 10px;
+  z-index: 97;
+  top: 1px;
+  right: 1px;
+  &:hover {	
+    border: solid 1px #b2bbd1;
+    padding: 7.5px 9px;
+    cursor: pointer;
+  }	
 }

src/main/content/_assets/css/guide-multipane-static.scss

@@ -46,13 +46,21 @@
       #dismiss_button {
         position: absolute;
         display: inline-block;
-        top: 0;
-        right: 50px;
-        background: #ffffff;
-        border: 1px solid #96bc32;
-        border-radius: 3px;
-        width: 92px;
-        height: 38px;
+        top: 8px;
+        right: 4px;
+        background: transparent;
+        border: none;
+        color: #5E6B8D;
+        width: 29.5px;
+        height: 30px;
+        font-weight: bold;
+        font-size: 18px;
+        padding: 2px 6px 5px;
+        &:hover {
+          border: solid 1px #b2bbd1;
+          top: 7px;
+          right: 4px;
+        }
       }
     }
   }

src/main/content/_assets/css/guide-multipane.scss

@@ -324,6 +324,15 @@ body {
   }
 }
 
+@media (max-width: 1169.98px){
+  .copyFileButton{
+    right: 40px;
+    &:hover {
+      right: 39px;
+    }
+  }
+}
+
 .CodeRay .line-numbers {
   display: inline-block;
   visibility: hidden;

src/main/content/_assets/js/guide-common.js

@@ -483,7 +483,16 @@ $(document).ready(function () {
         $(this).prepend('<div class="copied_confirmation">Copied to clipboard</div><input type="image" class="copy_to_clipboard" src="/img/guides_copy_button.svg" alt="Copy code block" title="Copy code block"/>');
     });
 
+    $('.code_command .code_block_wrapper').each(function (){
+        $(this).prepend('<div class="view_code" title="View full code"><img src="/img/maximize.svg" alt="View Code"/></div>');
+    });
+
+    if (inSingleColumnView()) {
+        $(".code_command").removeClass("hotspot")
+    }
+
     $(window).on("resize", function () {
+        (inSingleColumnView()) ? $(".code_command").removeClass("hotspot") : $(".code_command").addClass("hotspot");
         if (!inSingleColumnView()){
             $("#code_column").css("top", "0px");
         }

src/main/content/_assets/js/guide-multipane-static.js

@@ -762,11 +762,11 @@ $(document).ready(function () {
     );
 
     // In mobile view if the user clicks a hotspot it shows a modal of the file with the hotspot code highlighted.
-    $(".hotspot").on("click", function () {
+    $(".hotspot,.view_code").on("click", function () {
         if (inSingleColumnView()) {
             $("body").addClass("unscrollable");
             $("#mobile_toc_accordion_container").css({
-                "pointer-events": "none",
+                "display":"none"
             });
             $("#code_column").addClass("modal");
 
@@ -784,21 +784,18 @@ $(document).ready(function () {
 
             // Set the top of the code to appear underneath the hotspot that was clicked.
             var hotspot_height = $(this).height();
-            var bottom = scrollTo + window.innerHeight - hotspot_height - 5;
-            var height = bottom - scrollTo;
             $("#code_column").css({
                 top: mobile_toc_height + hotspot_height + 5 + "px",
                 left: "0px",
-                height: height,
+                height: "100vh",
             });
-            handleHotspotHover($(this));
         }
     });
 
     $("#dismiss_button").on("click", function () {
         $("body").removeClass("unscrollable");
         $("#mobile_toc_accordion_container").css({
-            "pointer-events": "auto",
+            "display":"table"
         });
         $("#code_column").removeClass("modal");
         $("#code_column").css({

src/main/content/_layouts/guide-multipane.html

@@ -189,7 +189,7 @@ <h1 id="guide_title">{{ page.title }}</h1>
     </div>
 
     <button id="dismiss_button" aria-label="Back to text" tabindex="0">
-      {% t guides.back_to_text %}
+      X
     </button>
   </div>
 </div>