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

…12946)

* Display the indicator even with one message

* Update e2e tests

res/css/views/rooms/_PinnedMessageBanner.pcss

@@ -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;
+        }
     }
 }

src/components/views/rooms/PinnedMessageBanner.tsx

@@ -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">

test/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap

@@ -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"