scrollbar added

MenamAfzal · MenamAfzal · commit 6f6668411923 · 2024-08-06T13:40:42.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
@@ -27,12 +27,16 @@ import { AutoHeightControl } from "@lowcoder-ee/index.sdk";
  * JsonEditor Comp
  */
 
-const Wrapper = styled.div<{$height:boolean}>`
+const Wrapper = styled.div<{$height: boolean}>`
   background-color: #fff;
   border: 1px solid #d7d9e0;
   border-radius: 4px;
-  overflow: auto;
-  height: ${props=>props.$height?'100%':'300px'};
+  overflow: scroll;
+  height: ${(props) => (props.$height ? '100%' : '300px')};
+  &::-webkit-scrollbar {
+    width: 16px;
+    display:block !important;
+  }
 `;
 
 /**
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
@@ -41,15 +41,19 @@ const bgColorMap = {
 const JsonExplorerContainer = styled.div<{
   $theme: keyof typeof bgColorMap;
   $animationStyle: AnimationStyleType;
-  $height: boolean
+  $height: boolean;
 }>`
   ${(props) => props.$animationStyle}
-  height: ${props => props.$height ?'100%':'300px'};
+  height: ${(props) => (props.$height ? '100%' : '300px')};
   overflow-y: scroll;
-  background-color: ${(props) => bgColorMap[props.$theme] || "#ffffff"};
+  background-color: ${(props) => bgColorMap[props.$theme] || '#ffffff'};
   border: 1px solid #d7d9e0;
   border-radius: 4px;
   padding: 10px;
+  &::-webkit-scrollbar {
+    width: 16px;
+    display: block !important;
+  }
 `;
 
 let JsonExplorerTmpComp = (function () {
