yellow dot - mobile friendly

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;

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">
+    <div class="dot-container m-1" data-bs-toggle="tooltip" data-bs-placement="right">
-        <i class="dot-icon bg-warning"></i>
+        <i class="dot-icon bg-warning "></i>
     </div>
 </script>
 <script src="{% static 'js/api.js' %}"></script>