fix: rules page && dns query for mobile

src/pages/Config.tsx

@@ -42,18 +42,21 @@ const DNSQueryForm = () => {
 
   return (
     <div class="flex flex-col">
-      <form use:form={form} class="flex items-center gap-2">
+      <form use:form={form} class="flex flex-col gap-2 sm:flex-row">
-        <input name="name" class="input input-bordered flex-1" />
+        <input
-
+          name="name"
-        <select name="type" class="select select-bordered">
+          class="input input-bordered w-full max-w-xs sm:flex-1"
-          <option>A</option>
+        />
-          <option>AAAA</option>
+        <div class="flex items-center gap-2">
-          <option>MX</option>
+          <select name="type" class="select select-bordered">
-        </select>
+            <option>A</option>
-
+            <option>AAAA</option>
-        <button type="submit" class="btn btn-primary">
+            <option>MX</option>
-          {t('dnsQuery')}
+          </select>
-        </button>
+          <button type="submit" class="btn btn-primary">
+            {t('dnsQuery')}
+          </button>
+        </div>
       </form>
 
       <Show when={DNSQueryResult().length > 0}>

src/pages/Rules.tsx

@@ -3,6 +3,7 @@ import { IconReload } from '@tabler/icons-solidjs'
 import InfiniteScroll from 'solid-infinite-scroll'
 import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
 import { useRules } from '~/signals/rules'
+import { formatTimeFromNow } from '~/utils/proxies'
 
 export default () => {
   const [t] = useI18n()
@@ -50,7 +51,10 @@ export default () => {
         >
           {(rule) => (
             <div class="card card-bordered card-compact mb-2 bg-base-200 p-4">
-              <div class="break-all">{rule.payload}</div>
+              <div class="break-all">
+                {rule.payload}
+                {rule.size !== -1 && ` (${rule.size})`}
+              </div>
               <div class="text-xs text-slate-500">
                 {rule.type} :: {rule.proxy}
               </div>
@@ -75,7 +79,9 @@ export default () => {
             {(rulesProvider) => (
               <div class="card card-bordered card-compact mb-2 bg-base-200 p-4">
                 <div class="flex h-6 items-center justify-between">
-                  <span>{rulesProvider.name}</span>
+                  <span>
+                    {rulesProvider.name} ({rulesProvider.ruleCount})
+                  </span>
                   <div>
                     <button
                       class="btn btn-circle btn-sm mr-2"
@@ -88,8 +94,8 @@ export default () => {
                   </div>
                 </div>
                 <div class="text-xs text-slate-500">
-                  {rulesProvider.vehicleType} :: {rulesProvider.behavior} (
+                  {rulesProvider.vehicleType} / {rulesProvider.behavior} /
-                  {rulesProvider.ruleCount})
+                  Updated {formatTimeFromNow(rulesProvider.updatedAt)}
                 </div>
               </div>
             )}