diff --git a/src/components/ast/javascript-ast-tree-item.tsx b/src/components/ast/javascript-ast-tree-item.tsx
index 3163a32..c4ee0d6 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 border-card rounded-lg overflow-hidden"
+		className="border border-card rounded-lg overflow-hidden min-w-80"
 	>
 		<AccordionTrigger className="text-sm bg-card px-4 py-3 capitalize">
 			{data.type}
 		</AccordionTrigger>
-		<AccordionContent className="p-4 border-t">
+		<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 525618a..c42a294 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 border-card rounded-lg overflow-hidden"
+		className="border border-card rounded-lg overflow-hidden min-w-80"
 	>
 		<AccordionTrigger className="text-sm bg-card px-4 py-3 capitalize">
 			{data.type}
 		</AccordionTrigger>
-		<AccordionContent className="p-4 border-t">
+		<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 da02d61..1bebf71 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 border-card rounded-lg overflow-hidden"
+		className="border border-card rounded-lg overflow-hidden min-w-80"
 	>
 		<AccordionTrigger className="text-sm bg-card px-4 py-3 capitalize">
 			{data.type}
 		</AccordionTrigger>
-		<AccordionContent className="p-4 border-t">
+		<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 83f519a..55db5a4 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 border-card rounded-lg overflow-hidden"
+			className="border border-card rounded-lg overflow-hidden min-w-80"
 		>
 			<AccordionTrigger className="text-sm bg-card px-4 py-3 capitalize">
 				{isArray && `${Math.max(index, 0)}.`} {key}
 			</AccordionTrigger>
-			<AccordionContent className="p-4 border-t">
+			<AccordionContent className="p-4 overflow-x-auto 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 d2f3c83..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];
@@ -91,36 +92,44 @@ 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={cn(
+				"flex-none",
+				partIndex ? "text-muted-foreground" : "text-primary",
+				values.length === 1 && "flex-1",
+			)}
+		>
+			{part}
+		</span>
+	));
 
 	return (
 		<>
 			<div className="flex items-center gap-3">
-				{(typeof value === "object" &&
-					Object.values(value ?? {}).length) ||
-				(Array.isArray(value) && value.length) ? (
+				{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 className="w-4 h-4"></div>
 				)}
-				{key && <span>{key}</span>}
-				{renderValue(value).map((part, partIndex) => (
-					<span
-						key={partIndex}
-						className={
-							partIndex ? "text-muted-foreground" : "text-primary"
-						}
-					>
-						{part}
-					</span>
-				))}
+				{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>
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: {