Zeitraum im Kartenkopf; Verlauf feiner als ein Punkt pro Tag

Zeitraum-Auswahl: Sie stand ueber dem Diagramm und nahm ihm Hoehe weg. Jetzt sitzt sie klein im Kartenkopf neben dem Titel - die ganze Kartenhoehe gehoert dem Diagramm. Die Wahl wird in der Anordnung mitgespeichert, bleibt also nach dem Neuladen erhalten; ausserhalb des Bearbeitungsmodus geschieht das still im Hintergrund. Feinere Aufloesung: Ein Punkt je Tag verbarg, WANN ein- und ausgelagert wurde. Die Abtastrate richtet sich jetzt nach dem Zeitraum: bis 2 Tage -> stuendlich bis 14 Tage -> alle 6 Stunden bis 120 Tage -> taeglich darueber -> woechentlich So bleibt die Punktzahl immer zwischen etwa 25 und 105 - fein genug zum Erkennen, grob genug zum Zeichnen. Ein Test haelt diese Spanne fest. Die Zeitachse traegt entsprechend Uhrzeit statt Datum, wenn stuendlich abgetastet wird. Punkte heissen jetzt "at" (Zeitpunkt) statt "date". Zeitstempel aus SQLite kommen ohne Zeitzone zurueck und werden vereinheitlicht, sonst schluege die Differenzbildung fehl. Auswahl erweitert: 24 Stunden, 2 Tage, 7, 30, 90 Tage, 6 Monate, 1 Jahr. Geprueft: "npm run build" laeuft durch. pytest weiterhin nicht ausfuehrbar - kein Python auf diesem Rechner; die Tests wurden an die neue Aufloesung angepasst. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-23 10:36:33 +02:00
parent 97a6e94ea1
commit 1fd1e89872
6 changed files with 199 additions and 115 deletions
--- a/backend/app/routers/dashboard.py
+++ b/backend/app/routers/dashboard.py
@@ -301,6 +301,35 @@ def _signiert(movement: Movement) -> float:
    return movement.quantity  # Korrekturen sind bereits vorzeichenbehaftet


+def _utc(zeitpunkt: datetime) -> datetime:
+    """SQLite gibt Zeitstempel ohne Zeitzone zurück – hier vereinheitlichen."""
+    return zeitpunkt if zeitpunkt.tzinfo else zeitpunkt.replace(tzinfo=timezone.utc)
+
+
+def _schrittweite(days: int) -> timedelta:
+    """Abtastrate passend zum Zeitraum.
+
+    Ein Punkt je Tag verbirgt, wann am Tag etwas passiert ist; ein Punkt je
+    Stunde über ein Jahr wären knapp 9000 Punkte. Deshalb gestaffelt – die
+    Anzahl der Punkte bleibt so immer im Bereich von etwa 25 bis 170.
+    """
+    if days <= 2:
+        return timedelta(hours=1)
+    if days <= 14:
+        return timedelta(hours=6)
+    if days <= 120:
+        return timedelta(days=1)
+    return timedelta(days=7)
+
+
+def _eimer(days: int) -> tuple[datetime, timedelta, int]:
+    """Endzeitpunkt, Schrittweite und Anzahl der Abschnitte."""
+    schritt = _schrittweite(days)
+    jetzt = datetime.now(timezone.utc)
+    anzahl = max(1, int(timedelta(days=days) / schritt))
+    return jetzt, schritt, anzahl
+
+
@router.get("/timeline", response_model=list[TimelinePoint])
 def timeline(
    days: int = 90,
@@ -317,7 +346,7 @@ def timeline(
    Packungsgröße. Wird sie später geändert, verschiebt sich auch die Historie.
    """
    days = max(1, min(days, 730))
-    heute = date.today()
+    jetzt, schritt, anzahl = _eimer(days)

    produkte = db.query(Product)
    if product_id is not None:
@@ -329,26 +358,29 @@ def timeline(
    faktoren = {p.id: (article_unit(p)[0] or 1.0) for p in produkte}
    bestand = {p.id: current_stock(db, p.id) for p in produkte}

-    beginn = datetime.combine(heute - timedelta(days=days - 1), datetime.min.time(), tzinfo=timezone.utc)
+    beginn = jetzt - schritt * anzahl
    bewegungen = db.query(Movement).filter(Movement.created_at >= beginn)
    if product_id is not None:
        bewegungen = bewegungen.filter(Movement.product_id == product_id)

-    delta: dict[date, dict[int, float]] = defaultdict(lambda: defaultdict(float))
+    # Abschnitt 0 ist der jüngste (von jetzt rückwärts eine Schrittweite).
+    sekunden = schritt.total_seconds()
+    delta: dict[int, dict[int, float]] = defaultdict(lambda: defaultdict(float))
    for m in bewegungen.all():
-        if m.product_id in faktoren:
-            delta[m.created_at.date()][m.product_id] += _signiert(m)
+        if m.product_id not in faktoren:
+            continue
+        index = int((jetzt - _utc(m.created_at)).total_seconds() // sekunden)
+        if 0 <= index < anzahl:
+            delta[index][m.product_id] += _signiert(m)

    def summe() -> float:
        return round(sum(bestand[pid] / faktoren[pid] for pid in bestand), 3)

-    punkte = [TimelinePoint(date=heute, article_units=summe())]
-    tag = heute
-    for _ in range(days - 1):
-        for pid, wert in delta.get(tag, {}).items():
+    punkte = [TimelinePoint(at=jetzt, article_units=summe())]
+    for i in range(anzahl):
+        for pid, wert in delta.get(i, {}).items():
            bestand[pid] = bestand.get(pid, 0.0) - wert
-        tag = tag - timedelta(days=1)
-        punkte.append(TimelinePoint(date=tag, article_units=summe()))
+        punkte.append(TimelinePoint(at=jetzt - schritt * (i + 1), article_units=summe()))

    punkte.reverse()
    return punkte
@@ -360,25 +392,33 @@ def activity(
    db: Session = Depends(get_db),
    _: User = Depends(get_current_user),
 ) -> list[ActivityPoint]:
-    """Anzahl der Ein- und Auslagerungen je Tag."""
+    """Anzahl der Ein- und Auslagerungen je Abschnitt.
+
+    Die Abschnittslänge richtet sich nach dem Zeitraum: bei ein bis zwei Tagen
+    stündlich, damit erkennbar wird, zu welcher Tageszeit gelagert wird.
+    """
    days = max(1, min(days, 365))
-    heute = date.today()
-    beginn = datetime.combine(heute - timedelta(days=days - 1), datetime.min.time(), tzinfo=timezone.utc)
+    jetzt, schritt, anzahl = _eimer(days)
+    beginn = jetzt - schritt * anzahl
+    sekunden = schritt.total_seconds()

-    ein: dict[date, int] = defaultdict(int)
-    aus: dict[date, int] = defaultdict(int)
+    ein: dict[int, int] = defaultdict(int)
+    aus: dict[int, int] = defaultdict(int)
    for m in db.query(Movement).filter(Movement.created_at >= beginn).all():
-        tag = m.created_at.date()
+        index = int((jetzt - _utc(m.created_at)).total_seconds() // sekunden)
+        if not 0 <= index < anzahl:
+            continue
        if m.type == MovementType.in_:
-            ein[tag] += 1
+            ein[index] += 1
        elif m.type == MovementType.out:
-            aus[tag] += 1
+            aus[index] += 1

+    # Von alt nach neu ausgeben; Abschnitt 0 ist der jüngste.
    return [
        ActivityPoint(
-            date=heute - timedelta(days=days - 1 - i),
-            checked_in=ein.get(heute - timedelta(days=days - 1 - i), 0),
-            checked_out=aus.get(heute - timedelta(days=days - 1 - i), 0),
+            at=jetzt - schritt * i,
+            checked_in=ein.get(i, 0),
+            checked_out=aus.get(i, 0),
        )
-        for i in range(days)
+        for i in reversed(range(anzahl))
    ]
--- a/backend/app/schemas.py
+++ b/backend/app/schemas.py
@@ -431,11 +431,13 @@ class CategoryShare(BaseModel):


 class TimelinePoint(BaseModel):
-    date: date
+    # Zeitpunkt statt Datum: Bei kurzen Zeiträumen wird stündlich abgetastet,
+    # damit sichtbar wird, *wann* am Tag ein- und ausgelagert wurde.
+    at: datetime
    article_units: float


 class ActivityPoint(BaseModel):
-    date: date
+    at: datetime
    checked_in: int
    checked_out: int
--- a/backend/tests/test_dashboard.py
+++ b/backend/tests/test_dashboard.py
@@ -1,4 +1,4 @@
-from datetime import date, timedelta
+from datetime import date, timedelta  # noqa: F401  (date fuer die Zustands-Tests)

 import pytest

@@ -90,19 +90,34 @@ def test_by_category_bündelt_und_sortiert(db, user):


 # ----------------------------------------------------------------- Verlauf
+def test_schrittweite_haengt_am_zeitraum():
+    """Kurze Zeitraeume werden fein abgetastet, lange grob."""
+    assert dashboard._schrittweite(1) == timedelta(hours=1)
+    assert dashboard._schrittweite(2) == timedelta(hours=1)
+    assert dashboard._schrittweite(7) == timedelta(hours=6)
+    assert dashboard._schrittweite(90) == timedelta(days=1)
+    assert dashboard._schrittweite(365) == timedelta(days=7)
+
+
+def test_schrittweite_haelt_die_punktzahl_im_rahmen():
+    """Egal welcher Zeitraum – die Kurve bleibt zeichenbar."""
+    for tage in (1, 2, 7, 14, 30, 90, 180, 365, 730):
+        anzahl = timedelta(days=tage) / dashboard._schrittweite(tage)
+        assert 20 <= anzahl <= 180, f"{tage} Tage ergeben {anzahl} Punkte"
+
+
 def test_timeline_rechnet_bewegungen_zurueck(db, rice, user):
    """Der Verlauf entsteht rueckwaerts aus dem heutigen Bestand."""
-    check_in(db, rice, 4, "package", None, None, user)   # +4 Einheiten heute
-    check_out(db, rice, 1, "package", user)              # -1 Einheit heute
+    check_in(db, rice, 4, "package", None, None, user)   # +4 Einheiten jetzt
+    check_out(db, rice, 1, "package", user)              # -1 Einheit jetzt
    db.commit()

    punkte = dashboard.timeline(days=3, product_id=None, db=db, _=user)
-    assert len(punkte) == 3
-    # Heute: 3 Einheiten; die Tage davor lag nichts im Lager.
-    assert punkte[-1].date == date.today()
+    # Jetzt 3 Einheiten; vor dem Einlagern war das Lager leer.
    assert punkte[-1].article_units == 3
    assert punkte[0].article_units == 0
-    assert punkte[1].article_units == 0
+    # Aufsteigend sortiert, damit die Linie von links nach rechts laeuft.
+    assert punkte[0].at < punkte[-1].at


 def test_timeline_kann_auf_ein_produkt_eingegrenzt_werden(db, rice, user):
@@ -125,12 +140,13 @@ def test_activity_zaehlt_ein_und_auslagerungen(db, rice, user):
    check_out(db, rice, 1, "package", user)
    db.commit()

-    tage = dashboard.activity(days=3, db=db, _=user)
-    assert len(tage) == 3
-    heute = tage[-1]
-    assert heute.date == date.today()
-    assert heute.checked_in == 2
-    assert heute.checked_out == 1
+    abschnitte = dashboard.activity(days=3, db=db, _=user)
+    # Alles gerade eben passiert -> liegt im juengsten Abschnitt.
+    juengster = abschnitte[-1]
+    assert juengster.checked_in == 2
+    assert juengster.checked_out == 1
+    assert sum(a.checked_in for a in abschnitte) == 2
+    assert abschnitte[0].at < juengster.at


 # ---------------------------------------------------------------- Anordnung
--- a/web/src/dashboard/cards.jsx
+++ b/web/src/dashboard/cards.jsx
@@ -41,11 +41,18 @@ function Zustand({ fehler, daten, children, leer = "Keine Daten." }) {
  return children;
 }

-function kurzesDatum(iso) {
-  const d = new Date(`${iso}T00:00:00`);
-  return Number.isNaN(d.getTime())
-    ? iso
-    : d.toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit" });
+/**
+ * Beschriftung der Zeitachse. Bei kurzen Zeiträumen tastet der Server stündlich
+ * ab – dann ist die Uhrzeit die nützliche Angabe, sonst das Datum.
+ */
+function zeitLabel(iso, tage) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return String(iso);
+  if (tage <= 2) return d.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });
+  if (tage <= 14) {
+    return d.toLocaleString("de-DE", { day: "2-digit", month: "2-digit", hour: "2-digit" });
+  }
+  return d.toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit" });
 }

 // ---------------------------------------------------------------- Aktionen
@@ -272,11 +279,14 @@ function KarteKategorienSaeulen() {
  );
 }

-/** Zeitraum-Auswahl für die Verlaufskarten. */
-const ZEITRAEUME = [
-  // 1 Tag ergibt einen einzelnen Wert – das Diagramm zeigt dann die blanke Zahl
-  // statt einer Linie aus einem Punkt.
-  { tage: 1, label: "1 Tag" },
+/**
+ * Auswahlmöglichkeiten für die Verlaufskarten. Die Auswahl selbst sitzt im
+ * Kartenkopf (siehe Dashboard) – so bleibt die ganze Kartenhöhe dem Diagramm.
+ */
+export const ZEITRAEUME = [
+  // 1 Tag wird stündlich abgetastet; man sieht also, wann am Tag gelagert wurde.
+  { tage: 1, label: "24 Stunden" },
+  { tage: 2, label: "2 Tage" },
  { tage: 7, label: "7 Tage" },
  { tage: 30, label: "30 Tage" },
  { tage: 90, label: "90 Tage" },
@@ -284,44 +294,28 @@ const ZEITRAEUME = [
  { tage: 365, label: "1 Jahr" },
 ];

-function ZeitraumWahl({ wert, setzen }) {
-  return (
-    <select className="zeitraum" value={wert} onChange={(e) => setzen(Number(e.target.value))}>
-      {ZEITRAEUME.map((z) => <option key={z.tage} value={z.tage}>{z.label}</option>)}
-    </select>
-  );
-}
-
-function KarteBestandsverlauf() {
-  const [tage, setTage] = useState(90);
+function KarteBestandsverlauf({ tage = 90 }) {
  const { daten, fehler } = useDaten(() => api.dashboardTimeline(tage), [tage]);

+  if (fehler) return <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>;
+  if (!daten) return <div className="empty">Lädt…</div>;
+
  return (
-    <div className="card-stack">
-      <ZeitraumWahl wert={tage} setzen={setTage} />
-      {fehler ? (
-        <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>
-      ) : !daten ? (
-        <div className="empty">Lädt…</div>
-      ) : (
-        <Line
-          labels={daten.map((p) => kurzesDatum(p.date))}
-          serien={[{
-            name: "Artikeleinheiten",
-            color: tokenFarbe("--accent", "#3f51b5"),
-            werte: daten.map((p) => p.article_units),
-          }]}
-          einheit="Einheiten"
-        />
-      )}
-    </div>
+    <Line
+      labels={daten.map((p) => zeitLabel(p.at, tage))}
+      serien={[{
+        name: "Artikeleinheiten",
+        color: tokenFarbe("--accent", "#3f51b5"),
+        werte: daten.map((p) => p.article_units),
+      }]}
+      einheit="Einheiten"
+    />
  );
 }

-function KarteArtikelverlauf() {
+function KarteArtikelverlauf({ tage = 90 }) {
  const [produkte, setProdukte] = useState([]);
  const [gewaehlt, setGewaehlt] = useState("");
-  const [tage, setTage] = useState(90);
  const { daten, fehler } = useDaten(
    () => (gewaehlt ? api.dashboardTimeline(tage, gewaehlt) : Promise.resolve([])),
    [gewaehlt, tage],
@@ -337,18 +331,16 @@ function KarteArtikelverlauf() {

  return (
    <div className="card-stack">
-      <div className="card-toolbar">
-        <select value={gewaehlt} onChange={(e) => setGewaehlt(e.target.value)}>
-          <option value="">– Artikel wählen –</option>
-          {produkte.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
-        </select>
-        <ZeitraumWahl wert={tage} setzen={setTage} />
-      </div>
+      <select value={gewaehlt} onChange={(e) => setGewaehlt(e.target.value)}
+        style={{ marginTop: 0 }}>
+        <option value="">– Artikel wählen –</option>
+        {produkte.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
+      </select>
      {fehler ? (
        <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>
      ) : (
        <Line
-          labels={(daten || []).map((p) => kurzesDatum(p.date))}
+          labels={(daten || []).map((p) => zeitLabel(p.at, tage))}
          serien={[{
            name: "Bestand",
            color: tokenFarbe("--accent", "#3f51b5"),
@@ -361,28 +353,21 @@ function KarteArtikelverlauf() {
  );
 }

-function KarteBewegungsverlauf() {
-  const [tage, setTage] = useState(30);
+function KarteBewegungsverlauf({ tage = 30 }) {
  const { daten, fehler } = useDaten(() => api.dashboardActivity(tage), [tage]);

+  if (fehler) return <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>;
+  if (!daten) return <div className="empty">Lädt…</div>;
+
  return (
-    <div className="card-stack">
-      <ZeitraumWahl wert={tage} setzen={setTage} />
-      {fehler ? (
-        <div className="alert error"><Icon name="alert" size={16} />{fehler}</div>
-      ) : !daten ? (
-        <div className="empty">Lädt…</div>
-      ) : (
-        <Line
-          labels={daten.map((p) => kurzesDatum(p.date))}
-          serien={[
-            { name: "Eingelagert", color: tokenFarbe("--ok", "#2e7d55"), werte: daten.map((p) => p.checked_in) },
-            { name: "Ausgelagert", color: tokenFarbe("--warn", "#b06f14"), werte: daten.map((p) => p.checked_out) },
-          ]}
-          einheit="Vorgänge"
-        />
-      )}
-    </div>
+    <Line
+      labels={daten.map((p) => zeitLabel(p.at, tage))}
+      serien={[
+        { name: "Eingelagert", color: tokenFarbe("--ok", "#2e7d55"), werte: daten.map((p) => p.checked_in) },
+        { name: "Ausgelagert", color: tokenFarbe("--warn", "#b06f14"), werte: daten.map((p) => p.checked_out) },
+      ]}
+      einheit="Vorgänge"
+    />
  );
 }

@@ -465,19 +450,19 @@ export const KARTEN = {
  "stock-timeline": {
    titel: "Bestandsverlauf", icon: "history", vorschau: "linie",
    beschreibung: "Artikeleinheiten im Lager über 90 Tage",
-    standard: { w: 8, h: 6 }, min: { w: 4, h: 5 },
+    zeitraum: 90, standard: { w: 8, h: 6 }, min: { w: 4, h: 5 },
    komponente: KarteBestandsverlauf,
  },
  "product-timeline": {
    titel: "Verlauf eines Artikels", icon: "package", vorschau: "linie",
    beschreibung: "Ein wählbarer Artikel über 90 Tage",
-    standard: { w: 8, h: 7 }, min: { w: 4, h: 6 },
+    zeitraum: 90, standard: { w: 8, h: 7 }, min: { w: 4, h: 6 },
    komponente: KarteArtikelverlauf,
  },
  "activity-timeline": {
    titel: "Ein- und Auslagerungen", icon: "history", vorschau: "linien",
    beschreibung: "Vorgänge je Tag über 30 Tage",
-    standard: { w: 8, h: 6 }, min: { w: 4, h: 5 },
+    zeitraum: 30, standard: { w: 8, h: 6 }, min: { w: 4, h: 5 },
    komponente: KarteBewegungsverlauf,
  },
 };
--- a/web/src/pages/Dashboard.jsx
+++ b/web/src/pages/Dashboard.jsx
@@ -5,7 +5,7 @@ import { useAuth } from "../auth";
 import Icon from "../components/Icon";
 import { useConfirm } from "../confirm";
 import { useToast } from "../toast";
-import { KARTEN, KARTEN_IDS } from "../dashboard/cards";
+import { KARTEN, KARTEN_IDS, ZEITRAEUME } from "../dashboard/cards";
 import Vorschau from "../dashboard/Vorschau";

 const Raster = WidthProvider(GridLayout);
@@ -158,9 +158,32 @@ export default function Dashboard() {
    }
  }

-  /** Nur die Rasterfelder speichern – react-grid-layout hängt viel Beiwerk an. */
+  /** Nur die Rasterfelder speichern – react-grid-layout hängt viel Beiwerk an.
+   *  Der gewählte Zeitraum gehört zur Karte und wird mitgespeichert. */
  function schlank(liste) {
-    return (liste || []).map(({ i, x, y, w, h }) => ({ i, x, y, w, h }));
+    return (liste || []).map(({ i, x, y, w, h, tage }) => (
+      tage ? { i, x, y, w, h, tage } : { i, x, y, w, h }
+    ));
+  }
+
+  /**
+   * Zeitraum einer Verlaufskarte ändern. Außerhalb des Bearbeitungsmodus wird
+   * die Wahl still gespeichert – sonst wäre sie nach dem nächsten Laden wieder
+   * weg, ohne dass es einen sichtbaren Speichern-Knopf gäbe.
+   */
+  async function setzeZeitraum(id, tage) {
+    const geaendert = aktuell.map((k) => (k.i === id ? { ...k, tage } : k));
+    if (bearbeiten) {
+      setEntwurf(geaendert);
+      return;
+    }
+    setLayout(geaendert);
+    if (erzwungen) return;
+    try {
+      await api.saveDashboardLayout(schlank(geaendert));
+    } catch {
+      /* Nicht speichern zu können ist hier kein Grund, die Ansicht zu stören. */
+    }
  }

  return (
@@ -244,6 +267,17 @@ export default function Dashboard() {
              <div className="dash-card-head">
                <Icon name={karte.icon} size={16} />
                <h2>{karte.titel}</h2>
+                {/* Zeitraum gehört in den Kopf: So bleibt die volle Kartenhöhe
+                    dem Diagramm. onMouseDown stoppt das Ziehen der Karte. */}
+                {karte.zeitraum && (
+                  <select className="zeitraum" value={eintrag.tage ?? karte.zeitraum}
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onChange={(e) => setzeZeitraum(eintrag.i, Number(e.target.value))}>
+                    {ZEITRAEUME.map((z) => (
+                      <option key={z.tage} value={z.tage}>{z.label}</option>
+                    ))}
+                  </select>
+                )}
                {bearbeiten && (
                  <button className="btn-icon danger" title="Karte entfernen"
                    onMouseDown={(e) => e.stopPropagation()}
@@ -252,7 +286,9 @@ export default function Dashboard() {
                  </button>
                )}
              </div>
-              <div className="dash-card-body"><Inhalt /></div>
+              <div className="dash-card-body">
+                <Inhalt tage={eintrag.tage ?? karte.zeitraum} />
+              </div>
            </section>
          );
        })}
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -554,9 +554,14 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 .karten-titel { font-weight: 600; font-size: 0.875rem; }

 /* Auswahlfelder in Karten (Zeitraum, Artikel) */
-.card-toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
-.card-toolbar select { margin-top: 0; width: auto; min-width: 0; flex: 1 1 140px; }
-select.zeitraum { margin-top: 0; width: auto; min-width: 0; flex: 0 0 auto; align-self: flex-start; }
+/* Zeitraum-Auswahl sitzt im Kartenkopf – klein und zurueckhaltend, damit sie
+   die Ueberschrift nicht ueberlagert. */
+select.zeitraum {
+  margin-top: 0; width: auto; min-width: 0; flex: 0 0 auto;
+  padding: 3px 6px; font-size: 0.78rem;
+  color: var(--muted); border-color: var(--border);
+}
+select.zeitraum:hover { color: var(--text); }

 /* ---------- Startseite: Kartentypen ---------- */
 .card-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }