fix(docs): Fix demo-browser in responsive case

Author: Airblader

projects/ngqp-demo/src/app/shared/demo-browser/demo-browser.component.html

@@ -1,8 +1,10 @@
 <div class="demo-browser__toolbar">
-    <button class="demo-browser__button" title="{{ routerAdapter.history.length }} previous route(s)"
-            (click)="routerAdapter.goBack()" [disabled]="routerAdapter.history.length === 0">
-        <fa-icon [icon]="faArrowLeft" size="1x"></fa-icon>
-    </button>
+    <div class="demo-browser__buttons">
+        <button class="demo-browser__button" title="{{ routerAdapter.history.length }} previous route(s)"
+                (click)="routerAdapter.goBack()" [disabled]="routerAdapter.history.length === 0">
+            <fa-icon [icon]="faArrowLeft" size="1x"></fa-icon>
+        </button>
+    </div>
 
     <div class="demo-browser__url">
         <span class="demo-browser__url__domain" (click)="urlInput.focus()">https://www.app.io</span>

projects/ngqp-demo/src/app/shared/demo-browser/demo-browser.component.scss

@@ -39,12 +39,13 @@ $panel-content-height: 27px;
         // box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
     }
 
-    &__button {
-        flex-grow: 0;
+    &__buttons {
+        flex: 0;
     }
 
     &__url {
-        flex-grow: 1;
+        flex: 1;
+        width: 100%;
 
         font-family: var(--font-family-sans-serif);
         font-size: 14px;
@@ -63,14 +64,15 @@ $panel-content-height: 27px;
         align-items: center;
 
         &__domain {
-            flex-grow: 0;
+            flex: 0;
 
             vertical-align: middle;
             color: #9e9e9e;
         }
 
         &__input {
-            flex-grow: 1;
+            flex: 1;
+            width: 100%;
 
             border: none;
             outline: none;