Update POS styling and refactor Vue component for consistency:

- **CSS Enhancements:** Added `.pos-registration-control` class, improved styling for registration fields, and enhanced responsiveness for `.pos-order-items--order-detail`.
- **Vue Refactor:** Standardized imports, object keys, and quotes in `ActionSettingsWheelButton.vue` to align with consistent formatting and readability.

src/assets/pos.css

@@ -368,6 +368,12 @@
   min-width: 0;
 }
 
+.pos-registration-control {
+  width: 100%;
+  min-width: 0;
+  margin-bottom: 0;
+}
+
 .pos-registration-field {
   display: flex;
   flex-direction: column;
@@ -542,9 +548,18 @@
 
 .pos-order-items--order-detail .pos-registration-slot {
   display: flex;
+  min-width: 0;
+}
+
+.pos-order-items--order-detail .pos-registration-control {
+  display: flex;
+  flex: 1 1 0;
+  width: 100%;
+  min-width: 0;
 }
 
 .pos-order-items--order-detail .pos-registration-field {
+  flex: 1 1 0;
   height: 100%;
   justify-content: space-between;
 }
@@ -558,6 +573,10 @@
   box-shadow: none;
 }
 
+.pos-order-items--order-detail .pos-registration-field--editing {
+  width: 100%;
+}
+
 .pos-order-items--order-detail .pos-registration-field:hover,
 .pos-order-items--order-detail .pos-registration-field:focus-visible {
   transform: none;

tests/e2e/admin-pos-orders.spec.ts

@@ -103,12 +103,7 @@ async function openOrderDetailsTab(page: Page) {
   await expect(page.getByTestId("pos-order-panel-details")).toBeVisible();
 }
 
-async function submitOrderSettingModal(
-  page: Page,
-  field: string,
-  value: string,
-  type: "input" | "select" = "input"
-) {
+async function submitOrderSettingModal(page: Page, field: string, value: string, type: "input" | "select" = "input") {
   await getOrderSettingsEditButton(page, field).click();
 
   const popup = page.locator(".swal2-popup");
@@ -443,9 +438,7 @@ test.describe("Admin POS Orders - desktop settings", () => {
     expect(productPanelWidth / workspaceWidth).toBeGreaterThan(0.55);
     expect(cartPanelWidth / workspaceWidth).toBeLessThan(0.42);
     expect(productPanelBox?.x ?? 0).toBeLessThan(cartPanelBox?.x ?? 0);
-    expect(addItemsBackButtonBox?.y ?? 0).toBeGreaterThan(
-      (cartPanelBox?.y ?? 0) + (cartPanelBox?.height ?? 0) - 2
-    );
+    expect(addItemsBackButtonBox?.y ?? 0).toBeGreaterThan((cartPanelBox?.y ?? 0) + (cartPanelBox?.height ?? 0) - 2);
     expect(Math.abs((addItemsBackButtonBox?.x ?? 0) - (cartPanelBox?.x ?? 0))).toBeLessThanOrEqual(8);
 
     await expect(getVisibleTestId(page, "pos-order-total")).toBeVisible();
@@ -485,7 +478,9 @@ test.describe("Admin POS Orders - desktop settings", () => {
     await expectOrderTotal(page, 1397);
   });
 
-  test("loads step 2 customer context after reload and keeps actions directly below the basket card", async ({ page }) => {
+  test("loads step 2 customer context after reload and keeps actions directly below the basket card", async ({
+    page,
+  }) => {
     await page.goto("/admin/12/modules/pos");
     await expect(page.getByTestId("pos-step-1")).toBeVisible();
     await page.locator("#reg_1").fill("EC21235");
@@ -901,9 +896,7 @@ test.describe("Admin POS Orders - desktop settings", () => {
     await expect(getOrderDetailInput(page, "booking_id")).toHaveValue(expectedValues.booking_id);
   });
 
-  test("persists department, created_at, and invoice inclusion changes through per-field modals", async ({
-    page,
-  }) => {
+  test("persists department, created_at, and invoice inclusion changes through per-field modals", async ({ page }) => {
     const { orderId } = await createDisposableOrder(page);
     const updatedCreatedAt = "2026-04-09T13:37";
     const helper = page.getByTestId("pos-order-settings-include-helper");
@@ -971,6 +964,18 @@ test.describe("Admin POS Orders - desktop settings", () => {
     await openOrderDetailsTab(page);
     await expect(getOrderDetailInput(page, "invoice_collection_id")).toHaveValue("301");
   });
+
+  test("shows the attachment quick action in the desktop order list when the order has attachments", async ({
+    page,
+  }) => {
+    await page.goto("/admin/12/modules/pos/orders");
+
+    const attachmentAction = getVisibleTestId(page, "pos-order-list-attachments-54518");
+    await expect(attachmentAction).toBeVisible();
+
+    await attachmentAction.locator(".dropdown-trigger button").click();
+    await expect(page.getByRole("button", { name: /safety-seal\.pdf/i })).toBeVisible();
+  });
 });
 
 test.describe("Admin POS Orders - desktop locked states", () => {

tests/e2e/support/network.js

@@ -120,8 +120,16 @@ function withEffectiveOrderState(posFixture, order) {
   }
 
   const includeInInvoice = normalizeIncludeInInvoiceValue(order.include_in_invoice);
+  const orderId = Number(order.id || 0);
+  const attachments = Array.isArray(order.attachments)
+    ? order.attachments
+    : Array.isArray(posFixture.attachmentsByOrderId?.[orderId])
+    ? posFixture.attachmentsByOrderId[orderId]
+    : [];
+
   return {
     ...order,
+    attachments,
     include_in_invoice: includeInInvoice,
     include_in_invoice_effective:
       includeInInvoice === null ? resolveDepartmentIncludeInInvoice(posFixture, order.department_id) : includeInInvoice,
@@ -1397,10 +1405,10 @@ async function handlePosRoute({ route, request, parsedUrl, pathname, method, pos
           body.field === "include_in_invoice"
             ? normalizeIncludeInInvoiceValue(body.value)
             : body.field === "reg_1" || body.field === "reg_2" || body.field === "reg_3"
-              ? normalizeRegistrationValue(body.value)
+            ? normalizeRegistrationValue(body.value)
             : body.field === "created_at"
-              ? normalizeCreatedAtValue(body.value)
-              : body.value;
+            ? normalizeCreatedAtValue(body.value)
+            : body.value;
       } else {
         posFixture.ordersById[orderId] = {
           ...posFixture.ordersById[orderId],
@@ -2991,9 +2999,12 @@ export async function seedAuthenticatedState(page, token = "e2e-token") {
 export async function primeMockSession(page, { token = "e2e-token", bootPath = "/redirect" } = {}) {
   await seedAuthenticatedState(page, token);
   const sessionRequest = page
-    .waitForResponse((response) => {
-      return response.request().method() === "GET" && response.url().includes("/auth/session");
-    }, { timeout: 10_000 })
+    .waitForResponse(
+      (response) => {
+        return response.request().method() === "GET" && response.url().includes("/auth/session");
+      },
+      { timeout: 10_000 }
+    )
     .catch(() => null);
   await page.goto(bootPath);
   await sessionRequest;