🐛 Fix inspect tab styles on viewer

frontend/src/app/main/ui/inspect/attributes.scss

@@ -12,14 +12,17 @@
   flex-direction: column;
   gap: var(--sp-l);
   width: 100%;
-  height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
+  max-height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
   padding-top: var(--sp-s);
+  padding-inline: var(--sp-m);
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-gutter: stable;
+  background-color: var(--low-emphasis-background);
 }
 
 .workspace-element-options {
-  height: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
+  max-height: calc(100vh - px2rem(180)); // TODO: Fix this hardcoded value
   padding-inline: var(--sp-m);
+  background-color: var(--low-emphasis-background);
 }

frontend/src/app/main/ui/inspect/right_sidebar.cljs

@@ -185,6 +185,7 @@
               [:> styles-tab* {:color-space color-space
                                :objects objects
                                :shapes shapes
+                               :from from
                                :libraries libraries
                                :file-id file-id}]
               :computed

frontend/src/app/main/ui/inspect/right_sidebar.scss

@@ -24,10 +24,6 @@
   }
 }
 
-.viewer-code {
-  padding-inline-start: var(--sp-s);
-}
-
 .tool-windows {
   block-size: 100%;
   display: grid;

frontend/src/app/main/ui/inspect/styles.cljs

@@ -90,7 +90,7 @@
     :multiple))
 
 (mf/defc styles-tab*
-  [{:keys [color-space shapes libraries objects file-id]}]
+  [{:keys [color-space shapes libraries objects file-id from]}]
   (let [data               (dm/get-in libraries [file-id :data])
         first-shape        (first shapes)
         first-component    (ctkl/get-component data (:component-id first-shape))
@@ -131,7 +131,8 @@
          (mf/deps shorthands*)
          (fn [shorthand]
            (swap! shorthands* assoc (:panel shorthand) (:property shorthand))))]
-    [:ol {:class (stl/css :styles-tab) :aria-label (tr "labels.styles")}
+    [:ol {:class (stl/css-case :styles-tab true
+                               :styles-tab-workspace (= from :workspace)) :aria-label (tr "labels.styles")}
      ;;  TOKENS PANEL
      (when (or (seq active-themes) (seq active-sets))
        [:li

frontend/src/app/main/ui/inspect/styles.scss

@@ -7,5 +7,9 @@
 @use "ds/_utils.scss" as *;
 
 .styles-tab {
-  block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
+  block-size: calc(100vh - px2rem(140)); // TODO: Fix this hardcoded value
+}
+
+.styles-tab-workspace {
+  block-size: calc(100vh - px2rem(180)); // TODO: Fix this hardcoded value
 }

frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss

@@ -60,6 +60,7 @@
 }
 
 .property-detail-text {
+  @include use-typography("body-small");
   color: var(--detail-color);
 }