view more in comment

docker-compose.yml

@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   app:
     build: .

src/public/script.js

@@ -150,12 +150,25 @@ function renderFullPlan() {
                 let entry = state.ressentis.find(r => r.date === isoDate);
                 let lineClass = (runningDate.getTime() === today.getTime()) ? "today-line" : "";
 
+                let uniqueId = `comment-${isoDate}`;
                 daysHtml += `<div class="log-line ${lineClass}">
-                    <span class="date">${dateStr}</span> : <span class="dose dose-${dose}">${dose} mg</span>`;
+                    <span class="date">${dateStr}</span>: <span class="dose dose-${dose}">${dose} mg</span>`;
 
                 if (entry) {
                     let stars = "★".repeat(entry.rating || 0);
-                    daysHtml += ` <span class="stars">${stars}</span> <span class="emoji">${entry.emoji || ''}</span> <span class="comment">${entry.commentaire || ''}</span>`;
+                    let comment = entry.commentaire || '';
+                    let needsToggle = comment.length > 80; // Threshold for showing view more
+
+                    daysHtml += ` <span class="stars">${stars}</span> <span class="emoji">${entry.emoji || ''}</span>`;
+
+                    if (comment) {
+                        daysHtml += ` <span class="comment-wrapper">`;
+                        daysHtml += `<span class="comment" id="${uniqueId}">${comment}</span>`;
+                        if (needsToggle) {
+                            daysHtml += ` <span class="view-toggle" onclick="toggleComment('${uniqueId}')">view more</span>`;
+                        }
+                        daysHtml += `</span>`;
+                    }
                 }
                 if (runningDate.getTime() === today.getTime()) {
                     const timeStr = new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
@@ -492,3 +505,18 @@ window.downloadBackup = function () {
     downloadAnchorNode.click();
     downloadAnchorNode.remove();
 }
+
+window.toggleComment = function (commentId) {
+    const commentEl = document.getElementById(commentId);
+    const toggleEl = event.target; // The clicked "view more/less" element
+
+    if (commentEl.classList.contains('expanded')) {
+        // Collapse
+        commentEl.classList.remove('expanded');
+        toggleEl.textContent = 'view more';
+    } else {
+        // Expand
+        commentEl.classList.add('expanded');
+        toggleEl.textContent = 'view less';
+    }
+}

src/public/style.css

@@ -266,9 +266,9 @@ textarea {
   margin: 4px 0;
   display: flex;
   flex-wrap: wrap;
-  /* Allow wrapping on small screens but keep tight on large */
   align-items: center;
-  gap: 10px;
+  gap: 6px;
+  max-width: 100%;
 }
 
 .today-line {
@@ -311,17 +311,77 @@ textarea {
 /* Log Line Elements */
 .date {
   min-width: 120px;
+  flex-shrink: 0;
+}
+
+.dose {
+  flex-shrink: 0;
 }
 
 .stars {
   color: var(--warn-color);
   font-family: sans-serif;
+  flex-shrink: 0;
+}
+
+.emoji {
+  flex-shrink: 0;
 }
 
 /* Ensure stars don't use monospace if it breaks? actually Fira Code is fine. */
+.comment-wrapper {
+  display: inline;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 .comment {
   font-style: italic;
   color: #aaa;
+  display: inline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.comment-wrapper:not(:has(.comment.expanded)) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.comment-wrapper:not(:has(.comment.expanded)) .comment {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.comment.expanded {
+  white-space: normal;
+  word-wrap: break-word;
+  overflow: visible;
+  display: inline;
+}
+
+.view-toggle {
+  color: var(--accent-color);
+  cursor: pointer;
+  text-decoration: underline;
+  font-size: 0.85em;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.comment.expanded ~ .view-toggle {
+  display: inline;
+  margin-left: 4px;
+}
+
+.view-toggle:hover {
+  color: var(--text-color);
+  text-shadow: 0 0 5px var(--text-color);
 }
 
 /* Calendar Styles */