fix: connections details modal

Zephyruso · Feb 16, 2025 · 63cdfa6 · 63cdfa6
1 parent cfca43c
commit 63cdfa6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/src/components/common/DialogWrapper.vue b/src/components/common/DialogWrapper.vue
@@ -10,7 +10,12 @@
           <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="[
+          'overflow-y-autoscrollbar-thin max-h-[90vh] 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-[60vh] flex-col overflow-hidden py-4 md:max-h-[80vh]">
+      <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>