Fix basic layout issues on small screens for app view

src/theme.scss

@@ -448,6 +448,11 @@ multiselect {
 // ----------------------------
 
 .app-configure {
+    // Ensure back link is fully visible
+    @media(max-width:1200px) {
+        margin-top: 60px;
+    }
+
     h3 {
         margin-top: 0;
     }
@@ -456,12 +461,14 @@ multiselect {
         min-height: 349px;
     }
 
-    .col-md-2 {
-        padding-right: 0;
-    }
+    @media(min-width:768px) {
+        .col-sm-2 {
+            padding-right: 0;
+        }
 
-    .col-md-8 {
-        padding-left: 0;
+        .col-sm-8 {
+            padding-left: 0;
+        }
     }
 
     .back-to-apps-link {
@@ -469,6 +476,7 @@ multiselect {
         left: 0;
         top: 45px;
         padding: 20px;
+        z-index: 20;
 
         &:hover,
         &:focus {

src/views/app.html

@@ -269,10 +269,10 @@
   <br/>
 
   <div class="row">
-    <div class="col-md-2 text-center">
+    <div class="col-sm-2 text-center">
       <img ng-src="{{ app.iconUrl || 'img/appicon_fallback.png' }}" fallback-icon="img/appicon_fallback.png" onerror="imageErrorHandler(this)" class="app-icon"/>
     </div>
-    <div class="col-md-8">
+    <div class="col-sm-8">
       <div class="app-header-container">
         <h1>
           <a ng-href="{{ app | applicationLink }}" target="_blank" ng-class="{ 'hand': (app | appIsInstalledAndHealthy) }" ng-click="(app | appIsInstalledAndHealthy) && app.pendingPostInstallConfirmation && postInstallMessage.show(true)">{{ app.label || app.fqdn }} <sup ng-show="app | appIsInstalledAndHealthy"><i class="fas fa-external-link-alt" style="font-size: 12px;"></i></sup></a>
@@ -298,7 +298,7 @@
   </div>
 
   <div class="row">
-    <div class="col-md-8 col-md-offset-2" style="height: 10px;">
+    <div class="col-sm-8 col-sm-offset-2" style="height: 10px;">
       <div class="progress progress-striped active animateMeOpacity" ng-show="app.taskId" style="height: 10px;" uib-tooltip="{{ app.taskProgressMessage }}">
         <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ app.taskProgress }}%"></div>
       </div>
@@ -306,7 +306,7 @@
   </div>
 
   <div class="row" style="margin-top: 10px;">
-    <div class="col-md-2">
+    <div class="col-sm-2">
       <div class="app-configure-links">
         <div ng-click="setView('display')" ng-class="{ 'active': view === 'display', 'disabled': app.error }">Display</div>
         <div ng-click="setView('location')" ng-class="{ 'active': view === 'location', 'disabled': app.error }">Location</div>
@@ -320,7 +320,7 @@
         <div ng-click="setView('uninstall')" ng-class="{ 'active': view === 'uninstall' }">Uninstall</div>
       </div>
     </div>
-    <div class="col-md-8">
+    <div class="col-sm-8">
       <div class="card" ng-show="view === 'display'">
         <div class="row">
           <div class="col-md-12">