stratin tables note expand on click

v2realbot/static/js/mytables.js

@@ -792,6 +792,22 @@ var stratinRecords =
                     return '<div class="tdnowrap" data-bs-toggle="tooltip" data-bs-placement="top" title="'+data+'">'+data+'</i>'
                 },
                 },
+            {
+                targets: 10,
+                render: function(data, type, row, meta) {
+                    var stateClass = 'truncated-text';
+                    var uniqueId = 'note-' + row.id;
+    
+                    if (localStorage.getItem(uniqueId) === 'expanded') {
+                        stateClass = 'expanded-text';
+                    }
+    
+                    if (type === 'display') {
+                        return '<div class="' + stateClass + '" id="' + uniqueId + '">' + data + '</div>';
+                    }
+                    return data;
+                },
+            },
             ],
         order: [[1, 'asc']],
         select: {
@@ -806,6 +822,21 @@ var stratinRecords =
         //}
         } );
 
+
+        $('#stratinTable tbody').on('click', '.truncated-text, .expanded-text', function() {
+            var div = $(this);
+            var isExpanded = div.hasClass('expanded-text');
+            var id = div.attr('id');
+    
+            div.toggleClass('expanded-text truncated-text');
+            
+            if (isExpanded) {
+                localStorage.setItem(id, 'collapsed');
+            } else {
+                localStorage.setItem(id, 'expanded');
+            }
+        });
+
 //runner table
 var runnerRecords = 
     $('#runnerTable').DataTable( {

v2realbot/static/main.css

@@ -7,6 +7,19 @@
   --dt-row-selected-text: 173,181,189;
 }
 
+.truncated-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px; /* Adjust as needed */
+  display: inline-block;
+}
+
+.expanded-text {
+  white-space: normal;
+  overflow: visible;
+}
+
 .pagination {
   --bs-pagination-padding-x: 0.45rem;
   --bs-pagination-padding-y: 0.15rem;
@@ -105,7 +118,8 @@
 }
 
 tbody, td, tfoot, th, thead, tr {
-  border-color: #7d7d8a;
+  /* border-color: #7d7d8a; */
+  border-color: #2a2a2a;
   border-style: solid;
   border-width: 0;
   padding: 4px;