UX: minor style adjustments for rewind on mobile (#36633)

awesomerobot · web-flow · commit 07c7ce39894c · 2025-12-11T10:28:27.000-05:00
Some minor adjustments for small screen based on user feedback Emoji misalignment seen as a mistake rather than intentional, don't care enough to keep it! Before: <img width="568" height="304" alt="image" src="https://github.com/user-attachments/assets/37c65a4c-b45f-4af4-9b57-9ac789dbab6f" /> After: <img width="568" height="248" alt="image" src="https://github.com/user-attachments/assets/6886fb58-be97-49fc-aff8-8c3ba5849a80" /> On smaller screens, the header tab style looks like a mistake rather than intentional when the name is this long... so I just switch the style for smaller screens to avoid it Before: <img width="1070" height="1040" alt="image" src="https://github.com/user-attachments/assets/32b3ac27-2ada-477a-9be3-37c8dc47815d" /> After: <img width="1068" height="1060" alt="image" src="https://github.com/user-attachments/assets/e4db8297-7d41-47e7-8f6f-804fdc03657c" />
diff --git a/plugins/discourse-rewind/assets/stylesheets/common/post-received-reactions.scss b/plugins/discourse-rewind/assets/stylesheets/common/post-received-reactions.scss
@@ -121,30 +121,11 @@
   @media screen and (width <= 475px) {
     .scale {
       width: min-content;
-    }
-
-    .scale:nth-child(1) {
-      padding: 0.15em;
-      display: none;
-    }
-
-    .scale:nth-child(2) {
-      padding: 0.2em;
-      margin-top: 10px;
-    }
-
-    .scale:nth-child(3) {
-      padding: 0.2em;
-      margin-top: 20px;
-    }
-
-    .scale:nth-child(4) {
       padding: 0.2em;
     }
 
     .scale:nth-child(5) {
-      padding: 0.2em;
-      margin-top: 20px;
+      display: none;
     }
   }
 }
diff --git a/plugins/discourse-rewind/assets/stylesheets/common/post-used-reactions.scss b/plugins/discourse-rewind/assets/stylesheets/common/post-used-reactions.scss
@@ -11,6 +11,20 @@
     width: 100%;
   }
 
+  @media screen and (width <= 600px) {
+    .rewind-report-title {
+      width: 100%;
+      box-sizing: border-box;
+      border-radius: var(--rewind-border-radius) var(--rewind-border-radius) 0 0;
+      padding-top: var(--space-4);
+    }
+
+    .rewind-card {
+      border-radius: 0 0 var(--rewind-border-radius) var(--rewind-border-radius);
+      padding-top: 0;
+    }
+  }
+
   .rewind-reactions-row {
     display: grid;
     grid-template-columns: 25px 50px 1fr;
