- Styling: removed scrollbar-thin class and updated panel to use styled scroll for body.

Author: jnevius

Rock.JavaScript.Obsidian/Framework/Controls/categoryTree.obs

@@ -1,6 +1,6 @@
 <!-- Copyright by the Spark Development Network; Licensed under the Rock Community License -->
 <template>
-    <div class="scrollbar-thin picker-body border border-gray-300 rounded overflow-visible overflow-y-auto position-relative z-0" :style="`height: ${height}`">
+    <div class="picker-body border border-gray-300 rounded overflow-visible overflow-y-auto position-relative z-0" :style="`height: ${height}`">
         <TreeList v-model="internalValues"
                   :multiple="multiple"
                   :provider="itemProvider"
@@ -13,35 +13,6 @@
     </div>
 </template>
 
-<style scoped>
-.scrollbar-thin {
-    scrollbar-width: thin;
-}
-
-.scrollbar-thin::-webkit-scrollbar {
-    width: 8px;
-    border-radius: 4px;
-}
-
-.scrollbar-thin::-webkit-scrollbar-button {
-    display: none;
-}
-
-.scrollbar-thin::-webkit-scrollbar-thumb {
-    background-color: #858585;
-    border-radius: 4px;
-}
-
-.scrollbar-thin::-webkit-scrollbar-thumb:hover {
-    background-color: #6b6b6b;
-}
-
-.scrollbar-thin::-webkit-scrollbar-track {
-    background-color: #f0f0f0;
-    border-radius: 4px;
-}
-</style>
-
 <script setup lang="ts">
     import { type PropType, ref, watch, watchEffect } from "vue";
     import TreeList from "./treeList.obs";

Rock.JavaScript.Obsidian/Framework/Controls/pageTree.obs

@@ -1,6 +1,6 @@
 <!-- Copyright by the Spark Development Network; Licensed under the Rock Community License -->
 <template>
-    <div class="scrollbar-thin picker-body border border-gray-300 rounded overflow-visible overflow-y-auto position-relative z-0" :style="`height: ${height}`">
+    <div class="picker-body border border-gray-300 rounded overflow-visible overflow-y-auto position-relative z-0" :style="`height: ${height}`">
         <TreeList v-model="internalValues"
                   :multiple="multiple"
                   :provider="itemProvider"
@@ -13,35 +13,6 @@
     </div>
 </template>
 
-<style scoped>
-.scrollbar-thin {
-    scrollbar-width: thin;
-}
-
-.scrollbar-thin::-webkit-scrollbar {
-    width: 8px;
-    border-radius: 4px;
-}
-
-.scrollbar-thin::-webkit-scrollbar-button {
-    display: none;
-}
-
-.scrollbar-thin::-webkit-scrollbar-thumb {
-    background-color: #858585;
-    border-radius: 4px;
-}
-
-.scrollbar-thin::-webkit-scrollbar-thumb:hover {
-    background-color: #6b6b6b;
-}
-
-.scrollbar-thin::-webkit-scrollbar-track {
-    background-color: #f0f0f0;
-    border-radius: 4px;
-}
-</style>
-
 <script setup lang="ts">
     import { type PropType, ref, watch, watchEffect } from "vue";
     import { SiteType } from "@Obsidian/Enums/Cms/siteType";

Rock.JavaScript.Obsidian/Framework/Controls/panel.obs

@@ -406,7 +406,7 @@
     });
 
     const panelBodyClass = computed<string[]>(() => {
-        const classes = ["panel-body"];
+        const classes = ["panel-body styled-scroll"];
 
         if (props.panelBodyCssClass) {
             classes.push(props.panelBodyCssClass);