Some UI adjustment

src/static/app/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "build electron": "vite build --mode electron && cd ../../../../WGDashboard-Desktop && electron-builder",
+    "build electron": "vite build && vite build --mode electron && cd ../../../../WGDashboard-Desktop && electron-builder",
     "preview": "vite preview"
   },
   "dependencies": {

src/static/app/src/App.vue

@@ -25,7 +25,7 @@ const getActiveCrossServer = computed(() => {
 </script>
 
 <template>
-	<nav class="navbar bg-dark sticky-top border-bottom border-secondary-subtle" data-bs-theme="dark">
+	<nav class="navbar bg-dark sticky-top" data-bs-theme="dark">
 		<div class="container-fluid d-flex text-body align-items-center">
 			<span class="navbar-brand mb-0 h1">WGDashboard</span>
 			<small class="ms-auto text-muted" v-if="getActiveCrossServer !== undefined">

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

@@ -83,7 +83,7 @@ export default {
 
 <template>
 	<div class="mb-3">
-		<div class="d-flex gap-2 z-3">
+		<div class="d-flex gap-2 z-3 peerSearchContainer">
 			<RouterLink
 				to="create"
 				class="text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm">
@@ -100,6 +100,10 @@ export default {
 				       @keyup="this.debounce()"
 				       v-model="this.searchString">
 			</div>
+			<div class="">
+				
+			</div>
+			
 			<div class="dropdown dropup">
 				<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm" 
 				        type="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -174,6 +178,11 @@ export default {
 		filter: blur(0px);
 		transform: translateY(-40px);
 	}
-	
+}
+
+@media screen and (max-width: 768px) {
+	.peerSearchContainer{
+		flex-direction: column;
+	}
 }
 </style>

src/static/app/src/components/configurationListComponents/configurationCard.vue

@@ -52,23 +52,23 @@ export default {
 			</h6>
 		</RouterLink>
 		<div class="card-footer d-flex gap-2 flex-column">
-			<div class="d-flex gap-4">
+			<div class="row">
-				<small >
+				<small class="col-6 col-md-3">
 					<i class="bi bi-arrow-down-up me-2"></i>{{c.DataUsage.Total > 0 ? c.DataUsage.Total.toFixed(4) : 0}} GB
 				</small>
-				<small class="text-primary-emphasis">
+				<small class="text-primary-emphasis col-6 col-md-3">
 					<i class="bi bi-arrow-down me-2"></i>{{c.DataUsage.Receive > 0 ? c.DataUsage.Receive.toFixed(4) : 0}} GB
 				</small>
-				<small class="text-success-emphasis">
+				<small class="text-success-emphasis col-6 col-md-3">
 					<i class="bi bi-arrow-up me-2"></i>{{c.DataUsage.Sent > 0 ? c.DataUsage.Sent.toFixed(4) : 0}} GB
 				</small>
-				<small class="ms-auto">
+				<small class="text-md-end col-6 col-md-3">
 					<span class="dot me-2" :class="{active: c.ConnectedPeers > 0}"></span>{{c.ConnectedPeers}} Peers
 				</small>
 			</div>
-			<div class="d-flex align-items-center">
+			<div class="d-flex align-items-center gap-2">
-				<small class="me-2 text-muted">
+				<small class="text-muted">
-					<strong>Public Key</strong>
+					<strong style="word-break: keep-all">Public Key</strong>
 				</small>
 				<small class="mb-0 d-block d-lg-inline-block ">
 					<samp style="line-break: anywhere">{{c.PublicKey}}</samp>

src/static/app/src/utilities/fetch.js

@@ -21,10 +21,9 @@ const getUrl = (url) => {
 	}
 	
 	console.log("URL fetching: ", import.meta.env.MODE === 'development' ? url
-		: `${window.location.protocol}//${window.location.host}${window.location.pathname}${url}`)
+		: `${window.location.protocol}//${(window.location.host + window.location.pathname + url).replace(/\/\//g, '/')}`)
-	
 	return import.meta.env.MODE === 'development' ? url 
-		: `${window.location.protocol}//${window.location.host}${window.location.pathname}${url}`
+		: `${window.location.protocol}//${(window.location.host + window.location.pathname + url).replace(/\/\//g, '/')}`
 }
 
 export const fetchGet = async (url, params=undefined, callback=undefined) => {

src/static/app/src/views/index.vue

@@ -24,7 +24,7 @@ export default {
 	<div class="container-fluid flex-grow-1 main" :data-bs-theme="this.dashboardConfigurationStore.Configuration.Server.dashboard_theme">
 		<div class="row h-100">
 			<Navbar></Navbar>
-			<main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 overflow-y-scroll mb-0"  style="height: calc(100vh - 50px)">
+			<main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 overflow-y-scroll mb-0" style="height: calc(100vh - 50px)">
 				<Suspense>
 					<RouterView v-slot="{Component}">
 						<Transition name="fade2" mode="out-in">