From 4970ae3eb412607e18fccaf681749c39c19e0d54 Mon Sep 17 00:00:00 2001
From: Xavier Julian <xavier.julian@kaleidos.net>
Date: Mon, 15 Sep 2025 16:32:14 +0200
Subject: [PATCH] :lipstick: Align tokens panel vertically to the top

---
 .../main/ui/inspect/styles/panels/tokens_panel.cljs   |  2 +-
 .../main/ui/inspect/styles/panels/tokens_panel.scss   | 11 +++++++++++
 .../app/main/ui/inspect/styles/properties_row.cljs    |  4 ++--
 3 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.scss

diff --git a/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs b/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs
index 415350b769..4e327822a8 100644
--- a/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs
+++ b/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs
@@ -16,6 +16,6 @@
                             :detail theme-list}]))
    (when (seq set-names)
      (let [sets-list (str/join ", " set-names)]
-       [:> properties-row* {:class (stl/css :token-theme)
+       [:> properties-row* {:class (stl/css :token-sets)
                             :term (tr "inspect.tabs.styles.panel.tokens.active-sets")
                             :detail sets-list}]))])
diff --git a/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.scss b/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.scss
new file mode 100644
index 0000000000..6478b564b4
--- /dev/null
+++ b/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.scss
@@ -0,0 +1,11 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+.token-theme,
+.token-sets {
+  align-items: flex-start;
+  padding-block: var(--sp-s);
+}
diff --git a/frontend/src/app/main/ui/inspect/styles/properties_row.cljs b/frontend/src/app/main/ui/inspect/styles/properties_row.cljs
index 4fc1ee3822..bb6a6bb796 100644
--- a/frontend/src/app/main/ui/inspect/styles/properties_row.cljs
+++ b/frontend/src/app/main/ui/inspect/styles/properties_row.cljs
@@ -19,7 +19,7 @@
 
 (mf/defc properties-row*
   {::mf/schema schema:properties-row}
-  [{:keys [term detail token property copiable]}]
+  [{:keys [class term detail token property copiable]}]
   (let [copiable? (or copiable false)
         detail? (not (or (nil? detail) (str/blank? detail)))
         detail (if detail? detail "-")
@@ -35,7 +35,7 @@
            (reset! copied* true)
            (wapi/write-to-clipboard copiable-value)
            (tm/schedule 1000 #(reset! copied* false))))]
-    [:dl {:class (stl/css :property-row)}
+    [:dl {:class [(stl/css :property-row) class]}
      [:dt {:class (stl/css :property-term)} term]
      [:dd {:class (stl/css :property-detail)}
       (if copiable?