Improve prefix hierarchy/depth styling

netbox/ipam/tables.py

@@ -15,9 +15,13 @@ AVAILABLE_LABEL = mark_safe('<span class="badge bg-success">Available</span>')
 
 PREFIX_LINK = """
 {% load helpers %}
-{% for i in record.depth|as_range %}
-    <i class="mdi mdi-circle-small"></i>
-{% endfor %}
+{% if record.depth %}
+    <div class="record-depth">
+        {% for i in record.depth|as_range %}
+            <span>•</span>
+        {% endfor %}
+    </div>
+{% endif %}
 <a href="{% if record.pk %}{% url 'ipam:prefix' pk=record.pk %}{% else %}{% url 'ipam:prefix_add' %}?prefix={{ record }}{% if object.vrf %}&vrf={{ object.vrf.pk }}{% endif %}{% if object.site %}&site={{ object.site.pk }}{% endif %}{% if object.tenant %}&tenant_group={{ object.tenant.group.pk }}&tenant={{ object.tenant.pk }}{% endif %}{% endif %}">{{ record.prefix }}</a>
 """
 

netbox/project-static/styles/netbox.scss

@@ -422,7 +422,7 @@ main.login-container {
   padding: 0;
 
   .nav-link {
-    padding: .5rem;
+    padding: 0.5rem;
   }
 
   @include media-breakpoint-down(md) {
@@ -866,6 +866,20 @@ div.card > div.card-header > div.table-controls {
   border-bottom: 1px solid $nav-tabs-border-color;
 }
 
+// Object hierarchy indicators.
+.record-depth {
+  display: inline;
+  font-size: $font-size-base;
+  user-select: none;
+  opacity: 0.33;
+
+  // Add spacing to the last or only dot.
+  span:only-of-type,
+  span:last-of-type {
+    margin-right: map.get($spacers, 1);
+  }
+}
+
 #django-messages {
   position: fixed;
   right: $spacer;