div.thread-parent { max-height: 600px; border: 2px solid rgba(0, 0, 0, 0.5); overflow: auto; } a.thread-child { display: flex; align-items: center; justify-content: flex-start; border: 1px solid rgba(255, 255, 255, 0.3); padding: 0 0 0 5px; border-radius: 5px; } div.thread-profile-image { flex-basis: 40px; margin-right: 5px; } div.thread-profile-image img { object-fit: cover; width: 32px; height: 32px; aspect-ratio: 1/1; border-radius: 50%; margin: 0 auto; } div.thread-title { flex-basis: 80%; font-weight: 550; opacity: 0.8; color: beige; } div.thread-notif { display: flex; flex-direction: column; flex-basis: 150px; font-size: 1rem; font-weight: 400; opacity: 0.7; margin: 3px; color: white; } The Battle Cats UnitXP has the wrong units or incomplete units. 10 minutes ago 3 comments window.addEventListener('load', async() => { const parent_widget_thread = document.querySelector('.thread-parent'); await loadThread(); async function loadThread() { await initFunctions(['supabase', 'moment']); let { data, error } = await supabase.from('sth_threads').select('id, title, date, images, category_id(title), user_id(prof_img)'); if (error) { window.alert(`${error.message}`); return; } data.forEach(async(item) => { // getting comment counts let comment_count = 0; let data = await supabase.from('sth_comments').select('*', { count: 'exact', head: true }).eq('thread_id', item.id); if(data.count) comment_count = data.count; parent_widget_thread.innerHTML += `<a id=${item.id} class="thread-child"href="https://supabase.com/dashboard/project/jyqsbxypqjsjwfwpvkhn/editor/350652?schema=public"> <div class="thread-profile-image"> <img src="${item.user_id.prof_img}"> </div> <div class="thread-title"> <p>${item.title}</p> </div> <div class="thread-notif"> <span>${moment(item.date).fromNow()}</span> <span>${countComment(comment_count)}</span> </div> </a>`; }); } function countComment(num) { // returns the comment and number return num > 1 ? `${num} comment`: `${num} comments`; } }, false);