From b2aa37d35bc2b7b119f10b0cb6d834442807e68d Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 23 Jun 2024 15:04:07 +0200
Subject: [PATCH] Clean up stylesheet, small fixes

---
 .../utilities/assetManager/AssetManager.vue   | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index 0985c09..a5f5eee 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -23,7 +23,7 @@
       <div class="asset">
         <input class="input-cyan search-field" placeholder="Search..." />
       </div>
-      <div class="asset">
+      <div class="asset add-new">
         <span class="asset-name">Upload new</span>
         <label for="upload-asset" class="file-upload">
           <input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
@@ -244,17 +244,8 @@ onMounted(() => {
   .asset-categories, .assets, .asset-info {
     flex-direction: column;
     position: relative;
-    // &::after {
-    //   content: '';
-    //   position: absolute;
-    //   right: 0;
-    //   width: 1px;
-    //   height: 100%;
-    //   top: 0;
-    //   background-color: $dark-cyan;
-    // }
-    .category, .asset, .image-container {
 
+    .category, .asset, .image-container {
       position: relative;
       padding: 10px;
       &::after {
@@ -269,6 +260,15 @@ onMounted(() => {
       &.selected {
         background-color: rgba($cyan, 0.8);
       }
+      &.add-new {
+        display: flex;
+        align-items: center;
+        gap: 10px 20px;
+        flex-wrap: wrap;
+        .asset-name {
+          flex-shrink: 0;
+        }
+      }
       .search-field {
         border-radius: 5px;
         padding: 8px 10px;
@@ -281,7 +281,6 @@ onMounted(() => {
         text-shadow: 0 3px 6px rgba($black, 0.2);
         padding: 6px 15px;
         display: inline-flex;
-        margin-left: 20px;
 
         &:hover {
           background-color: $cyan;