UX: Adjust styles for long words

app/services/discourse_rewind/rewind/action/favorite_categories.rb

@@ -3,19 +3,7 @@
 # Topics visited grouped by category
 module DiscourseRewind
   class Rewind::Action::FavoriteCategories < Rewind::Action::BaseReport
-    FakeData = {
-      data: [
-        { category_id: 1, name: "cats" },
-        { category_id: 2, name: "dogs" },
-        { category_id: 3, name: "countries" },
-        { category_id: 4, name: "management" },
-        { category_id: 5, name: "things" },
-      ],
-      identifier: "favorite-categories",
-    }
     def call
-      return FakeData if Rails.env.development?
-
       favorite_categories =
         TopicViewItem
           .joins(:topic)

app/services/discourse_rewind/rewind/action/top_words.rb

@@ -7,7 +7,7 @@ module DiscourseRewind
         { word: "what", score: 100 },
         { word: "have", score: 90 },
         { word: "you", score: 80 },
-        { word: "achieved", score: 70 },
+        { word: "overachieved", score: 70 },
         { word: "this", score: 60 },
         { word: "week", score: 50 },
       ],

assets/javascripts/discourse/components/reports/favorite-categories.gjs

@@ -10,12 +10,12 @@ const FavoriteCategories = <template>
         }}</h2>
       <div class="rewind-report-container">
         {{#each @report.data as |data|}}
-          <a href={{concat "/c/-/" data.category_id}} class="rewind-card">
-            <p
+          <div class="rewind-card">
+            <a
               class="favorite-categories__category"
               href={{concat "/c/-/" data.category_id}}
-            >{{data.name}}</p>
-          </a>
+            >{{data.name}}</a>
+          </div>
         {{/each}}
       </div>
     </div>

assets/javascripts/discourse/components/reports/top-words/word-card.gjs

@@ -3,6 +3,7 @@ import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import { htmlSafe } from "@ember/template";
+import concatClass from "discourse/helpers/concat-class";
 import emoji from "discourse/helpers/emoji";
 import discourseLater from "discourse-common/lib/later";
 
@@ -45,6 +46,10 @@ export default class WordCard extends Component {
     };
   }
 
+  get longWord() {
+    return this.args.word.length >= 7;
+  }
+
   get cardStyle() {
     return htmlSafe(`${this.randomStyle}; ${this.mysteryData.color};`);
   }
@@ -72,7 +77,10 @@ export default class WordCard extends Component {
     <div
       {{on "click" this.handleClick}}
       {{on "mouseleave" this.handleLeave}}
-      class="rewind-card__wrapper"
+      class={{concatClass
+        "rewind-card__wrapper"
+        (if this.longWord "-long-word")
+      }}
       style={{this.cardStyle}}
       {{didInsert this.registerCardContainer}}
       role="button"

assets/stylesheets/common/top-words.scss

@@ -137,6 +137,16 @@
         0 0 / 6px 6px,
       var(--secondary-low);
   }
+  &.-long-word .rewind-card__title {
+    font-size: var(--font-0);
+  }
+  &.-long-word .rewind-card {
+    padding: 2px;
+  }
+  .rewind-card__title {
+    overflow-wrap: anywhere;
+    hyphens: auto;
+  }
   .rewind-card__image {
     image-rendering: pixelated;
   }