better scrolling

grades/grades.css

@@ -53,14 +53,15 @@ body {
     padding: 1rem;
     display: flex;
     flex-direction: column;
-    overflow-y: auto;
+    overflow: hidden;
 }
 .overall-averages {
     padding: 1.5rem;
     background: var(--card-card);
     border-radius: 24px;
     box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
-    width: calc(995px + 50px);
+    width: 100%;
+    max-width: calc(995px + 50px);
 }
 .average-details {
     display: flex;
@@ -175,8 +176,38 @@ body {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    overflow: auto;
-    max-height: calc(71.5px* 5 - 10px); 
+    overflow: hidden;
+    max-height: calc(71.5px* 5 - 10px);
+    position: relative;
+}
+
+.grades-list.scrollable {
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.grades-list.scrollable::-webkit-scrollbar {
+    display: none;
+}
+
+.grades-list::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 30px;
+    height: 6px;
+    background: radial-gradient(circle, var(--text-secondary) 1px, transparent 1px);
+    background-size: 8px 6px;
+    background-repeat: repeat-x;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.grades-list.has-more::after {
+    opacity: 1;
 }
 .grade-item {
     display: grid;
@@ -615,16 +646,163 @@ body {
     color: var(--grades-5); 
 }
 
+@media (max-width: 1200px) {
+    .chart-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+    
+    .chart-averages {
+        position: static;
+        align-self: flex-end;
+    }
+    
+    .grade-distribution {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    
+    .grades-chart {
+        overflow-x: auto;
+    }
+}
+
 @media (max-width: 1024px) {
     .grades-overview {
-            grid-template-columns: 1fr;
+        grid-template-columns: 1fr;
     }
     
     .semester-grades {
-            width: 100%;
+        width: 100%;
+        height: auto;
+        max-height: 400px;
     }
 
     .overall-averages {
         width: 100%;
     }
+}
+
+@media (max-width: 768px) {
+    .grades-chart {
+        height: 200px;
+        padding: 0.75rem;
+        margin-bottom: 1rem;
+    }
+    
+    .chart-header {
+        padding: 0.75rem;
+    }
+    
+    .chart-averages {
+        gap: 0.5rem;
+    }
+    
+    .average-circle {
+        width: 40px;
+        height: 22px;
+        padding: 4px 6px;
+    }
+    
+    .average-circle .average-value {
+        font-size: 12px;
+    }
+    
+    .grade-distribution {
+        gap: 0.5rem;
+        padding: 0.75rem;
+        overflow-x: auto;
+        flex-wrap: nowrap;
+    }
+    
+    .grade-count {
+        padding: 3px 6px 3px 3px;
+        flex-shrink: 0;
+    }
+    
+    .grade-count .grade-value {
+        font-size: 16px;
+    }
+    
+    .grade-count .grade-amount {
+        font-size: 12px;
+    }
+    
+    .semester-grades {
+        padding: 1rem;
+        width: 100%;
+        min-width: 0;
+    }
+    
+    .semester-grades h3 {
+        padding: 0.5rem;
+        font-size: 14px;
+    }
+    
+    .semester-grade-item {
+        padding: 0.75rem;
+        gap: 0.75rem;
+    }
+    
+    .semester-grade-value {
+        width: 28px;
+        height: 28px;
+        font-size: 18px;
+    }
+    
+    .semester-grade-subject {
+        font-size: 14px;
+    }
+    
+    .overall-averages {
+         padding: 1rem;
+         overflow-x: auto;
+     }
+ }
+
+@media (max-width: 480px) {
+    .grades-chart {
+        height: 180px;
+        padding: 0.5rem;
+    }
+    
+    .chart-header {
+        padding: 0.5rem;
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .chart-averages {
+        align-self: center;
+        gap: 0.25rem;
+    }
+    
+    .average-circle {
+        width: 36px;
+        height: 20px;
+        padding: 2px 4px;
+    }
+    
+    .average-circle .average-value {
+        font-size: 11px;
+    }
+    
+    .grade-distribution {
+        padding: 0.5rem;
+        gap: 0.25rem;
+    }
+    
+    .semester-grades {
+        padding: 0.75rem;
+    }
+    
+    .overall-averages {
+        padding: 0.75rem;
+    }
+    
+    .grades-overview {
+        gap: 1rem;
+        margin-bottom: 1rem;
+    }
 }

grades/grades.js

@@ -23,6 +23,7 @@
             };
 
             setupEventListeners();
+            setupGradesListScrolling();
             loadingScreen.hide();
 
         } catch (error) {
@@ -384,7 +385,7 @@
         const sortedSubjects = [...subjects].sort((a, b) => a.grades.length - b.grades.length);
 
         return sortedSubjects.map(subject => {
-            const regularGrades = subject.grades.filter(grade => !grade.isSemesterGrade);
+            const regularGrades = subject.grades.filter(grade => !grade.isSemesterGrade).reverse();
             const myGrade = Math.floor(subject.average) || 0;
             const classGrade = Math.floor(subject.classAverage) || 0;
 
@@ -423,19 +424,45 @@
                 const minutes = Math.floor(timeLeft / 60);
                 const seconds = timeLeft % 60;
                 timerEl.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+                timeLeft--;
 
-                if (timeLeft <= 0) {
-                    window.location.href = '/Home/Logout';
-                } else {
-                    timeLeft--;
+                if (timeLeft < 0) {
+                    window.location.href = chrome.runtime.getURL('logout/logout.html');
                 }
             };
 
-            updateTimer();
             setInterval(updateTimer, 1000);
         }
     }
 
+    function setupGradesListScrolling() {
+        const gradesLists = document.querySelectorAll('.grades-list');
+        
+        gradesLists.forEach(list => {
+            const checkScrollable = () => {
+                if (list.scrollHeight > list.clientHeight) {
+                    list.classList.add('scrollable', 'has-more');
+                    
+                    const handleScroll = () => {
+                        const isAtBottom = list.scrollTop + list.clientHeight >= list.scrollHeight - 5;
+                        if (isAtBottom) {
+                            list.classList.remove('has-more');
+                        } else {
+                            list.classList.add('has-more');
+                        }
+                    };
+                    
+                    list.addEventListener('scroll', handleScroll);
+                    handleScroll();
+                } else {
+                    list.classList.remove('scrollable', 'has-more');
+                }
+            };
+            
+            checkScrollable();
+        });
+    }
+
     if (window.location.href.includes('/TanuloErtekeles/Osztalyzatok')) {
         transformGradesPage();
     }