💄 Align tokens panel vertically to the top

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}]))])

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);
+}

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?