Refactor case display buttons for improved usability and styling

atlas/templates/atlas/case_display_block.html

@@ -108,17 +108,28 @@
 
 
         {% else %}
-            <a href="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">View case in OHIF</a> <a target="_blank" href="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">(new tab)</a>
+            <div class="btn-group" role="group">
+                <button type="button" class="btn btn-primary" onclick="window.location.href='/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}'">View case in OHIF</button>
+                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                    <span class="visually-hidden">Toggle dropdown</span>
+                </button>
+                <ul class="dropdown-menu">
+                    <li>
+                        <a class="dropdown-item" target="_blank" href="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Open in new tab</a>
+                    </li>
+                </ul>
+            </div>
         {% endif %}
 
-
-        <div class="date">
-            {{ case.created_date|date:"d/m/Y" }}
-        </div>
-        <div class="id">
+    <div>
+        <span class="id">
             ID: {{ case.id }}
-        </div>
-
+        </span>
+        /
+        <span class="date">
+            {{ case.created_date|date:"d/m/Y" }}
+        </span>
+    </div>
                 Subspecialty:
         <ul>
             {% for sub in case.subspecialty.all %}