diff --git a/res/css/views/rooms/_ReadReceiptGroup.scss b/res/css/views/rooms/_ReadReceiptGroup.scss
index 38dcf1f72a9..d532b0f90fd 100644
--- a/res/css/views/rooms/_ReadReceiptGroup.scss
+++ b/res/css/views/rooms/_ReadReceiptGroup.scss
@@ -49,7 +49,6 @@ limitations under the License.
         position: relative;
         display: block;
         height: 100%;
-        width: 36px;
 
         .mx_BaseAvatar {
             position: absolute;
diff --git a/src/components/views/rooms/ReadReceiptGroup.tsx b/src/components/views/rooms/ReadReceiptGroup.tsx
index 35ffa756a10..d1ba48744a4 100644
--- a/src/components/views/rooms/ReadReceiptGroup.tsx
+++ b/src/components/views/rooms/ReadReceiptGroup.tsx
@@ -32,7 +32,7 @@ import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
 
 const MAX_READ_AVATARS = 3;
 const READ_AVATAR_OFFSET = 10;
-const READ_AVATAR_SIZE = 16;
+export const READ_AVATAR_SIZE = 16;
 
 interface Props {
     readReceipts: IReadReceiptProps[];
@@ -75,10 +75,7 @@ export function ReadReceiptGroup(
             <div className="mx_EventTile_msgOption">
                 <div className="mx_ReadReceiptGroup">
                     <div className="mx_ReadReceiptGroup_button">
-                        <span
-                            className="mx_ReadReceiptGroup_container"
-                            style={{ width: READ_AVATAR_SIZE }}
-                        />
+                        <span className="mx_ReadReceiptGroup_container" />
                     </div>
                 </div>
             </div>