2 files changed, 59 insertions, 14 deletions

diff --git a/http/public/scripts/feed-condense-content.js b/http/public/scripts/feed-condense-content.js
index 9f2d904..984dbce 100644
--- a/http/public/scripts/feed-condense-content.js
+++ b/http/public/scripts/feed-condense-content.js
@@ -1,25 +1,67 @@
 const expandedClass = "e-content--expanded";
 
 export function toggleContentExpanded(id) {
-  const content = document.querySelector(`[data-content-id=${id}`);
+  const content = document.querySelector(`.e-content[data-content-id="${id}"]`);
+  const buttonBefore = document.querySelector(
+    `button:has(+ .e-content[data-content-id="${id}"])`,
+  );
+  const buttonAfter = document.querySelector(
+    `.e-content[data-content-id="${id}"] + button`,
+  );
+
   if (!content) {
     throw new Error(`No content found with ID: ${id}`);
   }
   const classes = content.getAttribute("class").split(" ");
-  if (classes.includes(expandedClass)) {
+  const wasExpanded = classes.includes(expandedClass);
+  if (wasExpanded) {
     const newClasses = classes.filter((c) => c != expandedClass);
     content.setAttribute("class", newClasses.join(" "));
   } else {
     content.setAttribute("class", [...classes, expandedClass].join(" "));
   }
+
+  if (wasExpanded) {
+    if (!buttonBefore) {
+      console.warn("Tried to remove 'Read less' button but could not find it");
+    } else {
+      buttonBefore.remove();
+    }
+    if (!buttonAfter) {
+      console.warn(
+        "Tried to toggle 'Read less' button to say 'Read more' but could not find it",
+      );
+    } else {
+      buttonAfter.textContent = "Read more";
+    }
+  } else {
+    if (!buttonAfter) {
+      console.warn(
+        "Tried to toggle 'Read more' button to say 'Read less' but could not find it",
+      );
+    } else {
+      buttonAfter.textContent = "Read less";
+    }
+    if (buttonBefore) {
+      buttonBefore.remove();
+    }
+    const newButtonBefore = createExpandCondenseButton(id, "Read less");
+    content.insertAdjacentElement("beforebegin", newButtonBefore);
+  }
 }
 
 export function addExpandItemButtons() {
   for (const content of document.querySelectorAll(".e-content")) {
     const contentId = crypto.randomUUID();
     content.setAttribute("data-content-id", contentId);
-    const button = new HTMLButtonElement();
-    button.addEventListener("click", () => toggleContentExpanded(contentId));
+    const button = createExpandCondenseButton(contentId, "Read more");
     content.insertAdjacentElement("afterend", button);
   }
 }
+
+function createExpandCondenseButton(contentId, initialText) {
+  const button = document.createElement("button");
+  button.textContent = initialText;
+  button.addEventListener("click", () => toggleContentExpanded(contentId));
+  return button;
+}
diff --git a/http/src/css/feed.uppcss b/http/src/css/feed.uppcss
index 8724b9f..d90a8cd 100644
--- a/http/src/css/feed.uppcss
+++ b/http/src/css/feed.uppcss
@@ -1,9 +1,9 @@
 /* Assumes there is at most one level of subheading for sub-dividing entries */
-.h-feed :is(h2, h3, h4, h5, h6) {
+.h-feed > :is(h2, h3, h4, h5, h6) {
   margin-block-start: var(--spacing-block-md);
 }
 
-.h-feed ul:has(> .h-entry) {
+ul:has(> .h-entry) {
   list-style-type: none;
   margin-inline: 0;
 
@@ -12,26 +12,26 @@
   }
 }
 
-.h-feed .h-entry {
+.h-entry {
   display: flex;
   flex-direction: column;
 }
 
-.h-feed .h-entry + .h-entry {
+.h-entry + .h-entry {
   margin-block-start: var(--spacing-block-md);
 }
 
-.h-feed .h-entry > * {
+.h-entry > * {
   order: 1;
   margin: 0;
 }
 
-.h-feed .h-entry .dt-published {
+.h-entry .dt-published {
   order: 0;
   font-size: var(--font-size-sm);
 }
 
-.h-feed .h-entry .p-name {
+.h-entry .p-name {
   font-size: var(--font-size-md);
   font-weight: 400;
 }
@@ -44,13 +44,16 @@
   content: ' >';
 }
 
-.e-content:not(.e-content--expanded) {
-  height: 10rem;
+.e-content {
   border-bottom: solid 1px;
+  &:not(.e-content--expanded) {
+    height: 10rem;
+    overflow: clip;
+  }
 }
 
 .h-entry > button {
-  width: min-content;
+  width: max-content;
   align-self: center;
   margin-block-start: var(--spacing-block-xs);
 }