Align market drawer edit action

modules/shared/auth/ui/home.php

@@ -1212,20 +1212,28 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $otcM
       return;
     }
 
-    const header = existingCard.querySelector(':scope > .sg-object-card__header');
-    const actions = header?.querySelector(':scope > .sg-component-row');
-    if (!header || !actions) {
-      return;
-    }
-
     const stage = document.createElement('div');
     stage.className = 'sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host';
     stage.dataset.pattern = 'overlay-card';
     stage.dataset.dialogOpen = 'false';
-    existingCard.classList.add('sg-delete-confirmation-pattern__target');
-    existingCard.dataset.sharedEditableDeleteToken = 'DELETE';
-    existingCard.dataset.marketDefinitionDeleteId = '';
+    const target = document.createElement('div');
+    target.className = 'sg-delete-confirmation-pattern__target';
+    target.dataset.sharedEditableActionCard = '';
+    target.dataset.sharedEditableDeleteToken = 'DELETE';
+    target.dataset.marketDefinitionDeleteId = '';
+    target.dataset.marketDefinitionCard = '';
 
+    const titleCard = document.createElement('article');
+    titleCard.className = 'sg-card sg-card--content-card market-delete-confirmation-card';
+    const header = document.createElement('header');
+    header.className = 'sg-card-segment sg-card-segment--header sg-card-segment--gray sg-object-card__header';
+    const heading = document.createElement('h2');
+    heading.className = 'sg-heading-h2 market-delete-confirmation-card__title';
+    heading.dataset.marketDefinitionReadTitle = '';
+    heading.dataset.marketDefinitionDrawerTitle = '';
+    heading.textContent = 'Markt';
+    const actions = document.createElement('div');
+    actions.className = 'sg-component-row';
     const deleteButton = document.createElement('button');
     deleteButton.className = 'sg-interaction-element sg-button sg-button--warning';
     deleteButton.type = 'button';
@@ -1233,6 +1241,10 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $otcM
     deleteButton.dataset.marketDefinitionDelete = '';
     deleteButton.textContent = 'Löschen';
     actions.append(deleteButton);
+    header.append(heading, actions);
+    titleCard.append(header);
+    existingCard.querySelector('[data-market-definition-read-title]')?.remove();
+    existingCard.removeAttribute('data-shared-editable-action-card');
 
     const confirmation = document.createElement('article');
     confirmation.className = 'sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card';
@@ -1243,8 +1255,8 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $otcM
     confirmation.dataset.sharedEditableCardDeleteConfirmation = '';
     confirmation.hidden = true;
     confirmation.innerHTML = '<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body"><p class="sg-body sg-delete-confirmation-pattern__text"><strong>Möchtest du diesen Markt wirklich löschen?</strong></p><p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p><label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row"><span class="sg-label">Bestätigung</span><input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-shared-editable-card-delete-input></label><p class="sg-body" data-market-definition-delete-status aria-live="polite"></p><div class="sg-delete-confirmation-pattern__actions"><button class="sg-interaction-element sg-button sg-button--active" type="button" data-shared-editable-card-delete-cancel>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-shared-editable-card-delete-submit data-market-definition-delete-submit>Löschen</button></div></div>';
-    existingCard.append(confirmation);
-    stage.append(existingCard);
+    target.append(titleCard, existingCard, confirmation);
+    stage.append(target);
     drawer.querySelector('[data-market-definition-drawer-content]')?.append(stage);
   };
 JS;

public/assets/styles.portal.css

@@ -362,6 +362,10 @@ body.sg-lager-mobile-detail-open > :not([data-lager-mobile-detail-host]) {
   display: none;
 }
 
+.sg-card-list-page-drawer [data-market-definition-card] .sg-object-card__header > .sg-component-row {
+  margin-left: auto;
+}
+
 .sg-card-list-page-drawer [data-market-delete-occurrence-id],
 .sg-card-list-page-drawer [data-market-definition-delete-id] {
   display: flex;