refactor(admin): use target-row grid for target inputs

admin/assets/css/main.css

@@ -696,6 +696,52 @@ main {
   width: 100%;
 }
 
+.target-row {
+  display: grid;
+  grid-template-columns: minmax(130px, 1fr) auto;
+  grid-template-areas:
+    "select del"
+    "in1 in2";
+  gap: 8px;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+
+.target-row select {
+  grid-area: select;
+  width: 100%;
+  padding: 7px 8px;
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  color: var(--text);
+  font-family: var(--ui);
+  font-size: 12.5px;
+  font-weight: 500;
+}
+
+.target-row input[type="text"] {
+  width: 100%;
+  min-width: 0;
+}
+
+.target-row input.tg-in1 {
+  grid-area: in1;
+}
+
+.target-row input.tg-in2 {
+  grid-area: in2;
+}
+
+.target-row > .icon-btn {
+  grid-area: del;
+  justify-self: end;
+}
+
 .add-filter {
   margin-top: 4px;
   width: 100%;
@@ -1008,6 +1054,14 @@ main {
     grid-template-columns: 100px 1fr auto;
   }
 
+  .target-row {
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "select del"
+      "in1 in1"
+      "in2 in2";
+  }
+
   header {
     padding: 12px 16px;
   }

admin/components/RouteEditor.vue

@@ -79,7 +79,7 @@
               >{{ t("routeEditor.targets") }}
               <span class="lbl-note">{{ t("routeEditor.targetsNote") }}</span></label
             >
-            <div v-for="(tg, i) in form.targets" :key="i" class="filter-row">
+            <div v-for="(tg, i) in form.targets" :key="i" class="target-row">
               <select v-model="tg.platform">
                 <option value="discord">Discord</option>
                 <option value="telegram">Telegram</option>
@@ -88,11 +88,13 @@
                 <input
                   v-model="tg.channelId"
                   type="text"
+                  class="tg-in1"
                   :placeholder="t('routeEditor.channelPlaceholder')"
                 />
                 <input
                   v-model="tg.threadId"
                   type="text"
+                  class="tg-in2"
                   :placeholder="t('routeEditor.threadPlaceholder')"
                 />
               </template>
@@ -100,11 +102,13 @@
                 <input
                   v-model="tg.chatId"
                   type="text"
+                  class="tg-in1"
                   :placeholder="t('routeEditor.chatPlaceholder')"
                 />
                 <input
                   v-model="tg.topicId"
                   type="text"
+                  class="tg-in2"
                   :placeholder="t('routeEditor.topicPlaceholder')"
                 />
               </template>