From 0a1a674074444d864bfd756cdaadd669af4c3d6d Mon Sep 17 00:00:00 2001
From: Ninjaws <ninjaws@users.noreply.github.com>
Date: Sat, 23 Nov 2024 20:48:23 +0100
Subject: [PATCH] [Added] Scrolls for long items

---
 src/app/projects/projects.component.html | 12 +++++++++---
 src/styles.scss                          | 23 +++++++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/app/projects/projects.component.html b/src/app/projects/projects.component.html
index 8ec8f3b..5241678 100644
--- a/src/app/projects/projects.component.html
+++ b/src/app/projects/projects.component.html
@@ -6,15 +6,21 @@
       <div *ngFor="let project of projects"
         class="backface-hidden rounded-sm overflow-hidden shadow-lg md:hover:scale-105 transition-all 
         duration-300 group relative fade-in-up bg-white/5 border-none">
-        <!-- alt="{{project.title}}" -->
-        <!-- *ngIf="project.image"  -->
         <img src="{{project.image}}" alt="{{project.title}}" class="w-full max-h-56 aspect-[3/2] object-cover">
         <div class="p-2 xs:p-3 xl:px-6 min-h-56">
+          <!-- min-h-56 -->
           <div class="flex flex-wrap mb-2 xs:mb-4 items-center">
             <h3 class="text-xl sm:text-2xl font-semibold text-teal-400 flex-grow">{{project.title}}</h3>
             <p class="pl-2 ml-auto w-auto text-right text-sm xs:text-base text-gray-400">{{project.year}}</p>
           </div>
-          <p class="text-gray-300 mb-4 whitespace-pre-line">{{project.description}}</p>
+          <p class="text-gray-300 mb-4 whitespace-pre-line max-h-48 overflow-auto">{{project.description}}</p>
+
+          <!-- <details class="text-gray-300 mb-4">
+            <summary class="cursor-pointer list-none">
+            </summary>
+            <p class="whitespace-pre-line">{{project.description}}</p>
+          </details> -->
+
           <div class="flex flex-wrap gap-1">
             <span *ngFor="let technology of project.technologies"
               class="bg-gray-800 text-white text-sm sm:text-md px-1 sm:px-2 py-1 rounded-md">{{technology}}</span>
diff --git a/src/styles.scss b/src/styles.scss
index 1ec2cf9..f5883b1 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -43,3 +43,26 @@ html {
   animation: fadeInLeft 0.95s ease-out;
 }
 
+
+
+/* Custom scrollbar styles for Sass */
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgb(61, 61, 61);
+}
+
+::-webkit-scrollbar-thumb {
+  background:rgb(116, 116, 116);//rgb(226, 147, 0);
+  border-radius: 20px;
+  transition: background 0.3s;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #357ABD;
+}
+
+// scrollbar-width: thin;
+// scrollbar-color: #4A90E2 #f0f0f0;
\ No newline at end of file