diff --git a/atlas/templates/atlas/case_display_block.html b/atlas/templates/atlas/case_display_block.html
index 95d71b62..40c1c068 100755
--- a/atlas/templates/atlas/case_display_block.html
+++ b/atlas/templates/atlas/case_display_block.html
@@ -78,20 +78,53 @@
         opacity: 0.9;
     }
 
-    /* Generic hover-only quick-edit behaviour for host-wrapped buttons */
+    /* Generic hover-only quick-edit behaviour for host-wrapped buttons.
+       Buttons are positioned absolutely so revealing them does not shift layout. */
     .quick-edit-wrap { position: relative; display: inline-flex; align-items: center; }
     .quick-edit-wrap .quick-edit-button {
+        position: absolute;
+        right: 0.25rem;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 5;
         opacity: 0;
         pointer-events: none;
-        transition: opacity 0.15s ease;
+        transition: opacity 0.15s ease, transform 0.15s ease;
+        background: rgba(255,255,255,0.95) !important;
+        border-radius: .25rem;
+        padding: 0 .25rem;
+        color: #0d6efd !important; /* clearer action colour */
     }
     .quick-edit-wrap:hover .quick-edit-button,
     .quick-edit-wrap:focus-within .quick-edit-button {
-        opacity: 0.65;
+        opacity: 0.95;
         pointer-events: auto;
+        transform: translateY(-50%);
     }
     .quick-edit-wrap .quick-edit-button:hover { opacity: 1; }
 
+    /* Metadata-specific quick-edit: ensure edit button overlays without moving badges */
+    .case-meta-item { position: relative; }
+    .case-meta-item .quick-edit-button {
+        position: absolute;
+        right: 0.25rem;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 6;
+        opacity: 0;
+        pointer-events: none;
+        background: rgba(255,255,255,0.95) !important;
+        padding: 0 .25rem;
+        border-radius: .25rem;
+        color: #0d6efd !important;
+        border: 1px solid rgba(13,110,253,0.08);
+    }
+    .case-meta-item:hover .quick-edit-button,
+    .case-meta-item:focus-within .quick-edit-button {
+        opacity: 0.95;
+        pointer-events: auto;
+    }
+
     /* Normal group visual style */
     .normal-group { border: 1px solid rgba(13,110,253,0.15); background: #f8fbff; padding: .75rem; border-radius: .375rem; margin-bottom: .75rem; }
     .normal-group .normal-heading { font-weight: 600; color: #0d6efd; margin-bottom: .5rem; }
@@ -104,9 +137,17 @@
     .section-icon.history { background:#198754; }
     .section-icon.discussion { background:#fd7e14; }
     .section-icon.report { background:#dc3545; }
-    .case-metadata { border-left: 1px solid #eee; padding-left: 1rem; }
-    .case-meta-item { margin-bottom: .5rem; }
-    .case-meta-label { font-weight:600; font-size:0.9rem; display:block; }
+            .case-metadata { border-left: 1px solid #eee; padding-left: 1rem; text-align:left; }
+            .case-meta-item { margin-bottom: .5rem; }
+            .case-meta-label { font-weight:600; font-size:0.9rem; display:block; }
+            @media (min-width: 768px) {
+                /* Keep metadata stacked (one per row), but put label and value on same row */
+                .case-metadata { text-align: right; }
+                .case-meta-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
+                .case-meta-value { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
+                .case-meta-item .badge { display: inline-block; margin-left: .25rem; margin-right: 0; }
+                .case-meta-item > .case-meta-value > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+            }
 </style>
 
 <div class="atlas {% if case.scrapped %}atlas-scrapped{% endif %}">
@@ -346,48 +387,52 @@
 
                     <div class="case-meta-item">
                         <span class="case-meta-label">Subspecialty</span>
-                        <div id="case-inline-subspecialty">
-                            {% if case.subspecialty.all %}
-                                {% for sub in case.subspecialty.all %}
-                                    <span class="badge bg-secondary ms-1">{{ sub.get_link|safe }}</span>
-                                {% endfor %}
-                            {% else %}
-                                <span class="badge bg-secondary ms-1 text-muted">None</span>
+                        <div class="case-meta-value d-flex align-items-center justify-content-end">
+                            <div id="case-inline-subspecialty">
+                                {% if case.subspecialty.all %}
+                                    {% for sub in case.subspecialty.all %}
+                                        <span class="badge bg-secondary ms-1">{{ sub.get_link|safe }}</span>
+                                    {% endfor %}
+                                {% else %}
+                                    <span class="badge bg-secondary ms-1 text-muted">None</span>
+                                {% endif %}
+                            </div>
+                            {% if can_edit %}
+                                <button class="btn btn-sm btn-link text-muted p-0 quick-edit-button ms-2"
+                                        hx-get="{% url 'atlas:case_inline_field' case.pk 'subspecialty' %}?edit=1&show_label=0"
+                                        hx-target="#case-inline-subspecialty"
+                                        hx-swap="outerHTML">quick edit</button>
                             {% endif %}
                         </div>
-                        {% if can_edit %}
-                            <div class="mt-1"><button class="btn btn-sm btn-link text-muted p-0 quick-edit-button"
-                                                      hx-get="{% url 'atlas:case_inline_field' case.pk 'subspecialty' %}?edit=1&show_label=0"
-                                                      hx-target="#case-inline-subspecialty"
-                                                      hx-swap="outerHTML">quick edit</button></div>
-                        {% endif %}
                     </div>
 
                     <div class="case-meta-item">
                         <span class="case-meta-label">Pathological process</span>
-                        <div>
-                            {% if case.pathological_process.all %}
-                                {% for p in case.pathological_process.all %}
-                                    <span class="badge bg-secondary ms-1">{{ p.get_link|safe }}</span>
-                                {% endfor %}
-                            {% else %}
-                                <span class="badge bg-secondary ms-1 text-muted">None</span>
-                            {% endif %}
+                        <div class="case-meta-value d-flex align-items-center justify-content-end">
+                            <div>
+                                {% if case.pathological_process.all %}
+                                    {% for p in case.pathological_process.all %}
+                                        <span class="badge bg-secondary ms-1">{{ p.get_link|safe }}</span>
+                                    {% endfor %}
+                                {% else %}
+                                    <span class="badge bg-secondary ms-1 text-muted">None</span>
+                                {% endif %}
+                            </div>
                         </div>
                     </div>
 
                     <div class="case-meta-item">
                         <span class="case-meta-label">Diagnostic certainty</span>
-                        <div class="d-flex align-items-center">
+                        <div class="case-meta-value d-flex align-items-center justify-content-end">
                             {% url 'atlas:case_inline_field' case.pk 'diagnostic_certainty' as diag_url %}
                             {% with endpoint_default=diag_url|add:"?show_label=0" endpoint_edit=diag_url|add:"?edit=1&show_label=0" %}
                                 {% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label="Diagnostic certainty" can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-diagnostic_certainty' field_kind='select' value=case.get_diagnostic_certainty_display display_value=case.get_diagnostic_certainty_display field_name='diagnostic_certainty' error_message='' %}
                             {% endwith %}
                             {% if can_edit %}
-                                <div class="ms-2"><button class="btn btn-sm btn-link text-muted p-0 quick-edit-button"
-                                                          hx-get="{% url 'atlas:case_inline_field' case.pk 'diagnostic_certainty' %}?edit=1&show_label=0"
-                                                          hx-target="#case-inline-diagnostic_certainty"
-                                                          hx-swap="outerHTML">quick edit</button></div>
+                                <button class="btn btn-sm btn-link text-muted p-0 quick-edit-button ms-2"
+                                        hx-get="{% url 'atlas:case_inline_field' case.pk 'diagnostic_certainty' %}?edit=1&show_label=0"
+                                        hx-target="#case-inline-diagnostic_certainty"
+                                        hx-swap="outerHTML">quick edit</button>
                             {% endif %}
                         </div>
                     </div>