fix truncated cards at the extremities, improve style

app.py

@@ -638,7 +638,7 @@ def create_timeline_template():
         }
 
         .header h1 {
-            font-size: 1.5rem;
+            font-size: 1.6rem;
             font-weight: 700;
             color: #2d3748;
             margin-bottom: 0.1rem;
@@ -647,7 +647,7 @@ def create_timeline_template():
 
         .header p {
             color: #666;
-            font-size: 0.8rem;
+            font-size: 0.85rem;
             margin: 0;
             transition: color 0.3s ease;
         }
@@ -814,7 +814,7 @@ def create_timeline_template():
         .input-group label {
             font-weight: 500;
             color: #4a5568;
-            font-size: 0.7rem;
+            font-size: 0.75rem;
             transition: color 0.3s ease;
         }
 
@@ -824,10 +824,10 @@ def create_timeline_template():
         }
 
         .input-group input {
-            padding: 0.3rem 0.6rem;
+            padding: 0.35rem 0.65rem;
             border: 1px solid #e2e8f0;
             border-radius: 5px;
-            font-size: 0.7rem;
+            font-size: 0.75rem;
             transition: all 0.2s ease;
             background: white;
         }
@@ -898,10 +898,10 @@ def create_timeline_template():
         }
 
         .btn-small {
-            padding: 0.4rem 0.6rem;
-            font-size: 0.65rem;
+            padding: 0.45rem 0.65rem;
+            font-size: 0.7rem;
             margin-top: 0;
-            height: 32px;
+            height: 34px;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -910,14 +910,14 @@ def create_timeline_template():
         .modality-checkbox {
             display: flex;
             align-items: center;
-            gap: 0.3rem;
-            padding: 0.3rem 0.5rem;
+            gap: 0.35rem;
+            padding: 0.35rem 0.55rem;
             background: rgba(255, 255, 255, 0.9);
             border: 1px solid rgba(0, 0, 0, 0.1);
             border-radius: 8px;
             cursor: pointer;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            font-size: 0.65rem;
+            font-size: 0.7rem;
             font-weight: 500;
             position: relative;
             overflow: hidden;
@@ -967,8 +967,8 @@ def create_timeline_template():
 
         .modality-checkbox input[type="checkbox"] {
             appearance: none;
-            width: 16px;
-            height: 16px;
+            width: 17px;
+            height: 17px;
             border: 2px solid var(--modality-color, #8B5CF6);
             border-radius: 4px;
             position: relative;
@@ -1025,14 +1025,14 @@ def create_timeline_template():
         .task-checkbox {
             display: flex;
             align-items: center;
-            gap: 0.3rem;
-            padding: 0.3rem 0.5rem;
+            gap: 0.35rem;
+            padding: 0.35rem 0.55rem;
             background: rgba(255, 255, 255, 0.9);
             border: 1px solid rgba(0, 0, 0, 0.1);
             border-radius: 8px;
             cursor: pointer;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            font-size: 0.65rem;
+            font-size: 0.7rem;
             font-weight: 500;
             position: relative;
             overflow: hidden;
@@ -1082,8 +1082,8 @@ def create_timeline_template():
 
         .task-checkbox input[type="checkbox"] {
             appearance: none;
-            width: 16px;
-            height: 16px;
+            width: 17px;
+            height: 17px;
             border: 2px solid var(--task-color, #6366f1);
             border-radius: 4px;
             background: white;
@@ -1301,20 +1301,20 @@ def create_timeline_template():
             top: 15px;
             right: 15px;
             display: flex;
-            gap: 8px;
+            gap: 6px;
             z-index: 20;
         }
 
         .zoom-btn {
-            width: 36px;
-            height: 36px;
+            width: 28px;
+            height: 28px;
             background: rgba(255, 255, 255, 0.9);
-            border-radius: 8px;
+            border-radius: 6px;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
-            font-size: 1.1rem;
+            font-size: 0.9rem;
             font-weight: 600;
             color: #d97706;
             border: 2px solid rgba(217, 119, 6, 0.2);
@@ -1351,12 +1351,17 @@ def create_timeline_template():
         .zoom-indicator {
             background: rgba(255, 255, 255, 0.95);
             border-radius: 6px;
-            padding: 4px 8px;
-            font-size: 0.75rem;
+            padding: 2px 6px;
+            font-size: 0.7rem;
             color: #d97706;
             font-weight: 500;
             border: 1px solid rgba(217, 119, 6, 0.2);
             transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 40px;
+            height: 28px;
         }
 
         /* Dark mode zoom indicator */
@@ -1490,8 +1495,8 @@ def create_timeline_template():
         }
 
         .timeline-dot {
-            width: 18px;
-            height: 18px;
+            width: 19px;
+            height: 19px;
             border-radius: 50%;
             background: white;
             border: 3px solid;
@@ -1511,12 +1516,12 @@ def create_timeline_template():
 
         .timeline-label {
             position: absolute;
-            min-width: 100px;
-            max-width: 160px;
-            padding: 0.4rem 0.6rem;
+            min-width: 110px;
+            max-width: 170px;
+            padding: 0.5rem 0.7rem;
             background: white;
             border-radius: 6px;
-            font-size: 0.75rem;
+            font-size: 0.85rem;
             font-weight: 500;
             text-align: center;
             box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
@@ -1555,9 +1560,9 @@ def create_timeline_template():
 
         /* Expanded card styles */
         .timeline-label.expanded {
-            max-width: 500px !important;
-            min-width: 400px !important;
-            width: 500px !important;
+            max-width: 550px !important;
+            min-width: 450px !important;
+            width: 550px !important;
             min-height: 250px !important;
             text-align: left;
             z-index: 9999 !important; /* Much higher than all other elements */
@@ -1584,7 +1589,7 @@ def create_timeline_template():
 
         .timeline-label .model-title {
             font-weight: 600;
-            font-size: 0.85rem;
+            font-size: 0.95rem;
             margin-bottom: 0.5rem;
             color: #1f2937;
             border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -1602,10 +1607,9 @@ def create_timeline_template():
         }
 
         .timeline-label .model-description {
-            font-size: 0.7rem;
+            font-size: 0.8rem;
             line-height: 1.4;
             color: #4b5563;
-            margin-bottom: 0.5rem;
             max-height: 0;
             overflow: hidden;
             transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
@@ -1618,8 +1622,8 @@ def create_timeline_template():
         }
 
         .timeline-label.expanded .model-description {
-            max-height: 200px !important;
-            height: 200px !important;
+            max-height: 175px !important;
+            height: 175px !important;
             position: relative;
             overflow: hidden; /* Hide overflow for blur effect */
         }
@@ -1631,21 +1635,23 @@ def create_timeline_template():
         }
 
         .timeline-label.expanded .description-content {
-            max-height: 200px !important;
-            height: 200px !important;
+            position: relative;
+            bottom: 2px;
+            max-height: 175px !important;
+            height: 175px !important;
             overflow-y: auto;
             padding-right: 8px; /* Space for scrollbar */
         }
 
         .timeline-label .description-fade {
-            position: absolute;
-            bottom: -3px; /* Move down 3px to cover text artifact */
+            position: sticky;
+            bottom: 0px; /* Position at the very bottom of the container */
             left: 0;
-            right: 0;
-            height: 43px; /* Increase height to compensate */
+            height: 15px;
             background: linear-gradient(to bottom,
                 rgba(255, 255, 255, 0) 0%,
                 rgba(255, 255, 255, 0.9) 50%,
+                rgba(255, 255, 255, 1) 95%);
                 rgba(255, 255, 255, 1) 100%);
             opacity: 0;
             transition: opacity 0.3s ease;
@@ -1658,6 +1664,7 @@ def create_timeline_template():
             background: linear-gradient(to bottom,
                 rgba(55, 65, 81, 0) 0%,
                 rgba(55, 65, 81, 0.9) 50%,
+                rgba(55, 65, 81, 1) 95%);
                 rgba(55, 65, 81, 1) 100%);
         }
 
@@ -1682,9 +1689,9 @@ def create_timeline_template():
             color: #f9fafb;
         }
 
-        .timeline-label .model-description h1 { font-size: 0.85rem; }
-        .timeline-label .model-description h2 { font-size: 0.8rem; }
-        .timeline-label .model-description h3 { font-size: 0.75rem; }
+        .timeline-label .model-description h1 { font-size: 0.9rem; }
+        .timeline-label .model-description h2 { font-size: 0.85rem; }
+        .timeline-label .model-description h3 { font-size: 0.8rem; }
 
         .timeline-label .model-description p {
             margin: 0.5em 0;
@@ -1695,7 +1702,7 @@ def create_timeline_template():
             padding: 0.1em 0.3em;
             border-radius: 3px;
             font-family: 'Consolas', 'Monaco', monospace;
-            font-size: 0.65rem;
+            font-size: 0.7rem;
             transition: all 0.3s ease;
         }
 
@@ -1745,14 +1752,14 @@ def create_timeline_template():
             display: none;
             text-decoration: none;
             color: var(--modality-color, #8B5CF6);
-            font-size: 0.7rem;
+            font-size: 0.8rem;
             font-weight: 600;
             padding: 0.3rem 0.6rem;
             border: 1px solid var(--modality-color, #8B5CF6);
             border-radius: 4px;
             background: rgba(255, 255, 255, 0.8);
             transition: all 0.2s ease;
-            margin-top: 0.5rem;
+            margin-top: 0.2rem;
             text-align: center;
         }
 
@@ -1807,7 +1814,7 @@ def create_timeline_template():
         }
 
         .tasks-label {
-            font-size: 0.7rem;
+            font-size: 0.8rem;
             font-weight: 600;
             color: #4a5568;
             margin-bottom: 0.3rem;
@@ -1827,10 +1834,10 @@ def create_timeline_template():
 
         .task-badge {
             display: inline-block;
-            padding: 0.2rem 0.4rem;
+            padding: 0.25rem 0.45rem;
             color: white;
             border-radius: 4px;
-            font-size: 0.6rem;
+            font-size: 0.7rem;
             font-weight: 500;
             opacity: 0.9;
             transition: all 0.2s ease;
@@ -1904,7 +1911,7 @@ def create_timeline_template():
         }
 
         .timeline-date {
-            font-size: 0.65rem;
+            font-size: 0.75rem;
             color: #9ca3af;
             margin-top: 0.3rem;
             font-weight: 500;
@@ -1944,7 +1951,7 @@ def create_timeline_template():
         }
 
         .date-input-group label {
-            font-size: 0.7rem;
+            font-size: 0.75rem;
             color: #4a5568;
             font-weight: 600;
             white-space: nowrap;
@@ -1957,13 +1964,13 @@ def create_timeline_template():
         }
 
         .date-input-group input {
-            padding: 0.4rem 0.6rem;
+            padding: 0.45rem 0.65rem;
             border: 2px solid #e2e8f0;
             border-radius: 8px;
-            font-size: 0.75rem;
+            font-size: 0.8rem;
             background: white;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            min-width: 130px;
+            min-width: 135px;
             text-align: center;
             font-weight: 500;
             color: #374151;
@@ -2034,7 +2041,7 @@ def create_timeline_template():
 
         .stat-label {
             color: #666;
-            font-size: 0.7rem;
+            font-size: 0.75rem;
             margin-top: 0.15rem;
             transition: color 0.3s ease;
         }
@@ -2194,6 +2201,7 @@ def create_timeline_template():
         let zoomLevel = 1.0; // 1.0 = 100%, 0.5 = 50%, 2.0 = 200%
         const minZoom = 0.3; // Minimum zoom (30%)
         const maxZoom = 3.0; // Maximum zoom (300%)
+        let taskData = {}; // Store task data for easy lookup
 
         // Theme management
         let currentTheme = 'light';
@@ -2525,6 +2533,9 @@ def create_timeline_template():
                                 setTimeout(() => {
                                     otherLabel.style.top = '';
                                     otherLabel.style.bottom = '';
+                                    otherLabel.style.left = '';
+                                    otherLabel.style.right = '';
+                                    otherLabel.style.transform = 'translateX(-50%)';
                                     otherLabel.parentElement.style.zIndex = '';
                                 }, 50);
                             }, 50);
@@ -2548,8 +2559,6 @@ def create_timeline_template():
                         const storedTasks = label.dataset.tasks ? JSON.parse(label.dataset.tasks) : [];
                         const formattedDescription = markdownToHtml(label.dataset.description);
 
-
-
                         // Format tasks for display with task-specific colors
                         const tasksHtml = storedTasks && storedTasks.length > 0 ?
                             `<div class="model-tasks">
@@ -2557,7 +2566,8 @@ def create_timeline_template():
                                 <div class="tasks-list">
                                     ${storedTasks.map(task => {
                                         const taskColor = getTaskColor(task);
-                                        return `<span class="task-badge" style="background-color: ${taskColor}">${task.replace(/-/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase())}</span>`;
+                                        const taskName = getTaskDisplayName(task);
+                                        return `<span class="task-badge" style="background-color: ${taskColor}">${taskName}</span>`;
                                     }).join('')}
                                 </div>
                             </div>` :
@@ -2573,9 +2583,9 @@ def create_timeline_template():
                                 <div class="description-fade"></div>
                             </div>
                             <a href="${label.dataset.learnMoreUrl}"
-                               target="_blank"
-                               class="learn-more"
-                               onclick="event.stopPropagation()">
+                            target="_blank"
+                            class="learn-more"
+                            onclick="event.stopPropagation()">
                                 Learn More →
                             </a>
                         `;
@@ -2586,7 +2596,48 @@ def create_timeline_template():
                         // Ensure this timeline item is on top
                         item.style.zIndex = '10000';
 
-                        // Set positioning to keep the correct edge fixed (using pre-expansion position)
+                        // Calculate timeline container bounds
+                        const timelineContainer = document.querySelector('.timeline-container');
+                        const containerBounds = timelineContainer.getBoundingClientRect();
+                        const timelineItemRect = item.getBoundingClientRect();
+
+                        // Get expanded card dimensions (it's now rendered with expanded content)
+                        const expandedRect = label.getBoundingClientRect();
+                        const cardWidth = 550; // Known width from CSS
+                        const cardHalfWidth = cardWidth / 2;
+
+                        // Calculate timeline item's center position relative to container
+                        const itemCenterX = timelineItemRect.left + (timelineItemRect.width / 2) - containerBounds.left;
+
+                        // Calculate default centered position bounds
+                        const defaultLeft = itemCenterX - cardHalfWidth;
+                        const defaultRight = itemCenterX + cardHalfWidth;
+
+                        // Container padding to ensure cards don't touch edges
+                        const padding = 20;
+                        const containerWidth = containerBounds.width;
+
+                        // Determine optimal positioning
+                        let finalTransform = 'translateX(-50%)'; // Default centered
+                        let finalLeft = '';
+                        let finalRight = '';
+
+                        if (defaultLeft < padding) {
+                            // Card would extend beyond left edge - align to left with padding
+                            finalTransform = 'translateX(-5%)';
+                            finalLeft = '';
+                        } else if (defaultRight > (containerWidth - padding)) {
+                            // Card would extend beyond right edge - align to right with padding
+                            finalTransform = 'translateX(-95%)';
+                            finalRight = '';
+                        }
+
+                        // Apply positioning adjustments
+                        label.style.transform = finalTransform;
+                        // if (finalLeft) label.style.left = finalLeft;
+                        // if (finalRight) label.style.right = finalRight;
+
+                        // Set vertical positioning to keep the correct edge fixed
                         if (isAboveAxis) {
                             // Keep top edge fixed - set top position
                             label.style.bottom = 'auto';
@@ -2612,9 +2663,13 @@ def create_timeline_template():
                             setTimeout(() => {
                                 label.style.top = '';
                                 label.style.bottom = '';
-                                item.style.zIndex = ''; // Reset z-index too
-                            }, 50); // Small delay to ensure content is set
-                        }, 50); // Small delay to start transition
+                                label.style.left = '';
+                                label.style.right = '';
+                                // Reset transform: depends on current position
+                                label.style.transform = 'translateX(-50%)';
+                                item.style.zIndex = '';
+                            }, 50);
+                        }, 50);
                     }
                 });
 
@@ -3018,6 +3073,11 @@ def create_timeline_template():
                 const taskFilters = document.getElementById('taskFilters');
                 taskFilters.innerHTML = '';
 
+                // Store task data for easy lookup
+                data.tasks.forEach(task => {
+                    taskData[task.key] = { name: task.name, color: task.color };
+                });
+
                 data.tasks.forEach(task => {
                     const checkboxContainer = document.createElement('div');
                     checkboxContainer.className = 'task-checkbox';
@@ -3132,6 +3192,16 @@ def create_timeline_template():
             return taskColors[taskKey] || "#6b7280"; // Default gray for unmapped tasks
         }
 
+        // Function to get task display name from loaded task data
+        function getTaskDisplayName(taskKey) {
+            // Use stored task data if available
+            if (taskData[taskKey]) {
+                return taskData[taskKey].name;
+            }
+            // Fallback to formatted key if not found
+            return taskKey.replace(/-/g, ' ').replace(/\b\\w/g, l => l.toUpperCase());
+        }
+
         async function loadModalities() {
             try {
                 const response = await fetch('/api/modalities');
@@ -3238,6 +3308,7 @@ def create_timeline_template():
                         setTimeout(() => {
                             label.style.top = '';
                             label.style.bottom = '';
+                            label.style.transform = 'translateX(-50%)';
                             label.parentElement.style.zIndex = '';
                         }, 50);
                     }, 50);