From 8f2c5c5df47cb0bfccec509da964587feb202ebe Mon Sep 17 00:00:00 2001
From: becarta <github.devotee752@passmail.net>
Date: Sun, 15 Jun 2025 18:21:02 +0200
Subject: [PATCH] Refactor modal components for improved usability and
 responsiveness

- Updated modal content styles in Certifications, Education, and Skills components to allow for scrollable content on mobile devices.
- Removed body overflow control during modal display, enabling better user experience by allowing background scrolling.
- Enhanced Work Experience component with click-to-expand functionality for mobile users, improving accessibility and interaction.
---
 .../widgets/ModernCertifications.astro        |  6 +--
 src/components/widgets/ModernEducation.astro  |  6 +--
 src/components/widgets/ModernSkills.astro     |  6 +--
 .../widgets/ModernWorkExperience.astro        | 40 ++++++++++++++++---
 4 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/components/widgets/ModernCertifications.astro b/src/components/widgets/ModernCertifications.astro
index 9f3f3d5..6f1b728 100644
--- a/src/components/widgets/ModernCertifications.astro
+++ b/src/components/widgets/ModernCertifications.astro
@@ -159,7 +159,7 @@ const getImageSrc = (imagePath: string) => {
 
 <!-- Certification Details Modal -->
 <div id="certModal" class="modal fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
-  <div class="modal-content bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-2xl w-full mx-4 transform scale-90 opacity-0 transition-all duration-300">
+  <div class="modal-content bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto transform scale-90 opacity-0 transition-all duration-300">
     <div class="flex justify-between items-start mb-4">
       <div>
         <h3 id="certModalTitle" class="text-2xl font-bold text-gray-900 dark:text-white mb-1"></h3>
@@ -239,13 +239,13 @@ const getImageSrc = (imagePath: string) => {
     
     const modal = document.getElementById('certModal');
     modal.classList.add('active');
-    document.body.style.overflow = 'hidden';
+    // Don't disable body scroll - let modal content be scrollable
   }
 
   function closeCertModal() {
     const modal = document.getElementById('certModal');
     modal.classList.remove('active');
-    document.body.style.overflow = '';
+    // No need to restore body scroll since we didn't disable it
   }
 
   // Initialize when DOM is loaded
diff --git a/src/components/widgets/ModernEducation.astro b/src/components/widgets/ModernEducation.astro
index 67ed3f5..24bb658 100644
--- a/src/components/widgets/ModernEducation.astro
+++ b/src/components/widgets/ModernEducation.astro
@@ -98,7 +98,7 @@ const getEducationStyle = (title: string) => {
 
 <!-- Education Details Modal -->
 <div id="educationModal" class="modal fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
-  <div class="modal-content bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-2xl w-full mx-4 transform scale-90 opacity-0 transition-all duration-300">
+  <div class="modal-content bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto transform scale-90 opacity-0 transition-all duration-300">
     <div class="flex justify-between items-start mb-4">
       <div>
         <h3 id="educationModalTitle" class="text-2xl font-bold text-gray-900 dark:text-white mb-1"></h3>
@@ -221,13 +221,13 @@ const getEducationStyle = (title: string) => {
     
     const modal = document.getElementById('educationModal');
     modal.classList.add('active');
-    document.body.style.overflow = 'hidden';
+    // Don't disable body scroll - let modal content be scrollable
   }
 
   function closeEducationModal() {
     const modal = document.getElementById('educationModal');
     modal.classList.remove('active');
-    document.body.style.overflow = '';
+    // No need to restore body scroll since we didn't disable it
   }
 
   // Initialize when DOM is loaded
diff --git a/src/components/widgets/ModernSkills.astro b/src/components/widgets/ModernSkills.astro
index 8345b87..d708724 100644
--- a/src/components/widgets/ModernSkills.astro
+++ b/src/components/widgets/ModernSkills.astro
@@ -122,7 +122,7 @@ if (uncategorizedSkills.length > 0) {
 
 <!-- Skill Details Modal -->
 <div id="skillModal" class="modal fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
-  <div class="modal-content bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-lg w-full mx-4 transform scale-90 opacity-0 transition-all duration-300">
+  <div class="modal-content bg-white dark:bg-slate-800 rounded-2xl p-6 max-w-lg w-full mx-4 max-h-[80vh] overflow-y-auto transform scale-90 opacity-0 transition-all duration-300">
     <div class="flex justify-between items-start mb-4">
       <h3 id="skillModalTitle" class="text-2xl font-bold text-gray-900 dark:text-white"></h3>
       <button onclick="closeSkillModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
@@ -196,13 +196,13 @@ if (uncategorizedSkills.length > 0) {
     
     const modal = document.getElementById('skillModal');
     modal.classList.add('active');
-    document.body.style.overflow = 'hidden';
+    // Don't disable body scroll - let modal content be scrollable
   }
 
   function closeSkillModal() {
     const modal = document.getElementById('skillModal');
     modal.classList.remove('active');
-    document.body.style.overflow = '';
+    // No need to restore body scroll since we didn't disable it
   }
 
   // Initialize when DOM is loaded
diff --git a/src/components/widgets/ModernWorkExperience.astro b/src/components/widgets/ModernWorkExperience.astro
index b4d5767..84f97b5 100644
--- a/src/components/widgets/ModernWorkExperience.astro
+++ b/src/components/widgets/ModernWorkExperience.astro
@@ -109,7 +109,7 @@ const getYearRange = (dateStr: string = '') => {
       
       return (
         <div 
-          class="work-card group bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm rounded-2xl p-6 transition-all duration-300 cursor-default border border-gray-100 dark:border-slate-800 hover:transform hover:scale-[1.02] hover:shadow-xl relative overflow-hidden"
+          class="work-card group bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm rounded-2xl p-6 transition-all duration-300 cursor-pointer border border-gray-100 dark:border-slate-800 hover:transform hover:scale-[1.02] hover:shadow-xl relative overflow-hidden"
         >
           <!-- Top gradient bar -->
           <div class={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${gradient}`}></div>
@@ -152,6 +152,10 @@ const getYearRange = (dateStr: string = '') => {
               <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
                 {item.description}
               </p>
+              <!-- Mobile expand indicator -->
+              <div class="mobile-expand-hint md:hidden text-xs text-gray-400 dark:text-gray-500 mt-2 opacity-70">
+                Tap to read more
+              </div>
             </div>
           )}
           
@@ -201,12 +205,14 @@ const getYearRange = (dateStr: string = '') => {
       max-height: 100px;
     }
     
-    .work-card:hover .work-description {
+    .work-card:hover .work-description,
+    .work-card:active .work-description,
+    .work-card.expanded .work-description {
       max-height: 400px; /* More room on mobile */
     }
     
-    .work-card:active .work-description {
-      max-height: 400px; /* Also trigger on touch */
+    .work-card.expanded .mobile-expand-hint {
+      display: none;
     }
   }
 
@@ -246,4 +252,28 @@ const getYearRange = (dateStr: string = '') => {
       font-size: 0.8rem;
     }
   }
-</style>
\ No newline at end of file
+</style>
+
+<script is:inline>
+  // Add click-to-expand functionality for mobile
+  document.addEventListener('DOMContentLoaded', function() {
+    const workCards = document.querySelectorAll('.work-card');
+    
+    workCards.forEach(card => {
+      card.addEventListener('click', function() {
+        // Only toggle on mobile/tablet (screens smaller than md breakpoint)
+        if (window.innerWidth < 768) {
+          this.classList.toggle('expanded');
+        }
+      });
+      
+      card.addEventListener('touchend', function(e) {
+        // Prevent double-firing and only on small screens
+        if (window.innerWidth < 768) {
+          e.preventDefault();
+          this.classList.toggle('expanded');
+        }
+      });
+    });
+  });
+</script>
\ No newline at end of file