feat: improve styling and input list functionality

Author: Ayideyia

frontend/src/assets/styles/utilities/flex.less

@@ -34,6 +34,9 @@
 .items-stretch {
   align-items: stretch;
 }
+.self-stretch {
+  align-self: stretch;
+}
 
 .justify-start {
   justify-content: flex-start;

frontend/src/components/InputList/index.vue

@@ -31,8 +31,8 @@ const handleDel = (i: number) => list.value.splice(i, 1)
   <div class="inline-block rounded-4">
     <div v-draggable="[list, DraggableOptions]" class="flex flex-col gap-2">
       <TransitionGroup name="list">
-        <Card v-for="(l, i) in list" :key="l">
-          <div class="flex items-center justify-between py-4">
+        <Card v-for="(l, i) in list" :key="i">
+          <div class="flex items-center justify-between py-4 break-all">
             {{ l }}
             <Button @click="handleDel(i)" icon="close" :icon-size="10" type="text" />
           </div>

frontend/src/components/KeyValueEditor/index.vue

@@ -43,9 +43,9 @@ watch(
 <template>
   <div class="gui-kv-editor inline-flex flex-col">
     <div v-for="(key, i) in keys" :key="i" class="flex items-center mr-2 mb-4 ml-2">
-      <Input v-model="keys[i]" :placeholder="placeholder[0]" />
+      <Input v-model="keys[i]" :placeholder="placeholder[0]" class="flex-1" />
       <Button @click="handleDel(i)" type="text" size="small" :icon-size="12" icon="close" />
-      <Input v-model="values[i]" :placeholder="placeholder[1]" />
+      <Input v-model="values[i]" :placeholder="placeholder[1]" class="flex-1" />
     </div>
     <Button @click="handleAdd" type="primary" icon="add" />
   </div>

frontend/src/views/RulesetsView/components/RulesetForm.vue

@@ -150,7 +150,7 @@ defineExpose({ modalSlots })
     </div>
     <div class="form-item">
       {{ t('ruleset.name') }} *
-      <Input v-model="ruleset.tag" auto-size autofocus class="input" />
+      <Input v-model="ruleset.tag" autofocus class="min-w-[75%]" />
     </div>
     <div v-show="ruleset.type !== 'Manual'" class="form-item">
       {{ t('ruleset.url') }} *
@@ -161,15 +161,15 @@ defineExpose({ modalSlots })
             ? 'http(s)://'
             : 'data/local/{filename}.' + (ruleset.format === RulesetFormat.Binary ? 'srs' : 'json')
         "
-        auto-size
+        class="min-w-[75%]"
       />
     </div>
     <div class="form-item">
       {{ t('ruleset.path') }} *
       <Input
         v-model="ruleset.path"
         :placeholder="`data/rulesets/{filename}.${ruleset.format === RulesetFormat.Binary ? 'srs' : 'json'}`"
-        auto-size
+        class="min-w-[75%]"
       />
     </div>
   </div>

frontend/src/views/SettingsView/components/components/BranchDetail.vue

@@ -81,7 +81,13 @@ const handleClearCoreCache = async () => {
       size="small"
       icon="clear3"
     />
-    <Button @click="emit('config')" type="text" size="small" icon="settings3" />
+    <Button
+      @click="emit('config')"
+      v-tips="'settings.kernel.config.name'"
+      type="text"
+      size="small"
+      icon="settings3"
+    />
   </div>
   <div class="flex items-center py-8">
     <Tag @click="refreshLocalVersion(true)" class="cursor-pointer">