[Mobile] Center Confirmation Dialog Texts

e2e/playwright-mobile.config.js

@@ -3,7 +3,6 @@
 
 import { devices } from '@playwright/test';
 const MAX_FAILURES = 5;
-const NUM_WORKERS = 2;
 
 import { fileURLToPath } from 'url';
 
@@ -20,7 +19,8 @@ const config = {
     reuseExistingServer: true //This was originally disabled to prevent differences in local debugging vs. CI. However, it significantly speeds up local debugging.
   },
   maxFailures: MAX_FAILURES, //Limits failures to 5 to reduce CI Waste
-  workers: NUM_WORKERS, //Limit to 2 for CircleCI Agent
+  workers: 1, //Limit to 1 due to resource constraints similar to https://github.com/percy/cli/discussions/1067
+
   use: {
     baseURL: 'http://localhost:8080/',
     headless: true,

e2e/tests/mobile/smoke.e2e.spec.js

@@ -34,20 +34,16 @@ Make no assumptions about the order that elements appear in the DOM.
 */
 
 import { expect, test } from '../../pluginFixtures.js';
-
 test('Verify that My Items Tree appears @mobile', async ({ page, openmctConfig }) => {
   const { myItemsFolderName } = openmctConfig;
   //Go to baseURL
   await page.goto('./');
-
   //My Items to be visible
   await expect(page.getByRole('treeitem', { name: `${myItemsFolderName}` })).toBeVisible();
 });
-
 test('Verify that user can search @mobile', async ({ page }) => {
   //For now, this test is going to be hardcoded against './test-data/display_layout_with_child_layouts.json'
   await page.goto('./');
-
   await page.getByRole('searchbox', { name: 'Search Input' }).click();
   await page.getByRole('searchbox', { name: 'Search Input' }).fill('Parent Display Layout');
   //Search Results appear in search modal
@@ -57,3 +53,23 @@ test('Verify that user can search @mobile', async ({ page }) => {
   await page.getByTitle('Collapse Browse Pane').click();
   await expect(page.getByRole('main').getByText('Parent Display Layout')).toBeVisible();
 });
+test('Remove Object and confirmation dialog @mobile', async ({ page }) => {
+  await page.goto('./');
+  await page.getByRole('searchbox', { name: 'Search Input' }).click();
+  await page.getByRole('searchbox', { name: 'Search Input' }).fill('Parent Display Layout');
+  //Search Results appear in search modal
+  //Clicking on the search result takes you to the object
+  await page.getByLabel('Object Results').getByText('Parent Display Layout').click();
+  await page.getByTitle('Collapse Browse Pane').click();
+  await expect(page.getByRole('main').getByText('Parent Display Layout')).toBeVisible();
+  //Verify both objects are in view
+  await expect(await page.getByLabel('Child Layout 1 Layout')).toBeVisible();
+  await expect(await page.getByLabel('Child Layout 2 Layout')).toBeVisible();
+  //Remove First Object to bring up confirmation dialog
+  await page.getByLabel('View menu items').nth(1).click();
+  await page.getByLabel('Remove').click();
+  await page.getByRole('button', { name: 'OK' }).click();
+  //Verify that the object is removed
+  await expect(await page.getByLabel('Child Layout 1 Layout')).toBeVisible();
+  expect(await page.getByLabel('Child Layout 2 Layout').count()).toBe(0);
+});

src/api/overlays/components/dialog-component.scss

@@ -8,7 +8,9 @@
 .c-message {
   display: flex;
   align-items: center;
-
+  body.mobile & { // Centers confirmation dialog on screen.
+    margin-top: 40vh; 
+  }
   > * + * {
     margin-left: $interiorMarginLg;
   }

src/api/overlays/components/overlay-component.scss

@@ -28,6 +28,11 @@
     display: flex;
     flex-direction: column;
     padding: $overlayInnerMargin;
+    body.mobile & { // Centers the overlay dialog for mobile
+      position: relative;
+      height: 100vh;
+      width: 100vw;
+    }
   }
 
   &__close-button {
@@ -45,6 +50,9 @@
     flex-direction: column;
     outline: none;
     overflow: auto;
+    body.mobile & {
+      flex: none;
+    }
   }
 
   &__top-bar {
@@ -78,6 +86,10 @@
     display: flex;
     justify-content: flex-end;
     margin-top: $interiorMargin;
+    body.mobile & {
+      justify-content: flex-end;
+      padding-right: $interiorMargin;
+    }
 
     > * + * {
       margin-left: $interiorMargin;