From bc04ec099623b2f088b53a39d037dc881d3a639a Mon Sep 17 00:00:00 2001
From: Corban-Lee <corbz.jones@gmail.com>
Date: Wed, 18 Sep 2024 11:44:39 +0100
Subject: [PATCH] mobile friendly top bar for viewing servers

---
 apps/templates/home/index.html | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/apps/templates/home/index.html b/apps/templates/home/index.html
index 1bbf1b0..5adf343 100644
--- a/apps/templates/home/index.html
+++ b/apps/templates/home/index.html
@@ -42,25 +42,27 @@
                 </div>
             </div>
             <div id="selectedServerContainer" class="row" style="display: none;">
-                <div class="col-12 bg-body-tertiary border-bottom">
-                    <div class="px-3 py-4 d-flex justify-content-start align-items-center flex-wrap">
-                        <div class="d-flex align-items-center">
-                            <img alt="Selected Server Icon" class="rounded-3 selected-server-icon">
-                            <div class="ms-3" style="min-width: 0">
+                <div class="col-12 bg-body-tertiary border-bottom p-3 py-sm-4">
+                    <div class="row">
+                        <div class="col-sm-7 col-md-6 d-flex align-items-center">
+                            <img alt="Server Icon" class="rounded-3 selected-server-icon d-none d-sm-block">
+                            <div class="ms-sm-3" style="min-width: 0">
                                 <h3 class="mb-0 resolve-to-server-name text-truncate"></h3>
-                                <h5 class="mb-0 resolve-to-server-id text-truncate text-body-secondary"></h5>
+                                <h5 class="mb-0 resolve-to-server-id text-truncate text-body-secondary text-monospace"></h5>
                             </div>
                         </div>
-                        <div class="ms-auto">
-                            <button type="button" id="serverSettingsBtn" class="btn btn-outline-secondary rounded-1 ms-3" data-bs-toggle="tooltip" data-bs-title="Server settings">
-                                <i class="bi bi-gear"></i>
-                            </button>
-                            <button type="button" id="deleteSelectedServerBtn" class="btn btn-outline-danger rounded-1 ms-3" data-bs-toggle="tooltip" data-bs-title="Close server">
-                                <i class="bi bi-x-lg"></i>
-                            </button>
-                            <button type="button" id="backToSelectServer" class="btn btn-outline-secondary rounded-1 ms-3" data-bs-toggle="tooltip" data-bs-title="Go back">
-                                <i class="bi bi-box-arrow-right"></i>
-                            </button>
+                        <div class="col-sm-5 col-md-6 d-flex justify-content-sm-end align-items-center">
+                            <div class="mt-3 mt-sm-0">
+                                <button type="button" id="serverSettingsBtn" class="btn btn-outline-secondary rounded-1 me-3">
+                                    <i class="bi bi-gear"></i>
+                                </button>
+                                <button type="button" id="deleteSelectedServerBtn" class="btn btn-outline-danger rounded-1">
+                                    <i class="bi bi-x-lg"></i>
+                                </button>
+                                <button type="button" id="backToSelectServer" class="btn btn-outline-secondary rounded-1 ms-3">
+                                    <i class="bi bi-box-arrow-right"></i>
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>