From 3ca5c342c38e22cc760742d310f9c686c276970d Mon Sep 17 00:00:00 2001
From: mihretue <mihretuendeshaw84@gmail.com>
Date: Tue, 18 Aug 2026 11:32:42 +0000
Subject: [PATCH] fix(question): collapse row actions into a dropdown menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Matches the exams table's action pattern — a single Actions button opening
a menu, instead of a row of inline buttons/icons that got crowded once a
question had submit/approve/reject/retire/edit/delete all applicable at
once.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../question/pages/QuestionPage/actions.tsx   | 108 ++++++++++--------
 1 file changed, 63 insertions(+), 45 deletions(-)

diff --git a/apps/backoffice/src/app/features/question/pages/QuestionPage/actions.tsx b/apps/backoffice/src/app/features/question/pages/QuestionPage/actions.tsx
index 05f1b02fb..fcea510ff 100644
--- a/apps/backoffice/src/app/features/question/pages/QuestionPage/actions.tsx
+++ b/apps/backoffice/src/app/features/question/pages/QuestionPage/actions.tsx
@@ -1,5 +1,11 @@
-import { ActionIcon, Button, Group } from '@mantine/core';
-import { IconEdit, IconGavel, IconSend, IconTrash } from '@tabler/icons-react';
+import { Button, Menu } from '@mantine/core';
+import {
+  IconChevronDown,
+  IconEdit,
+  IconGavel,
+  IconSend,
+  IconTrash,
+} from '@tabler/icons-react';
 import type { TFunction } from 'i18next';
 import type { AdvancedColumn } from '@ema-platform/ui';
 import { LICENSE_PERMISSIONS, RequirePermission } from '@ema-platform/auth';
@@ -21,52 +27,64 @@ export function questionActionsColumn(
     cell: ({ row }) => {
       const q = row.original;
       return (
-        <Group gap="xs">
-          {(q.status === 'DRAFT' || q.status === 'REJECTED') && (
+        <Menu shadow="md" width={180} position="bottom-end">
+          <Menu.Target>
+            <Button
+              size="compact-xs"
+              variant="light"
+              rightSection={<IconChevronDown size={12} />}
+              loading={handlers.isSubmittingReview}
+            >
+              {t('question.columns.actions', 'Actions')}
+            </Button>
+          </Menu.Target>
+          <Menu.Dropdown>
+            {(q.status === 'DRAFT' || q.status === 'REJECTED') && (
+              <RequirePermission anyOf={[LICENSE_PERMISSIONS.AUTHOR_QUESTION]} hideOnly>
+                <Menu.Item
+                  leftSection={<IconSend size={14} />}
+                  onClick={() => handlers.onSubmitForApproval(q)}
+                >
+                  {t('question.qc.submit')}
+                </Menu.Item>
+              </RequirePermission>
+            )}
+            {q.status === 'PENDING_APPROVAL' && (
+              <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_QUESTION]} hideOnly>
+                <Menu.Item color="teal" onClick={() => handlers.onReview(q, 'APPROVED')}>
+                  {t('question.qc.approve')}
+                </Menu.Item>
+                <Menu.Item color="red" onClick={() => handlers.onReview(q, 'REJECTED')}>
+                  {t('question.qc.reject')}
+                </Menu.Item>
+              </RequirePermission>
+            )}
+            {q.status === 'APPROVED' && (
+              <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_QUESTION]} hideOnly>
+                <Menu.Item
+                  color="dark"
+                  leftSection={<IconGavel size={14} />}
+                  onClick={() => handlers.onReview(q, 'RETIRED')}
+                >
+                  {t('question.qc.retire')}
+                </Menu.Item>
+              </RequirePermission>
+            )}
             <RequirePermission anyOf={[LICENSE_PERMISSIONS.AUTHOR_QUESTION]} hideOnly>
-              <Button
-                size="compact-xs"
-                variant="light"
-                leftSection={<IconSend size={12} />}
-                loading={handlers.isSubmittingReview}
-                onClick={() => handlers.onSubmitForApproval(q)}
+              <Menu.Divider />
+              <Menu.Item leftSection={<IconEdit size={14} />} onClick={() => handlers.onEdit(q)}>
+                {t('question.action.edit', 'Edit')}
+              </Menu.Item>
+              <Menu.Item
+                color="red"
+                leftSection={<IconTrash size={14} />}
+                onClick={() => handlers.onDelete(q)}
               >
-                {t('question.qc.submit')}
-              </Button>
+                {t('question.action.delete', 'Delete')}
+              </Menu.Item>
             </RequirePermission>
-          )}
-          {q.status === 'PENDING_APPROVAL' && (
-            <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_QUESTION]} hideOnly>
-              <Button size="compact-xs" variant="light" color="teal" onClick={() => handlers.onReview(q, 'APPROVED')}>
-                {t('question.qc.approve')}
-              </Button>
-              <Button size="compact-xs" variant="light" color="red" onClick={() => handlers.onReview(q, 'REJECTED')}>
-                {t('question.qc.reject')}
-              </Button>
-            </RequirePermission>
-          )}
-          {q.status === 'APPROVED' && (
-            <RequirePermission anyOf={[LICENSE_PERMISSIONS.APPROVE_QUESTION]} hideOnly>
-              <Button
-                size="compact-xs"
-                variant="subtle"
-                color="dark"
-                leftSection={<IconGavel size={12} />}
-                onClick={() => handlers.onReview(q, 'RETIRED')}
-              >
-                {t('question.qc.retire')}
-              </Button>
-            </RequirePermission>
-          )}
-          <RequirePermission anyOf={[LICENSE_PERMISSIONS.AUTHOR_QUESTION]} hideOnly>
-            <ActionIcon variant="subtle" color="blue" size="sm" onClick={() => handlers.onEdit(q)}>
-              <IconEdit size={14} />
-            </ActionIcon>
-            <ActionIcon variant="subtle" color="red" size="sm" onClick={() => handlers.onDelete(q)}>
-              <IconTrash size={14} />
-            </ActionIcon>
-          </RequirePermission>
-        </Group>
+          </Menu.Dropdown>
+        </Menu>
       );
     },
   };