diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-1-Msg1-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-1-Msg1-linux.png
index d6892c5bbff22d3ae7c10bd62f3de57ebbc44189..c3c4d57acf40e7b2c29b31738a7191f3c029ab21 100644
Binary files a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-1-Msg1-linux.png and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-1-Msg1-linux.png differ
diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg1-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg1-linux.png
index 153ad2d07f0b9febf69e9c46a38004a2b7cd7516..04fb9de00c3efab02bdb4a99c768b4f23f743dc7 100644
Binary files a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg1-linux.png and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg1-linux.png differ
diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg2-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg2-linux.png
index 98396be1f829c1fbc0cca1ee16595c6979919759..29fc76f02ae73e70b6eff053fa051452a1dc624d 100644
Binary files a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg2-linux.png and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg2-linux.png differ
diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg1-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg1-linux.png
index 8169ca9cfd14b9ae5ab628bc8fd8c2c281e3086e..8b4225ef38223ed50c1c3cc10a62c8b313ba6692 100644
Binary files a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg1-linux.png and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg1-linux.png differ
diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg2-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg2-linux.png
index 7b6c9948212df8b8cdcd71027b06ae0b4debdcd4..6d617ecb0a86067f074a2d5cdd0a3c5852bd716b 100644
Binary files a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg2-linux.png and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg2-linux.png differ
diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg3-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg3-linux.png
index dfec23cb59097a8272ed2f0b0bb50bada67f921c..5be7305d01551d553b3af2468a9731b3d40026c2 100644
Binary files a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg3-linux.png and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg3-linux.png differ
diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg4-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg4-linux.png
index 72abbbb2606cd0b0b5670ae7e146ff8e7d436bd9..ac88cee9bfdbf99df26015372457c0fed0f1c1b9 100644
Binary files a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg4-linux.png and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg4-linux.png differ
diff --git a/res/css/views/rooms/_PinnedMessageBanner.pcss b/res/css/views/rooms/_PinnedMessageBanner.pcss
index c6889aba757a668cd05b5ba7bd254028e59bd0ab..31cf3ece8a059ff075edb5f03f9fd2ec146e5356 100644
--- a/res/css/views/rooms/_PinnedMessageBanner.pcss
+++ b/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;
+ }
}
}
diff --git a/src/components/views/rooms/PinnedMessageBanner.tsx b/src/components/views/rooms/PinnedMessageBanner.tsx
index 1a82a232de19cc144fb5dbe356056a0b41a65161..0479e30ce9e7e04e3e722a7e2a6f5093a4b820a0 100644
--- a/src/components/views/rooms/PinnedMessageBanner.tsx
+++ b/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">
diff --git a/test/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap b/test/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
index 8fd241fd2f6699dfb1da62f9478c80428fd6610e..90b1efb6351f5adac4fa2813c9dd9dacea0ebed8 100644
--- a/test/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
+++ b/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"