refactor(items): improve edit form layout with responsive grid rows

Group related fields like name/price and category/usage.
Stack fields vertically on screens smaller than 720px.

frontend/src/views/ItemEdit.vue

@@ -316,6 +316,7 @@ onMounted(() => {
     <StatusMessage v-if="message" variant="danger">{{ message }}</StatusMessage>
 
     <form v-if="!loading && options" id="item-edit-form" class="modal-edit-form" @submit.prevent="saveItem">
+      <div class="item-edit-row item-edit-row--name-price">
         <TranslationFields
           id-prefix="item-name"
           v-model:base-value="itemForm.name"
@@ -326,6 +327,12 @@ onMounted(() => {
           required
         />
 
+        <div class="field">
+          <label for="item-base-price">{{ t('pages.items.basePrice') }}</label>
+          <input id="item-base-price" v-model="itemForm.basePrice" type="number" min="0" step="1" inputmode="numeric" />
+        </div>
+      </div>
+
       <TranslationFields
         id-prefix="item-details"
         v-model:base-value="itemForm.details"
@@ -352,11 +359,7 @@ onMounted(() => {
         @error="message = $event"
       />
 
-      <div class="field">
+      <div class="item-edit-row item-edit-row--category-usage">
-        <label for="item-base-price">{{ t('pages.items.basePrice') }}</label>
-        <input id="item-base-price" v-model="itemForm.basePrice" type="number" min="0" step="1" inputmode="numeric" />
-      </div>
-
         <div class="field">
           <label for="item-category">{{ t('pages.items.category') }}</label>
           <TagsSelect
@@ -381,6 +384,7 @@ onMounted(() => {
             :search-placeholder="t('pages.items.searchUsage')"
           />
         </div>
+      </div>
 
       <div class="check-row">
         <label><input v-model="itemForm.dyeable" type="checkbox" /> {{ t('pages.items.dyeable') }}</label>
@@ -436,3 +440,30 @@ onMounted(() => {
     </template>
   </Modal>
 </template>
+
+<style scoped>
+.item-edit-row {
+  display: grid;
+  gap: 12px;
+  align-items: start;
+}
+
+.item-edit-row--name-price {
+  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
+}
+
+.item-edit-row--category-usage {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.item-edit-row > * {
+  min-width: 0;
+}
+
+@media (max-width: 720px) {
+  .item-edit-row--name-price,
+  .item-edit-row--category-usage {
+    grid-template-columns: 1fr;
+  }
+}
+</style>