From 5dc4d57c012911456da77b8065a436bf04e29883 Mon Sep 17 00:00:00 2001
From: Amaresh  S M <30730124+amareshsm@users.noreply.github.com>
Date: Thu, 3 Oct 2024 23:34:32 +0530
Subject: [PATCH 1/4] fix: minor glitch in markdown ast preview

---
 src/components/tree-entry.tsx | 53 ++++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/components/tree-entry.tsx b/src/components/tree-entry.tsx
index d2f3c83..c19e693 100644
--- a/src/components/tree-entry.tsx
+++ b/src/components/tree-entry.tsx
@@ -91,36 +91,39 @@ export const TreeEntry: FC<TreeEntryProperties> = ({ data, path }) => {
 	const [key, value] = data;
 	const [open, setOpen] = useState(false);
 	const Icon = open ? MinusSquareIcon : PlusSquareIcon;
-
 	const toggleOpen = () => setOpen(!open);
+	const isObject = typeof value === "object" && value !== null;
+	const isExpandable =
+		isObject &&
+		(Array.isArray(value)
+			? value.length > 0
+			: Object.keys(value).length > 0);
+	const values = renderValue(value);
+	const renderParts = values.map((part, partIndex) => (
+		<span
+			key={partIndex}
+			className={`${values.length === 1 ? "flex-1" : ""} ${partIndex ? "text-muted-foreground" : "text-primary"}`}
+		>
+			{part}
+		</span>
+	));
 
 	return (
 		<>
 			<div className="flex items-center gap-3">
-				{(typeof value === "object" &&
-					Object.values(value ?? {}).length) ||
-				(Array.isArray(value) && value.length) ? (
-					<button
-						onClick={toggleOpen}
-						aria-label="Toggle"
-						type="button"
-					>
-						<Icon size={16} className="text-muted-foreground" />
-					</button>
-				) : (
-					<div className="w-4 h-4" />
-				)}
-				{key && <span>{key}</span>}
-				{renderValue(value).map((part, partIndex) => (
-					<span
-						key={partIndex}
-						className={
-							partIndex ? "text-muted-foreground" : "text-primary"
-						}
-					>
-						{part}
-					</span>
-				))}
+				<>
+					{isExpandable && (
+						<button
+							onClick={toggleOpen}
+							aria-label="Toggle"
+							type="button"
+						>
+							<Icon size={16} className="text-muted-foreground" />
+						</button>
+					)}
+					{key && <span className="flex-none">{key}</span>}
+					{renderParts}
+				</>
 			</div>
 			{open ? (
 				<SanitizeValue

From a4eb2801e788160ea0988c8a85b09c49f938eb57 Mon Sep 17 00:00:00 2001
From: Amaresh  S M <30730124+amareshsm@users.noreply.github.com>
Date: Thu, 3 Oct 2024 23:46:08 +0530
Subject: [PATCH 2/4] Update tree-entry.tsx

---
 src/components/tree-entry.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/tree-entry.tsx b/src/components/tree-entry.tsx
index c19e693..d5495d2 100644
--- a/src/components/tree-entry.tsx
+++ b/src/components/tree-entry.tsx
@@ -112,7 +112,7 @@ export const TreeEntry: FC<TreeEntryProperties> = ({ data, path }) => {
 		<>
 			<div className="flex items-center gap-3">
 				<>
-					{isExpandable && (
+					{isExpandable ? (
 						<button
 							onClick={toggleOpen}
 							aria-label="Toggle"
@@ -120,6 +120,8 @@ export const TreeEntry: FC<TreeEntryProperties> = ({ data, path }) => {
 						>
 							<Icon size={16} className="text-muted-foreground" />
 						</button>
+					) : (
+						<div className="w-4 h-4"></div>
 					)}
 					{key && <span className="flex-none">{key}</span>}
 					{renderParts}

From 9892790a8899174dde93cb145cabc5788936b574 Mon Sep 17 00:00:00 2001
From: Amaresh  S M <30730124+amareshsm@users.noreply.github.com>
Date: Sat, 5 Oct 2024 01:33:16 +0530
Subject: [PATCH 3/4] add minimum height and margin

---
 .../ast/javascript-ast-tree-item.tsx          |  4 +--
 src/components/ast/json-ast-tree-item.tsx     |  4 +--
 src/components/ast/markdown-ast-tree-item.tsx |  4 +--
 src/components/scope/scope-item.tsx           |  4 +--
 src/components/tree-entry.tsx                 | 36 ++++++++++---------
 src/components/ui/accordion.tsx               |  2 +-
 6 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/components/ast/javascript-ast-tree-item.tsx b/src/components/ast/javascript-ast-tree-item.tsx
index dec7a27..d3e12b0 100644
--- a/src/components/ast/javascript-ast-tree-item.tsx
+++ b/src/components/ast/javascript-ast-tree-item.tsx
@@ -20,12 +20,12 @@ export const JavascriptAstTreeItem: FC<JavascriptAstTreeItemProperties> = ({
 }) => (
 	<AccordionItem
 		value={`${index}-${data.type}`}
-		className="border rounded-lg overflow-hidden"
+		className="border rounded-lg overflow-hidden min-w-80"
 	>
 		<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
 			{data.type}
 		</AccordionTrigger>
-		<AccordionContent className="p-4 border-t">
+		<AccordionContent className="p-4 overflow-x-scroll mr-2">
 			<div className="space-y-1">
 				{Object.entries(data).map(item => (
 					<TreeEntry key={item[0]} data={item} />
diff --git a/src/components/ast/json-ast-tree-item.tsx b/src/components/ast/json-ast-tree-item.tsx
index 523120a..49a740d 100644
--- a/src/components/ast/json-ast-tree-item.tsx
+++ b/src/components/ast/json-ast-tree-item.tsx
@@ -22,12 +22,12 @@ export const JsonAstTreeItem: FC<JsonAstTreeItemProperties> = ({
 }) => (
 	<AccordionItem
 		value={`${index}-${data.type}`}
-		className="border rounded-lg overflow-hidden"
+		className="border rounded-lg overflow-hidden min-w-80"
 	>
 		<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
 			{data.type}
 		</AccordionTrigger>
-		<AccordionContent className="p-4 border-t">
+		<AccordionContent className="p-4 overflow-x-scroll mr-2">
 			<div className="space-y-1">
 				{Object.entries(data).map(item => (
 					<TreeEntry key={item[0]} data={item} />
diff --git a/src/components/ast/markdown-ast-tree-item.tsx b/src/components/ast/markdown-ast-tree-item.tsx
index 1759861..aa80424 100644
--- a/src/components/ast/markdown-ast-tree-item.tsx
+++ b/src/components/ast/markdown-ast-tree-item.tsx
@@ -22,12 +22,12 @@ export const MarkdownAstTreeItem: FC<MarkdownAstTreeItemProperties> = ({
 }) => (
 	<AccordionItem
 		value={`${index}-${data.type}`}
-		className="border rounded-lg overflow-hidden"
+		className="border rounded-lg overflow-hidden min-w-80"
 	>
 		<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
 			{data.type}
 		</AccordionTrigger>
-		<AccordionContent className="p-4 border-t">
+		<AccordionContent className="p-4 overflow-x-scroll mr-2">
 			<div className="space-y-1">
 				{Object.entries(data).map(item => (
 					<TreeEntry key={item[0]} data={item} />
diff --git a/src/components/scope/scope-item.tsx b/src/components/scope/scope-item.tsx
index 01edc0e..150aba2 100644
--- a/src/components/scope/scope-item.tsx
+++ b/src/components/scope/scope-item.tsx
@@ -44,12 +44,12 @@ export const ScopeItem: FC<ScopeItemProperties> = ({
 	return (
 		<AccordionItem
 			value={path + "." + index + "." + key}
-			className="border rounded-lg overflow-hidden"
+			className="border rounded-lg overflow-hidden min-w-80"
 		>
 			<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
 				{isArray && `${Math.max(index, 0)}.`} {key}
 			</AccordionTrigger>
-			<AccordionContent className="p-4 border-t">
+			<AccordionContent className="p-4 overflow-x-scroll mr-2">
 				<div className="space-y-1">
 					{properties.map((item, index) => (
 						<TreeEntry
diff --git a/src/components/tree-entry.tsx b/src/components/tree-entry.tsx
index d5495d2..f02d8ee 100644
--- a/src/components/tree-entry.tsx
+++ b/src/components/tree-entry.tsx
@@ -4,6 +4,7 @@ import { renderValue } from "@/lib/render-value";
 import { ScopeItem } from "./scope/scope-item";
 import { Reference, Variable, Scope } from "eslint-scope";
 import type { FC, ReactNode } from "react";
+import { cn } from "@/lib/utils";
 
 type TreeEntryProperties = {
 	readonly data: [string, unknown];
@@ -102,7 +103,11 @@ export const TreeEntry: FC<TreeEntryProperties> = ({ data, path }) => {
 	const renderParts = values.map((part, partIndex) => (
 		<span
 			key={partIndex}
-			className={`${values.length === 1 ? "flex-1" : ""} ${partIndex ? "text-muted-foreground" : "text-primary"}`}
+			className={cn(
+				"flex-none",
+				partIndex ? "text-muted-foreground" : "text-primary",
+				values.length === 1 && "flex-1",
+			)}
 		>
 			{part}
 		</span>
@@ -111,21 +116,20 @@ export const TreeEntry: FC<TreeEntryProperties> = ({ data, path }) => {
 	return (
 		<>
 			<div className="flex items-center gap-3">
-				<>
-					{isExpandable ? (
-						<button
-							onClick={toggleOpen}
-							aria-label="Toggle"
-							type="button"
-						>
-							<Icon size={16} className="text-muted-foreground" />
-						</button>
-					) : (
-						<div className="w-4 h-4"></div>
-					)}
-					{key && <span className="flex-none">{key}</span>}
-					{renderParts}
-				</>
+				{isExpandable ? (
+					<button
+						onClick={toggleOpen}
+						aria-label="Toggle"
+						type="button"
+						className="flex-none"
+					>
+						<Icon size={16} className="text-muted-foreground" />
+					</button>
+				) : (
+					<div className="w-4 h-4"></div>
+				)}
+				{key && <span className="flex-none">{key}</span>}
+				{renderParts}
 			</div>
 			{open ? (
 				<SanitizeValue
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index 86da12f..83e9231 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -46,7 +46,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
 	<AccordionPrimitive.Content
 		ref={ref}
-		className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+		className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down border-t"
 		{...props}
 	>
 		<div className={cn("pb-4 pt-0", className)}>{children}</div>

From 86f341d4f280ffdda5b61b2cb0d90ffb539f489b Mon Sep 17 00:00:00 2001
From: Amaresh  S M <30730124+amareshsm@users.noreply.github.com>
Date: Fri, 13 Dec 2024 00:35:45 +0530
Subject: [PATCH 4/4] fix scrollbar styles

---
 .../ast/javascript-ast-tree-item.tsx          |  2 +-
 src/components/ast/json-ast-tree-item.tsx     |  2 +-
 src/components/ast/markdown-ast-tree-item.tsx |  2 +-
 src/components/scope/scope-item.tsx           |  2 +-
 tailwind.config.js                            | 33 +++++++++++--------
 5 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/ast/javascript-ast-tree-item.tsx b/src/components/ast/javascript-ast-tree-item.tsx
index db0fbb5..c4ee0d6 100644
--- a/src/components/ast/javascript-ast-tree-item.tsx
+++ b/src/components/ast/javascript-ast-tree-item.tsx
@@ -25,7 +25,7 @@ export const JavascriptAstTreeItem: FC<JavascriptAstTreeItemProperties> = ({
 		<AccordionTrigger className="text-sm bg-card px-4 py-3 capitalize">
 			{data.type}
 		</AccordionTrigger>
-		<AccordionContent className="p-4 overflow-x-scroll mr-2">
+		<AccordionContent className="p-4 overflow-x-auto mr-2">
 			<div className="space-y-1">
 				{Object.entries(data).map(item => (
 					<TreeEntry key={item[0]} data={item} />
diff --git a/src/components/ast/json-ast-tree-item.tsx b/src/components/ast/json-ast-tree-item.tsx
index a472e9f..c42a294 100644
--- a/src/components/ast/json-ast-tree-item.tsx
+++ b/src/components/ast/json-ast-tree-item.tsx
@@ -27,7 +27,7 @@ export const JsonAstTreeItem: FC<JsonAstTreeItemProperties> = ({
 		<AccordionTrigger className="text-sm bg-card px-4 py-3 capitalize">
 			{data.type}
 		</AccordionTrigger>
-		<AccordionContent className="p-4 overflow-x-scroll mr-2">
+		<AccordionContent className="p-4 overflow-x-auto mr-2">
 			<div className="space-y-1">
 				{Object.entries(data).map(item => (
 					<TreeEntry key={item[0]} data={item} />
diff --git a/src/components/ast/markdown-ast-tree-item.tsx b/src/components/ast/markdown-ast-tree-item.tsx
index 8df6fa4..1bebf71 100644
--- a/src/components/ast/markdown-ast-tree-item.tsx
+++ b/src/components/ast/markdown-ast-tree-item.tsx
@@ -27,7 +27,7 @@ export const MarkdownAstTreeItem: FC<MarkdownAstTreeItemProperties> = ({
 		<AccordionTrigger className="text-sm bg-card px-4 py-3 capitalize">
 			{data.type}
 		</AccordionTrigger>
-		<AccordionContent className="p-4 overflow-x-scroll mr-2">
+		<AccordionContent className="p-4 overflow-x-auto mr-2">
 			<div className="space-y-1">
 				{Object.entries(data).map(item => (
 					<TreeEntry key={item[0]} data={item} />
diff --git a/src/components/scope/scope-item.tsx b/src/components/scope/scope-item.tsx
index 3f82cf7..55db5a4 100644
--- a/src/components/scope/scope-item.tsx
+++ b/src/components/scope/scope-item.tsx
@@ -49,7 +49,7 @@ export const ScopeItem: FC<ScopeItemProperties> = ({
 			<AccordionTrigger className="text-sm bg-card px-4 py-3 capitalize">
 				{isArray && `${Math.max(index, 0)}.`} {key}
 			</AccordionTrigger>
-			<AccordionContent className="p-4 overflow-x-scroll mr-2">
+			<AccordionContent className="p-4 overflow-x-auto mr-2">
 				<div className="space-y-1">
 					{properties.map((item, index) => (
 						<TreeEntry
diff --git a/tailwind.config.js b/tailwind.config.js
index c5d236b..dd91cba 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -75,21 +75,26 @@ module.exports = {
 	},
 	plugins: [
 		require("tailwindcss-animate"),
-		function ({ addUtilities, theme }) {
-			addUtilities(
-				{
-					".scrollbar-thumb": {
-						scrollbarColor: `${theme("colors.scrollbar-thumb")} ${theme("colors.scrollbar-track")}`,
-					},
-					".scrollbar-thumb-hover": {
-						scrollbarColor: `${theme("colors.scrollbar-thumb-hover")} ${theme("colors.scrollbar-track")}`,
-					},
-					".scrollbar-track": {
-						scrollbarWidth: "thin",
-					},
+		function ({ addBase, theme }) {
+			addBase({
+				"::-webkit-scrollbar": {
+					width: "8px",
 				},
-				["responsive", "hover"],
-			);
+				"::-webkit-scrollbar-thumb": {
+					backgroundColor: theme("colors.scrollbar-thumb"),
+					borderRadius: "4px",
+				},
+				"::-webkit-scrollbar-thumb:hover": {
+					backgroundColor: theme("colors.scrollbar-thumb-hover"),
+				},
+				"::-webkit-scrollbar-track": {
+					backgroundColor: theme("colors.scrollbar-track"),
+				},
+				"*": {
+					scrollbarColor: `${theme("colors.scrollbar-thumb")} ${theme("colors.scrollbar-track")}`,
+					scrollbarWidth: "thin",
+				},
+			});
 		},
 	],
 	purge: {