fix(helpdesk): move search above period selector in risk radar toolbar

Search input now comes first (left), period segment control after.
Both in a horizontal flex row on the same line.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-06 00:31:24 +02:00
parent 23503049d1
commit e684d20be0
2 changed files with 6 additions and 5 deletions

View File

@@ -58,13 +58,13 @@ $periodLabels = [
<div class="helpdesk-risk-radar-dashboard"> <div class="helpdesk-risk-radar-dashboard">
<div class="helpdesk-risk-radar-toolbar"> <div class="helpdesk-risk-radar-toolbar">
<input type="search" id="radar-search" class="helpdesk-risk-radar-search" placeholder="<?php e(t('Search customers...')); ?>" aria-label="<?php e(t('Search customers...')); ?>">
<div class="helpdesk-segment-control" id="radar-period-selector"> <div class="helpdesk-segment-control" id="radar-period-selector">
<?php foreach ($periods as $p): ?> <?php foreach ($periods as $p): ?>
<input type="radio" name="radar-period" id="radar-period-<?php e($p); ?>" value="<?php e($p); ?>"<?php if ($p === 90): ?> checked<?php endif; ?>> <input type="radio" name="radar-period" id="radar-period-<?php e($p); ?>" value="<?php e($p); ?>"<?php if ($p === 90): ?> checked<?php endif; ?>>
<label for="radar-period-<?php e($p); ?>"><?php e($periodLabels[$p]); ?></label> <label for="radar-period-<?php e($p); ?>"><?php e($periodLabels[$p]); ?></label>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
<input type="search" id="radar-search" class="helpdesk-risk-radar-search" placeholder="<?php e(t('Search customers...')); ?>" aria-label="<?php e(t('Search customers...')); ?>">
</div> </div>
<div id="radar-loading"> <div id="radar-loading">

View File

@@ -523,14 +523,15 @@
/* --- Risk Radar --- */ /* --- Risk Radar --- */
.helpdesk-risk-radar-toolbar { .helpdesk-risk-radar-toolbar {
display: flex; display: flex;
flex-direction: column; align-items: center;
align-items: flex-start; gap: calc(var(--app-spacing) * 0.75);
gap: calc(var(--app-spacing) * 0.5); flex-wrap: wrap;
margin-bottom: calc(var(--app-spacing) * 0.75); margin-bottom: calc(var(--app-spacing) * 0.75);
} }
.helpdesk-risk-radar-search { .helpdesk-risk-radar-search {
width: 100%; flex: 1;
min-width: 12rem;
max-width: 20rem; max-width: 20rem;
} }