Fix a few visual issues with annual reports in web UI (#32807)

app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx

@@ -7,16 +7,17 @@ export const MostUsedHashtag: React.FC<{
 }> = ({ data }) => {
   const hashtag = data[0];
 
-  if (!hashtag) {
-    return (
-      <div className='annual-report__bento__box annual-report__summary__most-used-hashtag' />
-    );
-  }
-
   return (
     <div className='annual-report__bento__box annual-report__summary__most-used-hashtag'>
       <div className='annual-report__summary__most-used-hashtag__hashtag'>
-        #{hashtag.name}
+        {hashtag ? (
+          <>#{hashtag.name}</>
+        ) : (
+          <FormattedMessage
+            id='annual_report.summary.most_used_hashtag.none'
+            defaultMessage='None'
+          />
+        )}
       </div>
       <div className='annual-report__summary__most-used-hashtag__label'>
         <FormattedMessage

app/javascript/mastodon/features/annual_report/percentile.tsx

@@ -22,9 +22,9 @@ export const Percentile: React.FC<{
           percentage: () => (
             <div className='annual-report__summary__percentile__number'>
               <FormattedNumber
-                value={percentile / 100}
+                value={Math.min(percentile, 99) / 100}
                 style='percent'
-                maximumFractionDigits={1}
+                maximumFractionDigits={percentile < 1 ? 1 : 0}
               />
             </div>
           ),

app/javascript/mastodon/locales/en.json

@@ -101,6 +101,7 @@
   "annual_report.summary.highlighted_post.possessive": "{name}'s",
   "annual_report.summary.most_used_app.most_used_app": "most used app",
   "annual_report.summary.most_used_hashtag.most_used_hashtag": "most used hashtag",
+  "annual_report.summary.most_used_hashtag.none": "None",
   "annual_report.summary.new_posts.new_posts": "new posts",
   "annual_report.summary.percentile.text": "<topLabel>That puts you in the top</topLabel><percentage></percentage><bottomLabel>of Mastodon users.</bottomLabel>",
   "annual_report.summary.percentile.we_wont_tell_bernie": "We won't tell Bernie.",

app/javascript/styles/mastodon-light/diff.scss

@@ -535,3 +535,10 @@ a.sparkline {
 ::-webkit-scrollbar-thumb {
   opacity: 0.25;
 }
+
+.notification-group--annual-report {
+  .notification-group__icon,
+  .notification-group__main .link-button {
+    color: var(--indigo-3);
+  }
+}

app/javascript/styles/mastodon/annual_reports.scss

@@ -103,6 +103,11 @@
           background-color: var(--goldenrod-2);
         }
       }
+
+      .status-card,
+      .hashtag-bar {
+        display: none;
+      }
     }
 
     &__followers {
@@ -237,7 +242,7 @@
       }
 
       &__number {
-        font-size: 61px;
+        font-size: 54px;
         font-weight: 600;
         line-height: 73px;
         color: var(--goldenrod-2);
@@ -306,7 +311,7 @@
 }
 
 .annual-report-modal {
-  max-width: 480px;
+  max-width: 600px;
   background: var(--indigo-1);
   border-radius: 16px;
   display: flex;