Adjusted styles

src/static/app/src/components/configurationComponents/peerDetailsModal.vue

@@ -30,7 +30,6 @@ Chart.register(
 	PointElement,
 	Filler
 );
-import {Line} from "vue-chartjs";
 import PeerSessions from "@/components/peerDetailsModalComponents/peerSessions.vue";
 import PeerTraffics from "@/components/peerDetailsModalComponents/peerTraffics.vue";
 const props = defineProps(['selectedPeer'])
@@ -39,10 +38,10 @@ defineEmits(['close'])
 </script>
 
 <template>
-	<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll">
-		<div class=" d-flex h-100 w-100">
-			<div class="w-100 p-2">
-				<div class="card rounded-3 shadow" style="width: 100%">
+	<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll ">
+		<div class="d-flex h-100 w-100 pb-2">
+			<div class="m-auto w-100 p-2">
+				<div class="card rounded-3 shadow h-100" >
 					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
 						<h4 class="mb-0 fw-normal">
 							<LocaleText t="Peer Details"></LocaleText>
@@ -102,7 +101,7 @@ defineEmits(['close'])
 												<LocaleText t="Latest Handshake Time"></LocaleText>
 											</small></p>
 											<strong class="h4">
-												<LocaleText :t="selectedPeer.latest_handshake + ' ago'"></LocaleText>
+												<LocaleText :t="selectedPeer.latest_handshake !== 'No Handshake' ? selectedPeer.latest_handshake + ' ago': 'No Handshake'"></LocaleText>
 											</strong>
 										</div>
 										<i class="bi bi-person-raised-hand ms-auto h2 text-muted"></i>
@@ -150,19 +149,18 @@ defineEmits(['close'])
 									</div>
 								</div>
 							</div>
-
-
+							<div class="col-12">
+								<PeerTraffics
+									:selectedDate="selectedDate"
+									:selectedPeer="selectedPeer"></PeerTraffics>
+							</div>
 							<div class="col-12">
 								<PeerSessions
 									:selectedDate="selectedDate"
 									@selectDate="args => selectedDate = args"
 									:selectedPeer="selectedPeer"></PeerSessions>
 							</div>
-							<div class="col-12">
-								<PeerTraffics
-									:selectedDate="selectedDate"
-									:selectedPeer="selectedPeer"></PeerTraffics>
-							</div>
+
 						</div>
 
 

src/static/app/src/components/peerDetailsModalComponents/peerSessionCalendarDay.vue

@@ -42,7 +42,7 @@ defineEmits(['openDetails'])
 </script>
 
 <template>
-<div class="d-flex gap-1 flex-column" @click="$emit('openDetails', sessionsOfToday)">
+<div class="d-flex gap-1 flex-column session-list" @click="$emit('openDetails', sessionsOfToday)">
 	<small v-if="sessionsOfToday.length > 0" class="sessions-label">
 		<LocaleText :t="sessionsOfToday.length + ' Session' + (sessionsOfToday.length > 1 ? 's':'')"></LocaleText>
 	</small>
@@ -50,7 +50,7 @@ defineEmits(['openDetails'])
 		<div class="bg-warning"
 			 style="height: 5px; width: 5px; border-radius: 100%; vertical-align: top" v-for="_ in sessionsOfToday.length"></div>
 	</div>
-	<div class="p-1 badge text-bg-warning text-start session-list" v-for="s in sessionsOfToday">
+	<div class="p-1 badge text-bg-warning text-start session-badge-list" v-for="s in sessionsOfToday">
 		<div>
 			<i class="bi bi-stopwatch me-1"></i>{{ s.timestamps[0].format("HH:mm:ss") }}<i class="bi bi-arrow-right mx-1"></i>{{ s.timestamps[s.timestamps.length - 1].format("HH:mm:ss") }}
 		</div>
@@ -63,7 +63,7 @@ defineEmits(['openDetails'])
 
 <style scoped>
 @media screen and (max-width: 992px) {
-	.calendar-day .session-list{
+	.calendar-day .session-badge-list{
 		display: none;
 	}
 
@@ -71,10 +71,21 @@ defineEmits(['openDetails'])
 		display: none;
 	}
 }
-
+.session-list{
+	aspect-ratio: 1 / 1;
+}
 @media screen and (min-width: 992px) {
 	.session-dot{
 		display: none !important;
 	}
+
+	.session-list{
+		height: calc(100vh / 8);
+		overflow: scroll;
+		aspect-ratio: auto !important;
+	}
 }
+
+
+
 </style>

src/static/app/src/components/peerDetailsModalComponents/peerSessions.vue

@@ -29,6 +29,14 @@ const calendarDays = computed(() => {
 		dates.push(cur)
 		cur = cur.add(1, 'day')
 	}
+	if (dates.length < 42){
+		let q = 42 - dates.length
+		for (let i = 0; i < q; i++){
+			console.log('push')
+			dates.push(cur)
+			cur = cur.add(1, 'day')
+		}
+	}
 	return dates
 })
 
@@ -43,7 +51,7 @@ const getSessions = async () => {
 	})
 }
 
-await getSessions()
+getSessions()
 interval.value = setInterval(async () => {
 	await getSessions()
 }, 60000)
@@ -92,10 +100,10 @@ const emits = defineEmits(['selectDate'])
 						'border-bottom': index < calendarDays.length - 7,
 						'extra-day': !day.isSame(today, 'month')}"
 						 v-for="(day, index) in calendarDays">
-						<h5 class="d-flex">
+						<h6 class="d-flex day-label">
 							{{ day.format('D')}}
 							<i class="bi bi-check-circle-fill ms-auto" v-if="selectedDate && selectedDate.isSame(day, 'D')"></i>
-						</h5>
+						</h6>
 						<PeerSessionCalendarDay
 							class="flex-grow-1"
 							@openDetails="args => {dayDetailsData = {day: day, details: args}; dayDetails = true}"
@@ -163,7 +171,7 @@ const emits = defineEmits(['selectDate'])
 	}
 }
 
-.extra-day h5{
+.extra-day .day-label{
 	opacity: 0.5;
 }
 </style>

src/static/app/src/components/peerDetailsModalComponents/peerTraffics.vue

@@ -24,7 +24,7 @@ const getTraffic = async () => {
 	})
 }
 const interval = ref(undefined)
-await getTraffic()
+getTraffic()
 interval.value = setInterval(async () => {
 	await getTraffic()
 }, 60000)