Put back the show more / show less behavior for item page trades

I guess I deleted this a while ago without really noticing… I think I'd
at some point like to replace this with like, the DTI 2020 improved
table layout thing, but I figured this would be pretty quick to throw
in and make the page not feel like a pain to use lmao

app/assets/stylesheets/items/_show.sass

@@ -116,11 +116,12 @@ body.items-show
         &:first-child
           margin-bottom: .5em
 
-        &.overflows
+        &[data-overflows]
+          overflow: hidden
           .toggle
             display: block
 
-        &.showing-more
+        &[data-showing-more]
           .toggle
             .less
               display: block
@@ -138,8 +139,10 @@ body.items-show
         position: absolute
         right: 0
 
-        &:hover
-          text-decoration: underline
+        button
+          +reset-awesome-button
+          &:hover
+            text-decoration: underline
 
         .less
           display: none

app/javascript/item-page.js

@@ -13,3 +13,29 @@ ReactDOM.render(
   </AppProvider>,
   rootNode,
 );
+
+try {
+  const tradeHangers = document.querySelector("#trade-hangers");
+  const tradeSections = document.querySelectorAll("#trade-hangers p");
+  for (const section of tradeSections) {
+    const oneLine = parseFloat(getComputedStyle(section)['line-height']);
+    const maxHeight = oneLine * 2;
+
+    if (section.offsetHeight > maxHeight) {
+      section.style.maxHeight = `${maxHeight}px`;
+      section.setAttribute("data-overflows", "");
+    }
+
+    section.querySelector(".more")?.addEventListener("click", (event) => {
+      section.setAttribute("data-showing-more", "");
+      section.style.maxHeight = "none";
+    });
+
+    section.querySelector(".less")?.addEventListener("click", (event) => {
+      section.removeAttribute("data-showing-more");
+      section.style.maxHeight = `${maxHeight}px`;
+    });
+  }
+} catch (error) {
+  console.error("Error applying trade list more/less toggle", error);
+}

app/views/items/show.html.haml

@@ -46,8 +46,8 @@
             = trading_users_header(owned, @trading_users_by_owned[owned].size)
           = render_trading_users(owned)
           %span.toggle
-            %span.more= t '.trading_users.show_more'
-            %span.less= t '.trading_users.show_less'
+            %button.more= t '.trading_users.show_more'
+            %button.less= t '.trading_users.show_less'
 
   - if user_signed_in?
     #your-items-form