From 4a850cf63a483808fdb573386df5bdb81eb37cee Mon Sep 17 00:00:00 2001
From: Devamchaudhari <devamchaudhari40@gmail.com>
Date: Sun, 2 Feb 2025 18:58:57 +0530
Subject: [PATCH 1/2] Enhance snippet display with scrollbar

---
 src/styles/main.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/styles/main.css b/src/styles/main.css
index d0f2a08f..ca5c73b1 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -599,6 +599,25 @@ abbr {
     auto-fill,
     minmax(min(17.5rem, 100%), 1fr)
   ); /* [1] */
+  height: 100%;
+  max-height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 1rem;
+  align-content: start;
+}
+
+.snippets::-webkit-scrollbar {
+  width: 8px;
+}
+
+.snippets::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+.snippets::-webkit-scrollbar-thumb:hover {
+  background: #555;
 }
 
 .snippet {

From 07e55513ecae65bc16c37c7c85e1f57edd45eb9e Mon Sep 17 00:00:00 2001
From: Devamchaudhari <devamchaudhari40@gmail.com>
Date: Tue, 4 Feb 2025 23:07:16 +0530
Subject: [PATCH 2/2] Add scrollbar theming and adjust snippet container

---
 src/styles/main.css | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/styles/main.css b/src/styles/main.css
index 9e34ab40..843f8a88 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -26,6 +26,8 @@
   --clr-neutral-900: hsl(0, 0%, 5%);
   --clr-accent-dark: hsl(181, 100%, 36%);
   --clr-accent-light: hsl(181, 100%, 22%);
+  --scrollbar-thumb-light: hsl(0, 0%, 73%);
+  --scrollbar-thumb-dark: hsl(0, 0%, 33%);
 
   /* Main colors - For theming */
   --clr-accent: var(--clr-accent-dark);
@@ -79,6 +81,9 @@
   --br-sm: 0.25rem;
   --br-md: 0.5rem;
   --br-lg: 0.75rem;
+
+  /* webkit scrollbar */
+  --scrollbar-thumb: var(--scrollbar-thumb-dark);
 }
 
 /*------------------------------------*\
@@ -105,6 +110,8 @@
 
   --clr-gradient-secondary-1: var(--clr-neutral-100);
   --clr-gradient-secondary-2: var(--clr-neutral-200);
+
+  --scrollbar-thumb: var(--scrollbar-thumb-light);
 }
 
 /*------------------------------------*\
@@ -604,10 +611,11 @@ abbr {
     minmax(min(17.5rem, 100%), 1fr)
   ); /* [1] */
   height: 100%;
-  max-height: 100vh;
+  min-height: 25vh;
+  max-height: 90vh;
   overflow-y: auto;
   overflow-x: hidden;
-  padding-bottom: 1rem;
+  padding: 0.5rem 1rem 1rem 1rem;  
   align-content: start;
 }
 
@@ -616,12 +624,12 @@ abbr {
 }
 
 .snippets::-webkit-scrollbar-thumb {
-  background: #888;
+  background: var(--scrollbar-thumb);
   border-radius: 4px;
 }
 
 .snippets::-webkit-scrollbar-thumb:hover {
-  background: #555;
+  background: var(--scrollbar-thumb);
 }
 
 .snippet {