From 116821aaf068f52941a78d2b299fa52e53aac2bd Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Fri, 25 Aug 2023 23:51:13 -0500
Subject: [PATCH] Add thin scrollbar for AbstractCard raw JSON visual

---
 src/components/common/AbstractCard.tsx |  2 +-
 src/styles/globals.scss                | 30 ++++++++++++++++----------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/common/AbstractCard.tsx b/src/components/common/AbstractCard.tsx
index 47cab66..8bbe247 100644
--- a/src/components/common/AbstractCard.tsx
+++ b/src/components/common/AbstractCard.tsx
@@ -34,7 +34,7 @@ const AbstractCard: FunctionComponent<AbstractCardProps> = ({
       ) : null}
       <div className="max-w-full p-2 px-4">
         {showRaw ? (
-          <pre className="m-2 max-h-[40rem] max-w-full overflow-y-auto whitespace-pre-wrap rounded">
+          <pre className="scrollbar-thin m-2 max-h-[40rem] max-w-full overflow-y-auto whitespace-pre-wrap rounded">
             {JSON.stringify(data, null, 4)}
           </pre>
         ) : (
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 2e6c4da..b6e4f92 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -3,11 +3,11 @@
 @tailwind utilities;
 
 dd {
-  margin: 0.5em 0 1em 2em;
+    margin: 0.5em 0 1em 2em;
 }
 
 [title]:not(.no-title) {
-  border-bottom: 1px dashed silver;
+    border-bottom: 1px dashed silver;
 }
 
 body {
@@ -16,25 +16,33 @@ body {
 }
 
 dd, dl {
-  white-space: nowrap;
+    white-space: nowrap;
 }
 
 
 dl {
-  margin: 0;
+    margin: 0;
 }
 
 .rdap-status-code, .rdap-event-time {
-  border-bottom: 1px dashed silver;
+    border-bottom: 1px dashed silver;
 }
 
 #object {
-  text-transform: lowercase;
+    text-transform: lowercase;
 }
 
 #spinner-msg {
-  height: 2em;
-  display: inline-block;
-  margin: -0.25em 0 0 0;
-  padding: 0.25em 0 0 0;
-}
\ No newline at end of file
+    height: 2em;
+    display: inline-block;
+    margin: -0.25em 0 0 0;
+    padding: 0.25em 0 0 0;
+}
+
+.custom-select {
+    background: #fffff00 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
+}
+
+.scrollbar-thin {
+    scrollbar-width: thin;
+}