From 320f0a5a0006b6f62f28a95a3e26985ca628e196 Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Wed, 15 Apr 2026 21:29:43 +0200
Subject: [PATCH] feat(helpdesk): polish handover wizard and list page UI

- Simplify wizard step indicator markup (divs instead of ol/li)
- Narrow wizard content width, compact spacing
- Use app-action-success button style on list titlebar
- Add handover-form-heading class for consistent section spacing
- Remove unused wrapper divs and redundant CSS

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../pages/helpdesk/handovers/_form.phtml      |  2 +-
 .../helpdesk/handovers/create(default).phtml  | 40 +++++++--------
 .../helpdesk/handovers/index(default).phtml   | 18 +++----
 modules/helpdesk/web/css/helpdesk.css         | 50 +++++++++----------
 4 files changed, 51 insertions(+), 59 deletions(-)

diff --git a/modules/helpdesk/pages/helpdesk/handovers/_form.phtml b/modules/helpdesk/pages/helpdesk/handovers/_form.phtml
index 9cf3269..3bb71c5 100644
--- a/modules/helpdesk/pages/helpdesk/handovers/_form.phtml
+++ b/modules/helpdesk/pages/helpdesk/handovers/_form.phtml
@@ -23,7 +23,7 @@ $readonly = !empty($readonly);
       $inputId = 'handover-field-' . $index;
   ?>
     <?php if ($type === 'heading'): ?>
-      <h3><?php e($label); ?></h3>
+      <h3 class="handover-form-heading"><?php e($label); ?></h3>
 
     <?php elseif ($type === 'paragraph'): ?>
       <p class="app-muted"><?php e($label); ?></p>
diff --git a/modules/helpdesk/pages/helpdesk/handovers/create(default).phtml b/modules/helpdesk/pages/helpdesk/handovers/create(default).phtml
index 51b5f39..ddc575b 100644
--- a/modules/helpdesk/pages/helpdesk/handovers/create(default).phtml
+++ b/modules/helpdesk/pages/helpdesk/handovers/create(default).phtml
@@ -16,9 +16,9 @@ $steps = [
     ['label' => t('Protocol'), 'number' => 2],
 ];
 ?>
-<div class="app-wizard-container">
-  <?php require templatePath('partials/app-flash.phtml'); ?>
+<?php require templatePath('partials/app-flash.phtml'); ?>
 
+<div class="app-wizard-content">
   <div class="app-wizard-header">
     <a href="<?php e(lurl($closeTarget)); ?>" class="app-wizard-back" data-tooltip="<?php e(t('Back to list')); ?>">
       <i class="bi bi-arrow-left"></i>
@@ -28,18 +28,16 @@ $steps = [
 
   <!-- Step indicator -->
   <nav class="app-wizard-steps" aria-label="<?php e(t('Progress')); ?>">
-    <ol>
-      <?php foreach ($steps as $s): ?>
-        <li class="app-wizard-step<?php if ($s['number'] === $step): ?> is-active<?php elseif ($s['number'] < $step): ?> is-completed<?php endif; ?>"
-            <?php if ($s['number'] === $step): ?>aria-current="step"<?php endif; ?>>
-          <span class="app-wizard-step-number"><?php e($s['number']); ?></span>
-          <span class="app-wizard-step-label"><?php e($s['label']); ?></span>
-        </li>
-        <?php if ($s['number'] < count($steps)): ?>
-          <li class="app-wizard-step-connector<?php if ($s['number'] < $step): ?> is-completed<?php endif; ?>" aria-hidden="true"></li>
-        <?php endif; ?>
-      <?php endforeach; ?>
-    </ol>
+    <?php foreach ($steps as $s): ?>
+      <div class="app-wizard-step<?php if ($s['number'] === $step): ?> is-active<?php elseif ($s['number'] < $step): ?> is-completed<?php endif; ?>"
+           <?php if ($s['number'] === $step): ?>aria-current="step"<?php endif; ?>>
+        <span class="app-wizard-step-number"><?php e($s['number']); ?></span>
+        <span class="app-wizard-step-label"><?php e($s['label']); ?></span>
+      </div>
+      <?php if ($s['number'] < count($steps)): ?>
+        <div class="app-wizard-step-connector<?php if ($s['number'] < $step): ?> is-completed<?php endif; ?>" aria-hidden="true"></div>
+      <?php endif; ?>
+    <?php endforeach; ?>
   </nav>
 
   <?php if ($validationSummaryErrors): ?>
@@ -99,7 +97,7 @@ $steps = [
         <?php \MintyPHP\Session::getCsrfInput(); ?>
 
         <div class="app-wizard-actions">
-          <a href="<?php e(lurl($closeTarget)); ?>" class="secondary outline"><?php e(t('Cancel')); ?></a>
+          <a href="<?php e(lurl($closeTarget)); ?>" role="button" class="outline secondary"><?php e(t('Cancel')); ?></a>
           <button type="submit" class="primary"><?php e(t('Continue')); ?></button>
         </div>
       </form>
@@ -114,17 +112,15 @@ $steps = [
           <?php e($wizardData['debitor_name'] ?? ''); ?> &mdash; <?php e($productDisplayName); ?>
         </p>
 
-        <div class="app-wizard-protocol-form">
-          <?php
-          $readonly = false;
-          require __DIR__ . '/_form.phtml';
-          ?>
-        </div>
+        <?php
+        $readonly = false;
+        require __DIR__ . '/_form.phtml';
+        ?>
 
         <?php \MintyPHP\Session::getCsrfInput(); ?>
 
         <div class="app-wizard-actions">
-          <a href="<?php e(lurl($createTarget)); ?>" class="secondary outline"><?php e(t('Back')); ?></a>
+          <a href="<?php e(lurl($createTarget)); ?>" role="button" class="outline secondary"><?php e(t('Back')); ?></a>
           <button type="submit" class="primary"><?php e(t('Create handover')); ?></button>
         </div>
       </form>
diff --git a/modules/helpdesk/pages/helpdesk/handovers/index(default).phtml b/modules/helpdesk/pages/helpdesk/handovers/index(default).phtml
index d76c26f..d1229c2 100644
--- a/modules/helpdesk/pages/helpdesk/handovers/index(default).phtml
+++ b/modules/helpdesk/pages/helpdesk/handovers/index(default).phtml
@@ -13,15 +13,15 @@ $canCreate = $canCreate ?? false;
 
 <?php
 $listTitle = t('Handovers');
-$listActions = [];
-if ($canCreate) {
-    $listActions[] = [
-        'label' => t('New handover'),
-        'href' => lurl('helpdesk/handovers/create'),
-        'class' => 'primary',
-        'icon' => 'bi-plus-lg',
-    ];
-}
+ob_start();
+?>
+<?php if ($canCreate): ?>
+  <a role="button" class="app-action-success" href="<?php e(requestPathWithReturnTarget('helpdesk/handovers/create', \MintyPHP\Http\Request::pathWithQuery())); ?>">
+    <i class="bi bi-plus"></i> <?php e(t('New handover')); ?>
+  </a>
+<?php endif; ?>
+<?php
+$listTitleActionsHtml = ob_get_clean();
 require templatePath('partials/app-list-titlebar.phtml');
 ?>
 <?php
diff --git a/modules/helpdesk/web/css/helpdesk.css b/modules/helpdesk/web/css/helpdesk.css
index f7db7e5..d346a74 100644
--- a/modules/helpdesk/web/css/helpdesk.css
+++ b/modules/helpdesk/web/css/helpdesk.css
@@ -1448,10 +1448,7 @@
       overflow-x: clip;
     }
 
-    #app-details-aside-section {
-      display: flex;
-      min-width: 0;
-    }
+
 
     #app-details-aside-section .helpdesk-comm-aside {
       display: flex;
@@ -2595,17 +2592,17 @@
 
   /* ── Wizard (Stripe-style two-step assistant) ───────────────────────── */
 
-  .app-wizard-container {
-    max-width: 42rem;
-    margin: 0 auto;
-    padding: calc(var(--app-spacing) * 2) var(--app-spacing);
+  /* ── Wizard (Stripe-style creation assistant) ─────────────────────── */
+
+  .app-wizard-content {
+    max-width: 32rem;
   }
 
   .app-wizard-header {
     display: flex;
     align-items: center;
     gap: calc(var(--app-spacing) * 0.75);
-    margin-bottom: calc(var(--app-spacing) * 1.5);
+    margin-bottom: calc(var(--app-spacing) * 1.25);
   }
 
   .app-wizard-back {
@@ -2631,14 +2628,11 @@
     margin: 0;
   }
 
-  /* Step indicator */
-  .app-wizard-steps ol {
-    display: flex;
+  /* Step indicator — compact, not full-width */
+  .app-wizard-steps {
+    display: inline-flex;
     align-items: center;
-    list-style: none;
-    padding: 0;
     margin: 0 0 calc(var(--app-spacing) * 1.5);
-    gap: 0;
   }
 
   .app-wizard-step {
@@ -2659,7 +2653,7 @@
     border: 2px solid var(--app-border);
     color: var(--app-muted-color);
     background: transparent;
-    transition: all 0.2s ease;
+    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
     flex-shrink: 0;
   }
 
@@ -2691,10 +2685,11 @@
   }
 
   .app-wizard-step-connector {
-    flex: 1;
+    width: 2rem;
     height: 2px;
     background: var(--app-border);
-    margin: 0 0.75rem;
+    margin: 0 0.5rem;
+    flex-shrink: 0;
     transition: background 0.2s ease;
   }
 
@@ -2720,7 +2715,7 @@
   .app-wizard-card-description {
     font-size: var(--text-sm, 0.875rem);
     color: var(--app-muted-color);
-    margin: 0 0 calc(var(--app-spacing) * 1.5);
+    margin: 0 0 calc(var(--app-spacing) * 1.25);
   }
 
   .app-wizard-field-group {
@@ -2734,10 +2729,6 @@
     font-weight: var(--font-medium, 500);
   }
 
-  .app-wizard-protocol-form {
-    max-width: 100%;
-  }
-
   .app-wizard-actions {
     display: flex;
     justify-content: flex-end;
@@ -2748,6 +2739,15 @@
   }
 
   /* Handover form — shared styles */
+  .handover-form-heading {
+    margin-top: calc(var(--app-spacing) * 1.25);
+    margin-bottom: calc(var(--app-spacing) * 0.75);
+  }
+
+  .handover-form-heading:first-child {
+    margin-top: 0;
+  }
+
   .handover-form-required {
     color: var(--app-danger-color, hsl(0 70% 55%));
   }
@@ -2767,10 +2767,6 @@
   }
 
   @media (max-width: 576px) {
-    .app-wizard-container {
-      padding: var(--app-spacing);
-    }
-
     .app-wizard-step-label {
       display: none;
     }