UI - wrapping lookup path (#4644)

* add creation path to the display on wrapping lookup

* fix z-index issue with console-panel and the subnav on smaller viewports

* use position:fixed for all of the global flash stuff

* tweaks for the console on mobile devices

ui/app/styles/components/console-ui-panel.scss

@@ -2,13 +2,14 @@
   background: linear-gradient(to right, #191A1C, #1B212D);
   height: 0;
   left: 0;
-  min-height: 400px;
   overflow: auto;
-  position: fixed;
+  position: absolute;
+  min-height: 0;
   right: 0;
   transform: translate3d(0, -400px, 0);
   transition: min-height $speed ease-out, transform $speed ease-in;
   will-change: transform, min-height;
+  -webkit-overflow-scrolling: touch;
   z-index: 199;
 }
 
@@ -69,7 +70,7 @@
     color: $white;
     flex: 1;
     font-family: $family-monospace;
-    font-size: $body-size;
+    font-size: 16px;
     font-weight: $font-weight-bold;
     margin-left: -$size-10;
     outline: none;
@@ -119,11 +120,13 @@
 .panel-open .console-ui-panel-scroller  {
   box-shadow: $box-shadow-highest;
   transform: translate3d(0, 0, 0);
+  min-height: 400px;
 }
 
 .panel-open .console-ui-panel-scroller.fullscreen  {
   bottom: 0;
   top: 0;
+  position: fixed;
   min-height: 100%;
 }
 

ui/app/styles/components/global-flash.scss

@@ -1,14 +1,7 @@
 .global-flash {
   position: fixed;
-  @include until($desktop) {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    bottom: auto;
-    margin: 0 auto;
-    width: 95%;
-  }
-  width: 450px;
+  max-width: 450px;
+  width: 95%;
   bottom: 0;
   left: 0;
   margin: 10px;

ui/app/styles/core/tabs.scss

@@ -5,6 +5,7 @@
   padding: $size-10 $size-10;
 
   @include until($tablet) {
+    position:relative;
     background-color: $grey;
     flex: 0 0 100%;
     height: 3rem;

ui/app/templates/components/console/command-input.hbs

@@ -1,5 +1,5 @@
 {{i-con glyph="chevron-right" size=12}}
-<input onkeyup={{action 'handleKeyUp'}} value={{value}} />
+<input onkeyup={{action 'handleKeyUp'}} value={{value}} autocomplete="off" spellcheck="false" />
 {{#tool-tip horizontalPosition="auto-right" verticalPosition=(if isFullscreen "above" "below") as |d|}}
   {{#d.trigger tagName="button" type="button" class=(concat "button is-compact" (if isFullscreen " active")) click=(action "fullscreen") data-test-tool-tip-trigger=true}}
     {{i-con glyph=(if isFullscreen "fullscreen-close" "fullscreen-open") aria-hidden="true" size=16}}

ui/app/templates/partials/tools/lookup.hbs

@@ -10,6 +10,7 @@
 
 {{#if (or creation_time creation_ttl)}}
   <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
+    {{info-table-row label="Creation path" value=creation_path data-test-tools="token-lookup-row"}}
     {{info-table-row label="Creation time" value=creation_time data-test-tools="token-lookup-row"}}
     {{info-table-row label="Creation TTL" value=creation_ttl data-test-tools="token-lookup-row"}}
     {{#if expirationDate}}