Show larger app configure icon on mobile

src/theme.scss

@@ -287,6 +287,10 @@ textarea {
     padding: 10px;
     width: 241px;
 
+    @media(max-width:767px) {
+        width: 100%;
+    }
+
     .col-xs-12 {
         padding-left: 5px;
         padding-right: 5px;
@@ -325,20 +329,34 @@ textarea {
     background-color: transparent;
     transition: all 250ms;
 
-    @media(max-width:768px) {
+    @media(max-width:767px) {
         opacity: 1;
-        right: 10px;
+        top: 20px;
+        right: 20px;
     }
 
     a {
         display: block;
         text-align: center;
+        transition: transform 150ms ease-in;
+
+        @media(max-width:767px) {
+            transform: scale(1.8);
+        }
+
+        @media(min-width:768px) {
+            &:hover {
+                transform: scale(2);
+            }
+        }
     }
 }
 
-.grid-item:hover .grid-item-actions {
-    opacity: 1;
-    right: 10px;
+@media(min-width:768px) {
+    .grid-item:hover .grid-item-actions {
+        opacity: 1;
+        right: 10px;
+    }
 }
 
 .app-update-badge {
@@ -816,14 +834,6 @@ multiselect {
     width: 200px;
 }
 
-.scale {
-    transition: transform 150ms ease-in;
-
-    &:hover {
-        transform: scale(2);
-    }
-}
-
 .loading-banner {
     padding-top: 150px;
     text-align: center;

src/views/apps.html

@@ -104,7 +104,7 @@
               </div>
 
               <div class="grid-item-actions" ng-show="user.isAtLeastAdmin">
-                <a ng-href="#/app/{{ app.id}}/display" class="scale"><i class="fas fa-cogs"></i></a>
+                <a ng-href="#/app/{{ app.id}}/display"><i class="fas fa-cogs"></i></a>
               </div>
 
               <!-- we check the version here because the box updater does not know when an app gets updated -->