Temporary col functionality, and absolute unfiltered styling agony

src/components/utilities/assetManager/AssetManager.vue

@@ -143,16 +143,18 @@ function toTop() {
       display: none;
     }
     .image-container {
-      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 300px;
       img {
-        height: 200px;
-        padding-right: 10px;
-        margin: 20px 0;
+        max-height: 280px;
       }
     }
     .modal-form {
       &.asset-manager {
         margin: 10px;
+        padding: 10px;
         width: calc(100% - 40px);
         display: block;
 
@@ -160,13 +162,7 @@ function toTop() {
           display: flex;
           gap: 10px;
           flex-wrap: wrap;
-
-          .form-field {
-            width: calc(50% - 5px);
-            &.name {
-              width: 100%;
-            }
-          }
+          
           .submit {
             width: 100%;
           }

src/components/utilities/assetManager/partials/ObjectDetails.vue

@@ -1,24 +1,21 @@
 <template>
   <div class="object-manager">
     <div class="image-container">
-      <!--      @TODO show img with width100% to keep quality and show it center with padding around it, preferably the window wont jump if a larger object is selected -->
       <img :src="objectImageUrl" :alt="'Object ' + selectedObject" />
     </div>
     <div class="modal-form asset-manager">
       <form class="form-fields" @submit.prevent>
-        <div class="form-field name">
+        <div class="form-field col-12">
           <label for="name">Name</label>
           <input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
         </div>
-        <div class="form-field name">
-          <label for="name">Origin X</label>
-          <!-- @TODO only allow numbers here -->
-          <input class="input-cyan" type="text" name="name" placeholder="Origin X" />
+        <div class="form-field">
+          <label for="origin-x">Origin X</label>
+          <input class="input-cyan" type="number" name="origin-x" placeholder="Origin X" />
         </div>
-        <div class="form-field name">
-          <label for="name">Origin Y</label>
-          <!-- @TODO only allow numbers here -->
-          <input class="input-cyan" type="text" name="name" placeholder="Origin Y" />
+        <div class="form-field">
+          <label for="origin-y">Origin Y</label>
+          <input class="input-cyan" type="number" name="origin-y" placeholder="Origin Y" />
         </div>
         <div class="submit">
           <button class="btn-cyan" type="button" @click="removeObject">Save</button>