From f032f036944332db5844d7660b89cb34b6344333 Mon Sep 17 00:00:00 2001
From: Eduardo Silva <eduardo@eth0.com.br>
Date: Fri, 21 Feb 2025 22:18:26 -0300
Subject: [PATCH] Reorganized the layout of the peer traffic section.

---
 .../wireguard/wireguard_manage_peer.html      | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/templates/wireguard/wireguard_manage_peer.html b/templates/wireguard/wireguard_manage_peer.html
index 7660b57..fcb716d 100644
--- a/templates/wireguard/wireguard_manage_peer.html
+++ b/templates/wireguard/wireguard_manage_peer.html
@@ -47,36 +47,34 @@
 
             </div>
             <div class="col-lg-6">
-                <div class="row">
-                    <div class="col-lg-12">
+
+            <div class="row mt-3">
+                <div class="col-lg-12">
+                    <div class="d-flex justify-content-between align-items-center ">
                             <label>
                                 <i class="fas fa-chart-area"></i>
-                                Peer Traffic History
+                                Peer Traffic
                             </label>
+                            <div class="btn-group" role="group" aria-label="Graph interval">
+                                <a href="#" data-period="1h" class="btn btn-outline-primary btn-xs">1h</a>
+                                <a href="#" data-period="3h" class="btn btn-outline-primary btn-xs">3h</a>
+                                <a href="#" data-period="6h" class="btn btn-outline-primary btn-xs">6h</a>
+                                <a href="#" data-period="7d" class="btn btn-outline-primary btn-xs">7d</a>
+                                <a href="#" data-period="30d" class="btn btn-outline-primary btn-xs">1m</a>
+                                <a href="#" data-period="90d" class="btn btn-outline-primary btn-xs">3m</a>
+                                <a href="#" data-period="180d" class="btn btn-outline-primary btn-xs">6m</a>
+                                <a href="#" data-period="365d" class="btn btn-outline-primary btn-xs">1y</a>
+                            </div>
                     </div>
-                </div>
 
-            <div class="row">
-                <div class="col-lg-12">
                     <center>
                         <img id="graphImg" src="/rrd/graph/?peer={{ current_peer.uuid }}{% if request.GET.period %}&period={{ request.GET.period }}{% endif %}" class="img-fluid" alt="No traffic history, please wait a few minutes">
                     </center>
+
+                    <div class="d-flex justify-content-between align-items-center border-bottom mb-3" style="padding-top: 16px;"></div>
                 </div>
             </div>
-            <div class="row mt-3">
-                <div class="col-lg-12 text-center">
-                    <div class="btn-group" role="group" aria-label="Graph interval">
-                        <a href="#" data-period="1h" class="btn btn-outline-primary btn-xs">1h</a>
-                        <a href="#" data-period="3h" class="btn btn-outline-primary btn-xs">3h</a>
-                        <a href="#" data-period="6h" class="btn btn-outline-primary btn-xs">6h</a>
-                        <a href="#" data-period="7d" class="btn btn-outline-primary btn-xs">7d</a>
-                        <a href="#" data-period="30d" class="btn btn-outline-primary btn-xs">30d</a>
-                        <a href="#" data-period="90d" class="btn btn-outline-primary btn-xs">3m</a>
-                        <a href="#" data-period="180d" class="btn btn-outline-primary btn-xs">6m</a>
-                        <a href="#" data-period="365d" class="btn btn-outline-primary btn-xs">1y</a>
-                    </div>
-                </div>
-            </div>
+
 
                 <div class="row">
                     <div class="col-md-12">