Fix raised hands list title and add hint for order

Co-authored-by: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>

_locales/en/messages.json

@@ -1698,9 +1698,13 @@
     "description": "Shown in the call pending join request list to describe how many people are requesting to join"
   },
   "icu:CallingRaisedHandsList__Title": {
-    "messageformat": "Raised hands · {count, plural, one {# person} other {# people}}",
+    "messageformat": "{count, plural, one {# raised hand} other {# raised hands}}",
     "description": "Shown in the call raised hands list to describe how many people have active raised hands"
   },
+  "icu:CallingRaisedHandsList__TitleHint": {
+    "messageformat": "(first to last)",
+    "description": "Shown in the call raised hands list next to the raised hands count to explain list ordering"
+  },
   "icu:CallingReactions--me": {
     "messageformat": "You",
     "description": "Label next to in-call reactions to indicate that the current user sent that reaction."

stylesheets/components/CallingRaisedHandsList.scss

@@ -36,6 +36,14 @@
   align-items: start;
 }
 
+.CallingRaisedHandsList__TitleHint {
+  font-weight: normal;
+}
+
+.CallingRaisedHandsList .module-calling-participants-list__contact:last-child {
+  margin-block-end: 4px;
+}
+
 .CallingRaisedHandsList__Button {
   @include button-reset;
   position: absolute;

ts/components/CallingRaisedHandsList.tsx

@@ -77,6 +77,12 @@ export function CallingRaisedHandsList({
             {i18n('icu:CallingRaisedHandsList__Title', {
               count: participants.length,
             })}
+            {participants.length > 1 ? (
+              <span className="CallingRaisedHandsList__TitleHint">
+                {' '}
+                {i18n('icu:CallingRaisedHandsList__TitleHint')}
+              </span>
+            ) : null}
           </div>
           <button
             type="button"