fix: style

src/components/common/TextInput.vue

@@ -10,6 +10,9 @@
       type="text"
       class="input input-sm join-item input-bordered w-full"
       :placeholder="placeholder || ''"
+      @touchstart.stop
+      @touchmove.stop
+      @touchend.stop
     />
     <XMarkIcon
       v-if="!beforeClose"

src/components/proxies/ProxyNodeCard.vue

@@ -28,12 +28,13 @@
 
     <div class="flex h-4 w-full items-center justify-between">
       <span
-        :class="`whitespace-nowrap text-xs tracking-tight ${active ? 'text-primary-content' : 'text-base-content/60'}`"
+        :class="`truncate text-xs tracking-tight ${active ? 'text-primary-content' : 'text-base-content/60'}`"
+        @mouseenter="checkTruncation"
       >
         {{ typeDescription }}
       </span>
       <LatencyTag
-        :class="[isSmallCard && '!h-4 !w-8']"
+        :class="[isSmallCard && '!h-4 !w-8', 'shrink-0']"
         :name="node.name"
         :loading="isLatencyTesting"
         :group-name="groupName"
@@ -65,7 +66,9 @@ const checkTruncation = (e: Event) => {
   const { scrollWidth, clientWidth } = target
 
   if (scrollWidth > clientWidth) {
-    showTip(e, target.innerText)
+    showTip(e, target.innerText, {
+      delay: [500, 0],
+    })
   }
 }
 

src/components/sidebar/ConnectionCtrl.tsx

@@ -57,7 +57,7 @@ export default defineComponent({
       const sortForCards = (
         <div class={['flex w-full items-center gap-1 text-sm', props.horizontal && 'md:w-auto']}>
           <span class="shrink-0">{t('sortBy')}</span>
-          <div class="join flex-1">
+          <div class="join flex-1 max-md:w-0">
             <select
               class="join-item select select-bordered select-sm flex-1 max-md:w-0"
               v-model={connectionSortType.value}

src/config/index.ts

@@ -24,7 +24,6 @@ export enum FONTS {
 }
 
 export enum CONNECTIONS_TABLE_ACCESSOR_KEY {
-  Details = 'details',
   Close = 'close',
   Type = 'type',
   Process = 'process',
@@ -40,6 +39,7 @@ export enum CONNECTIONS_TABLE_ACCESSOR_KEY {
   SourcePort = 'sourcePort',
   SniffHost = 'sniffHost',
   Destination = 'destination',
+  Details = 'details',
 }
 
 export enum TABLE_WIDTH_MODE {

src/helper/tooltip.ts

@@ -16,13 +16,13 @@ export const useTooltip = () => {
       animation: 'scale',
       appendTo: appContent,
       allowHTML: true,
+      showOnCreate: true,
       onHidden: () => {
         tippyInstance?.destroy()
         tippyInstance = null
       },
       ...config,
     })
-    tippyInstance.show()
   }
 
   return {

src/store/settings.ts

@@ -57,7 +57,7 @@ export const speedtestUrl = useStorage<string>(
   'http://www.gstatic.com/generate_204',
 )
 export const independentLatencyTest = useStorage('config/independent-latency-test', false)
-export const speedtestTimeout = useStorage<number>('config/speedtest-timeout', 3000)
+export const speedtestTimeout = useStorage<number>('config/speedtest-timeout', 5000)
 export const proxySortType = useStorage<PROXY_SORT_TYPE>(
   'config/proxy-sort-type',
   PROXY_SORT_TYPE.DEFAULT,

src/views/ConnectionsPage.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="size-full overflow-x-hidden">
+  <div
+    class="size-full overflow-x-hidden"
+    :class="{ 'pb-1': useConnectionCard }"
+  >
     <ConnectionCardList
       v-if="useConnectionCard"
       class="overflow-x-hidden p-2"

src/views/LogsPage.vue

@@ -1,17 +1,18 @@
 <template>
-  <div class="size-full overflow-x-hidden">
+  <div class="size-full overflow-x-hidden pb-1">
     <template v-if="!renderLogs.length">
       <div class="card m-2 flex-row p-2 text-sm">
         {{ $t('noContent') }}
       </div>
     </template>
     <VirtualScroller
+      v-else
       :data="renderLogs"
-      :size="64"
+      :size="isMiddleScreen ? 96 : 64"
       class="p-2"
     >
       <template v-slot="{ item }: { item: LogWithSeq }">
-        <div class="card mb-1 block p-2 text-sm">
+        <div class="card mb-1 block break-all p-2 text-sm">
           <span>{{ item.seq }}</span>
           <span class="mx-2 text-primary">
             {{ dayjs(item.time).locale(language).format('HH:mm:ss') }}
@@ -29,6 +30,7 @@
 <script setup lang="ts">
 import VirtualScroller from '@/components/common/VirtualScroller.vue'
 import { LOG_LEVEL } from '@/config'
+import { isMiddleScreen } from '@/helper/utils'
 import { logFilter, logs } from '@/store/logs'
 import { language } from '@/store/settings'
 import type { LogWithSeq } from '@/types'

src/views/SetupPage.vue

@@ -1,15 +1,15 @@
 <template>
   <div
-    class="flex h-full w-full items-center justify-center bg-base-200/40"
+    class="h-full w-full items-center justify-center overflow-auto bg-base-200/40 sm:flex"
     @keydown.enter="handleSubmit(form)"
   >
-    <div class="absolute right-4 top-4">
+    <div class="absolute right-4 top-4 max-sm:hidden">
       <ImportSettings />
     </div>
-    <div class="absolute bottom-4 right-4">
+    <div class="absolute bottom-4 right-4 max-sm:hidden">
       <LanguageSelect />
     </div>
-    <div class="card w-96 max-w-[90%] gap-2 px-6 py-2">
+    <div class="card mx-auto w-96 max-w-[90%] gap-2 px-6 py-2 max-sm:my-4">
       <h1 class="text-2xl font-semibold">{{ $t('setup') }}</h1>
       <div class="form-control">
         <label class="label">
@@ -117,6 +117,10 @@
           </div>
         </template>
       </Draggable>
+      <LanguageSelect class="mt-4 sm:hidden" />
+      <div class="absolute right-2 top-2 sm:hidden">
+        <ImportSettings />
+      </div>
     </div>
   </div>
 </template>