From 049beb778f0b48d84b476900cda15886804c81c6 Mon Sep 17 00:00:00 2001
From: Corban-Lee <corbz.jones@gmail.com>
Date: Wed, 18 Sep 2024 14:13:00 +0100
Subject: [PATCH] yellow dot - mobile friendly

---
 apps/static/css/home/index.css | 17 +++++++++++++++++
 apps/templates/home/index.html |  4 ++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/static/css/home/index.css b/apps/static/css/home/index.css
index ebd18cf..186bb3e 100644
--- a/apps/static/css/home/index.css
+++ b/apps/static/css/home/index.css
@@ -138,6 +138,23 @@ td > .btn-link {
   color: var(--bs-text-body);
 }
 
+/* Yellow Dot Indicator for the server sidebar */
+.dot-container {
+  width: .75rem;
+  height: .75rem;
+
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+@media (max-width: 992px) {
+  .dot-container {
+    transform: translate(25%, -25%);
+  }
+}
+
 .dot-icon {
   height: .75rem;
   width: .75rem;
diff --git a/apps/templates/home/index.html b/apps/templates/home/index.html
index 5adf343..44b8a0f 100644
--- a/apps/templates/home/index.html
+++ b/apps/templates/home/index.html
@@ -134,8 +134,8 @@
     </li>
 </script>
 <script id="serverItemIconTemplate" type="text/template">
-    <div class="position-absolute top-0 end-0 badge rounded-1 fs-5 p-1" data-bs-toggle="tooltip" data-bs-placement="right">
-        <i class="dot-icon bg-warning"></i>
+    <div class="dot-container m-1" data-bs-toggle="tooltip" data-bs-placement="right">
+        <i class="dot-icon bg-warning "></i>
     </div>
 </script>
 <script src="{% static 'js/api.js' %}"></script>