From fe91c74f0c0aab51eaa2bc6ffc631fa7ff10890c Mon Sep 17 00:00:00 2001
From: ktx-abhay <abhay.padamani@kiara.tech>
Date: Wed, 4 Nov 2026 12:12:54 +0530
Subject: [PATCH] fix(oncall): centre row actions under the Actions header

---
 web/src/components/oncall/OnCallMyDeliveries.vue |  4 ++--
 web/src/views/OnCall/OnCallMine.spec.ts          |  7 +++++++
 web/src/views/OnCall/OnCallMine.vue              |  4 ++--
 web/src/views/OnCall/OnCallResponses.spec.ts     | 12 ++++++++++++
 web/src/views/OnCall/OnCallResponses.vue         | 16 ++++++++++++----
 5 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/web/src/components/oncall/OnCallMyDeliveries.vue b/web/src/components/oncall/OnCallMyDeliveries.vue
index c363be0bc6..4fdcb349f3 100644
--- a/web/src/components/oncall/OnCallMyDeliveries.vue
+++ b/web/src/components/oncall/OnCallMyDeliveries.vue
@@ -75,7 +75,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </template>
           <template #cell-actions="{ row }">
-            <div class="flex items-center justify-end">
+            <div class="flex items-center justify-center">
               <OButton
                 v-if="isEscalating(row.response_state)"
                 variant="ghost-warning"
@@ -220,7 +220,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </span>
           </template>
           <template #cell-row-actions="{ row }">
-            <div class="flex items-center justify-end">
+            <div class="flex items-center justify-center">
               <!-- An open tooltip is the top dismissable layer, so it would take the menu's Escape. -->
               <ODropdown
                 side="bottom"
diff --git a/web/src/views/OnCall/OnCallMine.spec.ts b/web/src/views/OnCall/OnCallMine.spec.ts
index 544562d5fd..0099da54d6 100644
--- a/web/src/views/OnCall/OnCallMine.spec.ts
+++ b/web/src/views/OnCall/OnCallMine.spec.ts
@@ -328,6 +328,13 @@ describe("OnCallMine", () => {
     expect(data.end_at).toBeGreaterThan(data.start_at);
   });
 
+  it("centres the shift row's actions under the Actions header", async () => {
+    const wrapper = render();
+    await flushPromises();
+    const button = wrapper.find('[data-test="oncall-mine-test-page-team_1"]').element;
+    expect(button.parentElement!.classList).toContain("justify-center");
+  });
+
   it("sends the team test page after a confirm", async () => {
     service.testPage.mockResolvedValue({
       data: {
diff --git a/web/src/views/OnCall/OnCallMine.vue b/web/src/views/OnCall/OnCallMine.vue
index 33ddb5e7e7..c54b6d532a 100644
--- a/web/src/views/OnCall/OnCallMine.vue
+++ b/web/src/views/OnCall/OnCallMine.vue
@@ -278,7 +278,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 <OText v-else variant="meta" as="span">{{ raw("—") }}</OText>
               </template>
               <template #cell-row-actions="{ row }">
-                <div class="flex items-center justify-end">
+                <div class="flex items-center justify-center">
                   <OButton
                     v-if="canCover(row)"
                     variant="ghost"
@@ -662,7 +662,7 @@ const shiftColumns = computed<OTableColumnDef<ShiftRow>[]>(() => [
     header: t("oncall.actions"),
     sortable: false,
     size: 96,
-    meta: { align: "right" },
+    meta: { align: "center" },
   },
 ]);
 
diff --git a/web/src/views/OnCall/OnCallResponses.spec.ts b/web/src/views/OnCall/OnCallResponses.spec.ts
index b23fc8ae5b..672306b546 100644
--- a/web/src/views/OnCall/OnCallResponses.spec.ts
+++ b/web/src/views/OnCall/OnCallResponses.spec.ts
@@ -833,6 +833,18 @@ describe("OnCallResponses", () => {
       expect(cell.querySelectorAll('[aria-hidden="true"]').length).toBeGreaterThan(0);
     });
 
+    /// A ⋯-only row reserves no empty slots, so its menu centres under the Actions header.
+    it("centres a resolved row's lone ⋯ with no empty slots beside it", async () => {
+      const resolved = await withPages([
+        page({ state: "resolved", closed_at: Date.now() * 1000, acked_by: "ana@o2.ai" }),
+      ]);
+      const cell = resolved
+        .find('[data-test="oncall-row-more-alert:al_ckt"]')
+        .element.closest(".justify-center")!;
+      expect(cell).not.toBeNull();
+      expect(cell.querySelectorAll(":scope > span.size-8[aria-hidden='true']").length).toBe(0);
+    });
+
     /// Snoozing only makes sense while the ladder is still climbing, so a
     /// handled row's menu must not offer it.
     it("offers no snooze once nothing is escalating", async () => {
diff --git a/web/src/views/OnCall/OnCallResponses.vue b/web/src/views/OnCall/OnCallResponses.vue
index 92effa9fac..ff77bf073f 100644
--- a/web/src/views/OnCall/OnCallResponses.vue
+++ b/web/src/views/OnCall/OnCallResponses.vue
@@ -607,9 +607,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
       </template>
 
-      <!-- Three fixed slots, so icons line up down the column: acknowledge, resolve, then ⋯ on every row. -->
+      <!-- Slots stay fixed while a row has an inline action; a ⋯-only row drops them so it centres under the header. -->
       <template #cell-actions="{ row }">
-        <div class="flex items-center justify-end">
+        <div class="flex items-center justify-center">
           <template v-if="!row.latest.team_id">
             <ODropdown>
               <template #trigger>
@@ -654,7 +654,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OIcon name="check-circle" size="sm" aria-hidden="true" />
               <OTooltip :content="ackTooltip(row)" />
             </OButton>
-            <span v-else class="size-8 shrink-0 max-md:hidden" aria-hidden="true" />
+            <span
+              v-else-if="hasUnresolved(row)"
+              class="size-8 shrink-0 max-md:hidden"
+              aria-hidden="true"
+            />
             <OButton
               v-if="hasUnresolved(row)"
               variant="ghost-primary"
@@ -668,7 +672,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <OIcon name="task-alt" size="sm" aria-hidden="true" />
               <OTooltip :content="t('oncall.resolve')" />
             </OButton>
-            <span v-else class="size-8 shrink-0 max-md:hidden" aria-hidden="true" />
+            <span
+              v-else-if="canAcknowledge(row)"
+              class="size-8 shrink-0 max-md:hidden"
+              aria-hidden="true"
+            />
           </template>
           <!-- An open tooltip is the top dismissable layer, so it would take the menu's Escape. -->
           <ODropdown