chore(stock): stock tab design

src/components/common/Checkbox.vue

@@ -1,18 +1,20 @@
 <template>
   <label>
-    <input type="checkbox" v-model="model" />
+    <input type="checkbox" :data-disabled="disabled" :disabled="disabled" v-model="model" />
     <div><slot /></div>
   </label>
 </template>
 
 <script lang="ts" setup>
 const model = defineModel();
+
+defineProps({
+  disabled: Boolean,
+});
 </script>
 
 <style lang="scss" scoped>
 label {
-  cursor: pointer;
-
   text-transform: uppercase;
   transition: color 200ms;
 }
@@ -20,6 +22,7 @@ label {
 div {
   padding: 0.25em 0.5em;
   color: white;
+  cursor: pointer;
 
   background-color: #222;
   border-radius: 0.25em;
@@ -54,5 +57,16 @@ input {
       content: '\2714';
     }
   }
+
+  &:disabled {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    + div {
+      opacity: 0.55;
+      cursor: auto;
+    }
+  }
 }
 </style>

src/components/tabs/StockListTab.vue

@@ -4,6 +4,7 @@
       <h2>{{ $t('stocklist.title') }}</h2>
     </div>
 
+    <div class="tab_content">
       <div class="stock_actions">
         <button class="btn btn--image" @click="clickFileInput">
           <input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
@@ -105,12 +106,14 @@
         </span>
       </div>
 
+      <div></div>
+
       <div class="stock_spawn-settings">
-      <Checkbox v-if="store.stockSupportsColdStart" v-model="store.isColdStart">
+        <Checkbox :disabled="!store.stockSupportsColdStart" v-model="store.isColdStart">
           {{ $t('stocklist.coldstart-info') }}
         </Checkbox>
 
-      <Checkbox v-if="store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
+        <Checkbox :disabled="!store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
           {{ $t('stocklist.doublemanning-info') }}
         </Checkbox>
       </div>
@@ -220,6 +223,7 @@
           </transition-group>
         </ul>
       </div>
+    </div>
   </section>
 </template>
 
@@ -520,11 +524,10 @@ export default defineComponent({
 @import '../../styles/global';
 @import '../../styles/tab.scss';
 
-.stock-list-tab {
+.tab_content {
   display: flex;
   flex-direction: column;
   gap: 0.5em;
-  position: relative;
 }
 
 .warning {

src/components/utils/StockThumbnails.vue

@@ -97,6 +97,7 @@ const allowDrop = (e: DragEvent) => {
   display: flex;
   overflow: auto;
   background-color: #353a57;
+  min-height: 100px;
 }
 
 .thumbnail-item {