fix: connections details modal

Zephyruso · Feb 17, 2025 · de18946 · de18946
1 parent cfca43c
commit de18946
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 19 deletions.
diff --git a/src/components/common/DialogWrapper.vue b/src/components/common/DialogWrapper.vue
@@ -4,13 +4,18 @@
     class="modal"
     @close="isOpen = false"
   >
-    <div class="modal-box relative overflow-hidden p-0">
+    <div class="modal-box relative max-h-[90vh] overflow-hidden p-0 max-md:max-h-[70vh]">
       <form method="dialog">
         <button class="btn btn-circle btn-ghost btn-xs absolute right-1 top-1 z-10 outline-none">
           <XMarkIcon class="h-4 w-4" />
         </button>
       </form>
-      <div class="max-h-[90vh] overflow-y-auto p-4 scrollbar-thin max-md:max-h-[70vh]">
+      <div
+        :class="[
+          'max-h-[90vh] overflow-y-auto scrollbar-thin max-md:max-h-[70vh]',
+          noPadding ? 'p-0' : 'p-4',
+        ]"
+      >
         <slot></slot>
       </div>
     </div>
@@ -29,6 +34,7 @@ import { ref, watch } from 'vue'
 
 const modalRef = ref<HTMLDialogElement>()
 const isOpen = defineModel<boolean>()
+defineProps<{ noPadding?: boolean }>()
 
 watch(isOpen, (value) => {
   if (value) {

diff --git a/src/components/connections/ConnectionDetails.vue b/src/components/connections/ConnectionDetails.vue
@@ -1,17 +1,25 @@
 <template>
-  <DialogWrapper v-model="connectionDetailModalShow">
-    <VueJsonPretty :data="infoConn" />
-    <div
-      class="mt-2 min-h-10 text-sm"
-      v-if="destinationIP && !isPrivateIP"
-    >
-      <template v-if="details">
-        {{ $t('connectionIP') }} {{ details?.ip }} ( AS{{ details?.asn }} )
-        <div class="flex gap-3">
-          {{ details?.country }}
-          {{ details?.asn_organization }}
-        </div>
-      </template>
+  <DialogWrapper
+    v-model="connectionDetailModalShow"
+    :no-padding="true"
+  >
+    <div class="flex h-full max-h-[69vh] flex-col overflow-hidden py-4 md:max-h-[89vh]">
+      <VueJsonPretty
+        :data="infoConn"
+        class="overflow-y-auto px-4 scrollbar-thin"
+      />
+      <div
+        class="h-12 px-4 pt-2 text-sm"
+        v-if="destinationIP && !isPrivateIP"
+      >
+        <template v-if="details">
+          {{ $t('connectionIP') }} {{ details?.ip }} ( AS{{ details?.asn }} )
+          <div class="flex gap-3">
+            {{ details?.country }}
+            {{ details?.asn_organization }}
+          </div>
+        </template>
+      </div>
     </div>
   </DialogWrapper>
 </template>

diff --git a/src/components/proxies/LatencyTag.vue b/src/components/proxies/LatencyTag.vue
@@ -2,7 +2,7 @@
   <div
     :class="
       twMerge(
-        'latency-tag flex h-5 w-10 items-center justify-center rounded-xl bg-base-100 text-xs md:hover:bg-base-200',
+        'latency-tag flex h-5 w-10 select-none items-center justify-center rounded-xl bg-base-100 text-xs md:hover:bg-base-200',
         color,
       )
     "
@@ -61,6 +61,8 @@ const handlerHistoryTip = (e: Event) => {
 
   showTip(e, historyList, {
     delay: [1000, 0],
+    trigger: 'mouseenter',
+    touch: ['hold', 500],
   })
 }
 

diff --git a/src/components/proxies/ProxyNodeCard.vue b/src/components/proxies/ProxyNodeCard.vue
@@ -26,7 +26,7 @@
       </span>
     </div>
 
-    <div class="flex h-4 w-full items-center justify-between">
+    <div class="flex h-4 w-full select-none items-center justify-between">
       <span
         :class="`truncate text-xs tracking-tight ${active ? 'text-primary-content' : 'text-base-content/60'}`"
         @mouseenter="checkTruncation"
@@ -67,7 +67,9 @@ const checkTruncation = (e: Event) => {
 
   if (scrollWidth > clientWidth) {
     showTip(e, target.innerText, {
-      delay: [500, 0],
+      delay: [1000, 0],
+      trigger: 'mouseenter',
+      touch: ['hold', 500],
     })
   }
 }

diff --git a/src/components/rules/RuleCard.vue b/src/components/rules/RuleCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="twMerge('card gap-2 p-2 text-sm', !rule.payload && 'gap-0')">
     <div>
-      <span class="mr-2 inline-block min-w-4 text-center">{{ index }}.</span>
+      <span class="mr-2">{{ index }}.</span>
       <span class="mr-2 text-primary">{{ rule.type }}</span>
       <span
         class="mr-2"