fix(filter): Hover füllt ganzen Button, Abbrechen links / OK rechts, Alle+Keine
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m18s

- Trigger nimmt volle Höhe des .search-box-Containers ein
  (align-self: stretch, min-height: 0), damit der Hover-Hintergrund
  bündig ausgefüllt wird statt nur innerhalb eines 44px-Rechtecks.
- Footer: justify-content: space-between — Abbrechen sitzt jetzt links,
  OK rechts (übliche Platform-Konvention).
- Quick-Actions: zusätzlicher „Keine"-Button neben „Alle", beide setzen
  den Draft-State ohne sofortigen Commit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-18 08:49:57 +02:00
parent d1ddd51da1
commit ab2acb6437

View File

@@ -77,6 +77,10 @@
function selectAllDraft() {
draft = new Set(searchFilterStore.domains.map((d) => d.domain));
}
function selectNoneDraft() {
draft = new Set();
}
</script>
<div class="wrap" bind:this={container}>
@@ -98,7 +102,10 @@
<div class="menu" role="menu">
<div class="menu-head">
<span class="head-title">Gefunden auf</span>
<button class="quick" type="button" onclick={selectAllDraft}>Alle</button>
<div class="quicks">
<button class="quick" type="button" onclick={selectAllDraft}>Alle</button>
<button class="quick" type="button" onclick={selectNoneDraft}>Keine</button>
</div>
</div>
{#if searchFilterStore.domains.length === 0}
<p class="empty">Keine Domains in der Whitelist.</p>
@@ -169,13 +176,19 @@
border-color: #2b6a3d;
}
/* In der Suchmaske: kein eigener Rahmen/Hintergrund, der Container drumherum
trägt die visuelle Form. */
trägt die visuelle Form. Hover füllt die volle Container-Höhe. */
.trigger.inline {
background: transparent;
border: 0;
border-right: 1px solid #e4eae7;
border-radius: 0;
padding: 0.5rem 0.85rem 0.5rem 0.65rem;
padding: 0 0.85rem 0 0.65rem;
align-self: stretch;
min-height: 0;
}
.trigger.inline:first-child {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.trigger.inline.filtered {
background: transparent;
@@ -294,11 +307,15 @@
.menu-foot {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
justify-content: space-between;
padding: 0.6rem 0.5rem 0.35rem;
border-top: 1px solid #f0f3f1;
margin-top: 0.2rem;
}
.quicks {
display: inline-flex;
gap: 0.25rem;
}
.btn {
display: inline-flex;
align-items: center;