🐛 Fix problems in inspect tab

frontend/src/app/main/ui/components/color_bullet_new.cljs

@@ -17,7 +17,9 @@
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
   [{:keys [color on-click mini? area]}]
-  (let [on-click (mf/use-fn
+  (let [read-only? (nil? on-click)
+        on-click
+        (mf/use-fn
          (mf/deps color on-click)
          (fn [event]
            (when (fn? on-click)
@@ -39,7 +41,9 @@
                   :is-not-library-color (nil? id)
                   :is-gradient (some? gradient)
                   :is-transparent (and opacity (> 1 opacity))
-                  :grid-area area)
+                  :grid-area area
+                  :read-only read-only?)
+          :data-readonly (str read-only?)
           :on-click on-click}
 
          (cond

frontend/src/app/main/ui/components/color_bullet_new.scss

@@ -64,7 +64,7 @@
     height: 100%;
     background-color: var(--color-bullet-background-color);
   }
-  &:hover {
+  &:hover:not(.read-only) {
     border: $s-2 solid var(--color-bullet-border-color-selected);
   }
 }

frontend/src/app/main/ui/viewer/inspect/code.cljs

@@ -261,7 +261,10 @@
                           :collapsabled-icon true
                           :rotated collapsed-css?)}
            i/arrow-refactor]]
-         [:span {:class (stl/css :code-lang)} "CSS"]
+
+         [:& select {:default-value style-type
+                     :class (stl/css :code-lang-select)
+                     :options [{:label "CSS" :value "css"}]}]
 
          [:div {:class (stl/css :action-btns)}
           [:button {:class (stl/css :expand-button)

frontend/src/app/main/ui/viewer/inspect/code.scss

@@ -17,12 +17,22 @@
     }
   }
   .code-block {
+    font-size: $fs-14;
     padding: 0 $s-4 $s-8 0;
+
+    pre {
+      border-radius: $br-8;
+      border: $s-1 solid $db-secondary;
+      padding: $s-16;
+    }
+  }
+
   .code-row-lang {
     display: flex;
     justify-content: space-between;
     gap: $s-4;
     width: 100%;
+  }
   .code-lang {
     @include tabTitleTipography;
     display: flex;
@@ -43,21 +53,17 @@
       }
     }
   }
-
   .code-lang-select {
     @include tabTitleTipography;
-        width: $s-92;
+    width: $s-72;
     border: $s-1 solid transparent;
     background-color: transparent;
     color: var(--menu-foreground-color-disabled);
   }
-    }
-
   .code-row-display {
     margin-bottom: $s-8;
   }
 }
-}
 
 .toggle-btn {
   @include buttonStyle;

frontend/src/app/main/ui/workspace/right_header.cljs

@@ -203,6 +203,8 @@
 
      [:& persistence-state-widget]
 
+     [:div {:class (stl/css :separator)}]
+
 
      [:div {:class (stl/css :zoom-section)}
       [:& zoom-widget-workspace

frontend/src/app/main/ui/workspace/right_header.scss

@@ -11,7 +11,7 @@
   align-items: center;
   min-width: $s-256;
   padding: $s-8;
-  gap: $s-2;
+  gap: $s-8;
   background-color: var(--panel-background-color);
   .users-section {
     position: relative;
@@ -19,6 +19,9 @@
     max-width: $s-72;
     padding: $s-4 $s-6;
   }
+  .separator {
+    flex: 1;
+  }
   .zoom-section {
     .zoom-widget {
       @include buttonStyle;
@@ -27,6 +30,7 @@
       justify-content: center;
       height: $s-28;
       max-width: $s-48;
+      width: $s-48;
       border-radius: $br-8;
       .label {
         @include titleTipography;

frontend/src/app/main/ui/workspace/viewport/top_bar.cljs

@@ -35,9 +35,7 @@
          [:& i18n/tr-html {:tag-name "span"
                            :label "workspace.top-bar.read-only"}]]
         [:button {:class (stl/css :done-btn)
-                  :on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]
-        [:button {:class (stl/css :close-btn)
-                  :on-click handle-close-view-mode} i/close-refactor]]]
+                  :on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]]]
 
       ;; OLD
       [:div.viewport-actions

frontend/src/app/main/ui/workspace/viewport/top_bar.scss

@@ -22,7 +22,7 @@
     margin-left: -50%;
     padding: $s-8;
     pointer-events: initial;
-    width: $s-512;
+    width: $s-400;
   }
 
   .viewport-actions-title {