From 0e81dfaedb5bebca82d13249d91f604a54f584d5 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Thu, 11 Dec 2025 18:22:54 +0100
Subject: [PATCH] :bug: Fix inspect tab styles on viewer

---
 frontend/src/app/main/ui/inspect/attributes.scss           | 7 +++++--
 frontend/src/app/main/ui/inspect/right_sidebar.cljs        | 1 +
 frontend/src/app/main/ui/inspect/right_sidebar.scss        | 4 ----
 frontend/src/app/main/ui/inspect/styles.cljs               | 5 +++--
 frontend/src/app/main/ui/inspect/styles.scss               | 6 +++++-
 .../main/ui/inspect/styles/property_detail_copiable.scss   | 1 +
 6 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/main/ui/inspect/attributes.scss b/frontend/src/app/main/ui/inspect/attributes.scss
index 7735b10010..4eafa389eb 100644
--- a/frontend/src/app/main/ui/inspect/attributes.scss
+++ b/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);
 }
diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.cljs b/frontend/src/app/main/ui/inspect/right_sidebar.cljs
index fb8a607aaf..03ccf34ee0 100644
--- a/frontend/src/app/main/ui/inspect/right_sidebar.cljs
+++ b/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
diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.scss b/frontend/src/app/main/ui/inspect/right_sidebar.scss
index d3dede9ffa..435a9d01fa 100644
--- a/frontend/src/app/main/ui/inspect/right_sidebar.scss
+++ b/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;
diff --git a/frontend/src/app/main/ui/inspect/styles.cljs b/frontend/src/app/main/ui/inspect/styles.cljs
index 4c46bf393a..72df40bdbe 100644
--- a/frontend/src/app/main/ui/inspect/styles.cljs
+++ b/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
diff --git a/frontend/src/app/main/ui/inspect/styles.scss b/frontend/src/app/main/ui/inspect/styles.scss
index 1c1c4e6871..0680351132 100644
--- a/frontend/src/app/main/ui/inspect/styles.scss
+++ b/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
 }
diff --git a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss b/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss
index 413f1437f4..c1ddecdf4e 100644
--- a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss
+++ b/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);
 }