Display the indicator even with one message in pinned message banner (#12946)

* Display the indicator even with one message

* Update e2e tests

Author: florianduros

playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-1-Msg1-linux.png

@@ -80,7 +80,7 @@
             grid-area: title;
             font: var(--cpd-font-body-sm-regular);
             color: var(--cpd-color-text-action-accent);
-            height: 20px;
+            line-height: 20px;
 
             .mx_PinnedMessageBanner_title_counter {
                 font: var(--cpd-font-body-sm-semibold);
@@ -90,7 +90,7 @@
         .mx_PinnedMessageBanner_message {
             grid-area: message;
             font: var(--cpd-font-body-sm-regular);
-            height: 20px;
+            line-height: 20px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -114,6 +114,10 @@
     height: 63px;
 
     .mx_PinnedMessageBanner_content {
-        grid-template: "pinIcon message" auto;
+        grid-template: "indicators pinIcon message" auto;
+
+        .mx_PinnedMessageBanner_message {
+            line-height: 40px;
+        }
     }
 }

playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg1-linux.png

@@ -102,7 +102,7 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
                 onClick={onBannerClick}
             >
                 <div className="mx_PinnedMessageBanner_content">
-                    {!isSinglePinnedEvent && <Indicators count={eventCount} currentIndex={currentEventIndex} />}
+                    <Indicators count={eventCount} currentIndex={currentEventIndex} />
                     <PinIcon width="20" className="mx_PinnedMessageBanner_PinIcon" />
                     {!isSinglePinnedEvent && (
                         <div className="mx_PinnedMessageBanner_title" data-testid="banner-counter">

playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg2-linux.png

@@ -219,6 +219,14 @@ exports[`<PinnedMessageBanner /> should render a single pinned event 1`] = `
       <div
         class="mx_PinnedMessageBanner_content"
       >
+        <div
+          class="mx_PinnedMessageBanner_Indicators"
+        >
+          <div
+            class="mx_PinnedMessageBanner_Indicator mx_PinnedMessageBanner_Indicator--active"
+            data-testid="banner-indicator"
+          />
+        </div>
         <div
           class="mx_PinnedMessageBanner_PinIcon"
           width="20"