Small styling changes, responsiveness modals

src/assets/scss/main.scss

@@ -59,6 +59,7 @@ input {
 }
 
 .input-cyan {
+  font-family: $titles;
   border: 1px solid $cyan;
   background-color: rgba($white, 0.8);
   &:focus, &:focus-visible {

src/components/utilities/GmPanel.vue

@@ -24,8 +24,7 @@ import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import AssetManager from '@/components/utilities/assetManager/AssetManager.vue'
 
-let toggle = ref('asset-manager');
-
+let toggle = ref('asset-manager')
 </script>
 
 <style lang="scss" scoped>
@@ -34,6 +33,7 @@ let toggle = ref('asset-manager');
 .gm-selector {
     display: flex;
     gap: 5px;
+    flex-wrap: wrap;
 
     button {
         padding: 6px 15px;

src/components/utilities/Modal.vue

@@ -205,8 +205,7 @@ function handleResize() {
 
   .modal-header {
     cursor: move;
-    padding: 0 20px;
-    min-height: 50px;
+    padding: 10px 20px;
     display: flex;
     justify-content: space-between;
     gap: 30px;
@@ -216,6 +215,7 @@ function handleResize() {
     .modal-title {
       margin: 0;
       font-weight: 400;
+      flex-shrink: 0;
     }
 
     .buttons {

src/components/utilities/assetManager/AssetManager.vue

@@ -21,14 +21,7 @@
     <!-- Assets -->
     <div class="assets active" @scroll="onScroll">
       <div class="asset">
-        <!-- @TODO: can this pls be less html, make input 100% and fix the spacing below -->
-        <div class="modal-form">
-          <div class="form-fields">
-            <div class="form-field">
-              <input class="input-cyan" placeholder="Search..." />
-            </div>
-          </div>
-        </div>
+        <input class="input-cyan search-field" placeholder="Search..." />
       </div>
       <div class="asset">
         <span class="asset-name">Upload new</span>
@@ -266,6 +259,11 @@ onMounted(() => {
       &.selected {
         background-color: rgba($cyan, 0.8);
       }
+      .search-field {
+        border-radius: 5px;
+        padding: 8px 10px;
+        width: calc(100% - 20px);
+      }
       .file-upload {
         background-color: rgba($cyan, 0.5);
         border: 1px solid $white;

src/components/utilities/zoneEditor/Decorations.vue

@@ -11,7 +11,6 @@
             <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Decorations</button>
             <button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">NPC</button>
           </div>
-          <hr>
           <canvas ref="canvas" :width="decorationWidth" :height="decorationHeight" style="display: none"></canvas>
           <div class="decorations">
             <img v-for="(decoration, index) in decorations" :key="index" :src="decoration" alt="Decoration" @click="zoneEditorStore.setSelectedDecoration(index)" :class="{ selected: zoneEditorStore.selectedDecoration && zoneEditorStore.selectedDecoration === index }" />
@@ -111,6 +110,7 @@ onMounted(async () => {
 
 .buttons {
   display: flex;
+  flex-wrap: wrap;
   gap: 10px;
 }