From 90bb321a07955f738f647e33b35b528fea3a6c9c Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Tue, 19 Aug 2025 19:11:44 +0800
Subject: [PATCH] Fixed #644

---
 .../configurationComponents/peer.vue          | 12 +++++-----
 .../configurationComponents/peerList.vue      |  8 ++++++-
 .../peerSettingsDropdown.vue                  | 22 ++++++++++++++-----
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/static/app/src/components/configurationComponents/peer.vue b/src/static/app/src/components/configurationComponents/peer.vue
index a1daf330..adec06a9 100644
--- a/src/static/app/src/components/configurationComponents/peer.vue
+++ b/src/static/app/src/components/configurationComponents/peer.vue
@@ -15,12 +15,10 @@ export default {
 		PeerTagBadge, LocaleText, PeerSettingsDropdown
 	},
 	props: {
-		Peer: Object, ConfigurationInfo: Object
+		Peer: Object, ConfigurationInfo: Object, order: Number, searchPeersLength: Number
 	},
-	data(){
-		return {
+	mounted() {
 		
-		}
 	},
 	setup(){
 		const target = ref(null);
@@ -37,6 +35,9 @@ export default {
 				return this.Peer.latest_handshake.split(",")[0]
 			}
 			return this.Peer.latest_handshake;
+		},
+		getDropup(){
+			return this.searchPeersLength - this.order <= 3
 		}
 	}
 }
@@ -109,7 +110,7 @@ export default {
 					<PeerTagBadge :BackgroundColor="group.BackgroundColor" :GroupName="group.GroupName" :Icon="'bi-' + group.Icon"
 						v-for="group in Object.values(ConfigurationInfo.Info.PeerGroups).filter(x => x.Peers.includes(Peer.id))"
 					></PeerTagBadge>
-					<div class="ms-auto px-2 rounded-3 subMenuBtn"
+					<div class="ms-auto px-2 rounded-3 subMenuBtn position-relative"
 					     :class="{active: this.subMenuOpened}"
 					>
 						<a role="button" class="text-body"
@@ -118,6 +119,7 @@ export default {
 						</a>
 						<Transition name="slide-fade">
 							<PeerSettingsDropdown
+								:dropup="getDropup"
 								@qrcode="this.$emit('qrcode')"
 								@configurationFile="this.$emit('configurationFile')"
 								@setting="this.$emit('setting')"
diff --git a/src/static/app/src/components/configurationComponents/peerList.vue b/src/static/app/src/components/configurationComponents/peerList.vue
index a39f9ec5..d0f8192c 100644
--- a/src/static/app/src/components/configurationComponents/peerList.vue
+++ b/src/static/app/src/components/configurationComponents/peerList.vue
@@ -205,6 +205,10 @@ const searchPeers = computed(() => {
 	}).slice(0, showPeersCount.value)
 })
 
+const dropup = (index) => {
+	return searchPeers.value.length - (index + 1) <= 3
+}
+
 watch(() => route.query.id, (newValue) => {
 	if (newValue){
 		wireguardConfigurationStore.searchString = newValue
@@ -384,8 +388,10 @@ watch(() => route.query.id, (newValue) => {
 			<div class="col-12"
 			     :class="{'col-lg-6 col-xl-4': dashboardStore.Configuration.Server.dashboard_peer_list_display === 'grid'}"
 			     :key="peer.id"
-			     v-for="peer in searchPeers">
+			     v-for="(peer, order) in searchPeers">
 				<Peer :Peer="peer"
+					  :searchPeersLength="searchPeers.length"
+					  :order="order"
 					  :ConfigurationInfo="configurationInfo"
 				      @share="configurationModals.peerShare.modalOpen = true; configurationModalSelectedPeer = peer"
 				      @refresh="fetchPeerList()"
diff --git a/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue b/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue
index 6cca382b..fc815b7a 100644
--- a/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue
+++ b/src/static/app/src/components/configurationComponents/peerSettingsDropdown.vue
@@ -6,6 +6,7 @@ import PeerSettingsDropdownTool
 	from "@/components/configurationComponents/peerSettingsDropdownComponents/peerSettingsDropdownTool.vue";
 import PeerTagSelectDropdown
 	from "@/components/configurationComponents/peerSettingsDropdownComponents/peerTagSelectDropdown.vue";
+import {onMounted} from "vue";
 
 export default {
 	name: "peerSettingsDropdown",
@@ -15,7 +16,7 @@ export default {
 		return {dashboardStore}
 	},
 	props: {
-		Peer: Object, ConfigurationInfo: Object
+		Peer: Object, ConfigurationInfo: Object, dropup: Boolean
 	},
 	data(){
 		return{
@@ -23,8 +24,12 @@ export default {
 			restrictBtnDisabled: false,
 			allowAccessBtnDisabled: false,
 			confirmDelete: false,
+			height: 0
 		}
 	},
+	mounted() {
+		this.height = document.querySelector("#peerDropdown").clientHeight
+	},
 	methods: {
 		downloadPeer(){
 			fetchGet("/api/downloadPeer/"+this.$route.params.id, {
@@ -84,14 +89,16 @@ export default {
 				this.$emit("refresh")
 				this.allowAccessBtnDisabled = false
 			})
-		}
+		},
+
 	}
 }
 </script>
 
 <template>
-	<ul class="dropdown-menu mt-2 shadow-lg d-block rounded-3" style="max-width: 200px">
-		
+	<ul
+		:class="{'dropup': dropup}"
+		class="dropdown-menu mt-2 shadow-lg d-block rounded-3" id="peerDropdown" style="max-width: 200px">
 		<template v-if="!this.Peer.restricted">
 			<template v-if="!this.confirmDelete">
 				<template v-if="this.Peer.status === 'running'">
@@ -217,6 +224,7 @@ export default {
 		<template v-else>
 			<li>
 				<a class="dropdown-item d-flex text-warning"
+
 				   @click="this.allowAccessPeer()"
 				   :class="{disabled: this.allowAccessBtnDisabled}"
 				   role="button">
@@ -231,10 +239,14 @@ export default {
 
 <style scoped>
 .dropdown-menu{
-	right: 1rem;
+	right: 0;
 	min-width: 200px;
 }
 
+.dropdown-menu.dropup{
+	bottom: 100%;
+}
+
 .dropdown-item.disabled, .dropdown-item:disabled{
 	opacity: 0.7;
 }