item sass

package.json

@@ -12,7 +12,7 @@
     "devDependencies": {
         "axios": "^0.17",
         "bootstrap-sass": "^3.3.7",
-        "cross-env": "^5.1",
+        "cross-env": "^5.1.3",
         "jquery": "^3.2",
         "laravel-mix": "^1.0",
         "lodash": "^4.17.4",

public/css/app.css

@@ -433,6 +433,12 @@ body {
   -webkit-transition: all .35s ease-in-out;
   transition: all .35s ease-in-out;
   outline: 1px solid transparent;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
 }
 
 .item:after {
@@ -642,6 +648,10 @@ div.create .input input {
   border-radius: 6px;
 }
 
+.app-icon {
+  max-width: 50px;
+}
+
 /*! Huebee v2.0.0
 http://huebee.buzz
 ---------------------------------------------- */

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/css/app.css": "/css/app.css?id=54bcdb4cb450b166634d",
-    "/js/app.js": "/js/app.js?id=86f37c024211b755c39e"
+    "/css/app.css": "/css/app.css?id=6ca0518736a7940b1f8a",
+    "/js/app.js": "/js/app.js?id=04ddfaaf5e66ed51b426"
 }

resources/assets/sass/_app.scss

@@ -157,6 +157,8 @@ body {
 	position: relative;
 	transition: all .35s ease-in-out;
 	outline: 1px solid transparent;
+	display: flex;
+	align-items: flex-start;
 	&:after {
 		content: "";
 		position: absolute;
@@ -325,3 +327,7 @@ div.create {
 		}
 	}
 }
+
+.app-icon {
+	max-width: 50px;
+}

resources/views/item.blade.php

@@ -1,7 +1,7 @@
                     <section class="item-container">
                         <div class="item" style="background-color: {{ $app->colour }}">
                             @if($app->icon)
-                            <img src="{{ asset('storage/'.$app->icon) }}" />
+                            <img class="app-icon" src="{{ asset('storage/'.$app->icon) }}" />
                             @else
                             <i class="fas fa-app-store-ios"></i>
                             @endif