Rename PostCSS files to .pcss (#9013)

* Rename PostCSS files to `.pcss`

* Make Stylelint happy

* Delint

* Rename new files too

* delint

* Fix bad comment placement

res/css/views/rooms/_AppsDrawer.pcss

@@ -21,7 +21,8 @@ $MinWidth: 240px;
 
 .mx_AppsDrawer {
     margin: $container-gap-width;
-    margin-right: calc($container-gap-width / 2); // The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
+    // The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
+    margin-right: calc($container-gap-width / 2);
     margin-bottom: 0; // No bottom margin for the correct gap to the CallView below.
     position: relative;
     display: flex;

res/css/views/rooms/_AuxPanel.pcss

@@ -25,21 +25,21 @@ limitations under the License.
     color: inherit;
 }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity=warning] {
+.m_RoomView_auxPanel_stateViews_span[data-severity="warning"] {
     font-weight: bold;
     color: orange;
 }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity=alert] {
+.m_RoomView_auxPanel_stateViews_span[data-severity="alert"] {
     font-weight: bold;
     color: red;
 }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity=normal] {
+.m_RoomView_auxPanel_stateViews_span[data-severity="normal"] {
     font-weight: normal;
 }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity=notice] {
+.m_RoomView_auxPanel_stateViews_span[data-severity="notice"] {
     font-weight: normal;
     color: $settings-grey-fg-color;
 }

res/css/views/rooms/_EventBubbleTile.pcss

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomView_body[data-layout=bubble] {
+.mx_RoomView_body[data-layout="bubble"] {
     .mx_RoomView_timeline, .mx_RoomView_statusArea, .mx_MessageComposer {
         width: 100%;
         max-width: 1200px;
@@ -22,8 +22,8 @@ limitations under the License.
     }
 }
 
-.mx_EventTile[data-layout=bubble],
-.mx_GenericEventListSummary[data-layout=bubble] {
+.mx_EventTile[data-layout="bubble"],
+.mx_GenericEventListSummary[data-layout="bubble"] {
     --avatarSize: 32px;
     --gutterSize: 11px;
     --cornerRadius: 12px;
@@ -37,7 +37,7 @@ limitations under the License.
     margin-inline-end: var(--EventTile_bubble-margin-inline-end);
 }
 
-.mx_EventTile[data-layout=bubble] {
+.mx_EventTile[data-layout="bubble"] {
     --EventTile_bubble_line-margin-inline-start: -9px;
     --EventTile_bubble_line-margin-inline-end: -12px;
     --EventTile_bubble_gap-inline: 5px;
@@ -120,7 +120,7 @@ limitations under the License.
         }
 
         .mx_DisambiguatedProfile_mxid {
-            margin-inline-start: 0; // Align mxid with truncated displayName inside mx_EventTile[data-layout=bubble]
+            margin-inline-start: 0; // Align mxid with truncated displayName inside mx_EventTile[data-layout="bubble"]
         }
     }
 
@@ -165,7 +165,7 @@ limitations under the License.
         margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
     }
 
-    &[data-self=false] {
+    &[data-self="false"] {
         .mx_EventTile_line {
             border-bottom-right-radius: var(--cornerRadius);
 
@@ -200,7 +200,7 @@ limitations under the License.
         --backgroundColor: $eventbubble-others-bg;
     }
 
-    &[data-self=true] {
+    &[data-self="true"] {
         .mx_EventTile_line {
             margin-inline-start: auto;
             border-bottom-left-radius: var(--cornerRadius);
@@ -360,7 +360,7 @@ limitations under the License.
         }
     }
 
-    &.mx_EventTile_continuation[data-self=false] .mx_EventTile_line {
+    &.mx_EventTile_continuation[data-self="false"] .mx_EventTile_line {
         border-top-left-radius: 0;
 
         .mx_MImageBody .mx_MImageBody_thumbnail_container,
@@ -372,7 +372,7 @@ limitations under the License.
             border-top-left-radius: 0;
         }
     }
-    &.mx_EventTile_lastInSection[data-self=false] .mx_EventTile_line {
+    &.mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line {
         border-bottom-left-radius: var(--cornerRadius);
 
         .mx_MImageBody .mx_MImageBody_thumbnail_container,
@@ -385,7 +385,7 @@ limitations under the License.
         }
     }
 
-    &.mx_EventTile_continuation[data-self=true] .mx_EventTile_line {
+    &.mx_EventTile_continuation[data-self="true"] .mx_EventTile_line {
         border-top-right-radius: 0;
 
         .mx_MImageBody .mx_MImageBody_thumbnail_container,
@@ -397,7 +397,7 @@ limitations under the License.
             border-top-right-radius: 0;
         }
     }
-    &.mx_EventTile_lastInSection[data-self=true] .mx_EventTile_line {
+    &.mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line {
         border-bottom-right-radius: var(--cornerRadius);
 
         .mx_MImageBody .mx_MImageBody_thumbnail_container,
@@ -432,7 +432,7 @@ limitations under the License.
         line-height: 1;
     }
 
-    &[data-has-reply=true] {
+    &[data-has-reply="true"] {
         > .mx_EventTile_line {
             flex-direction: column;
         }
@@ -536,7 +536,7 @@ limitations under the License.
     }
 }
 
-.mx_EventTile.mx_EventTile_noBubble[data-layout=bubble] {
+.mx_EventTile.mx_EventTile_noBubble[data-layout="bubble"] {
     --backgroundColor: transparent;
 
     .mx_EventTile_line.mx_EventTile_emote {
@@ -556,17 +556,17 @@ limitations under the License.
     }
 }
 
-.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
-.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble] {
+.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
+.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] {
     .mx_EventTile_line > a {
         // hide this timestamp as the tile will render its own
         display: none;
     }
 }
 
-.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
-.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
-.mx_EventTile.mx_EventTile_info[data-layout=bubble] {
+.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
+.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"],
+.mx_EventTile.mx_EventTile_info[data-layout="bubble"] {
     padding: 5px 0;
     display: flex;
     align-items: center;
@@ -580,10 +580,10 @@ limitations under the License.
     }
 }
 
-.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
-.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
-.mx_EventTile.mx_EventTile_info[data-layout=bubble],
-.mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] {
+.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
+.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"],
+.mx_EventTile.mx_EventTile_info[data-layout="bubble"],
+.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] {
     --backgroundColor: transparent;
     --gutterSize: 0;
 
@@ -613,7 +613,7 @@ limitations under the License.
     }
 }
 
-.mx_GenericEventListSummary[data-layout=bubble] {
+.mx_GenericEventListSummary[data-layout="bubble"] {
     .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
         // Avoid overflow of event info by cancelling width settings
         width: 100%;
@@ -622,16 +622,17 @@ limitations under the License.
     }
 
     // increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
-    &[data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] {
+    &[data-expanded="false"] + .mx_EventTile[data-layout="bubble"][data-self="true"] {
         margin-top: 20px;
     }
 
-    &[data-expanded=true] .mx_EventTile_info {
+    &[data-expanded="true"] .mx_EventTile_info {
         padding: 2px 0;
         margin-right: 0;
 
         .mx_MessageActionBar {
-            inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
+            // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
+            inset-inline-start: initial;
             inset-inline-end: 48px; // align with that of right-column bubbles
         }
 
@@ -646,6 +647,6 @@ limitations under the License.
     }
 }
 
-.mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
+.mx_EventTile_tileError[data-layout="bubble"] .mx_EventTile_line {
     flex-direction: column; // restore the centering
 }

res/css/views/rooms/_EventTile.pcss

@@ -119,7 +119,8 @@ $left-gutter: 64px;
         }
 
         .mx_EventTile_collapsedCodeBlock {
-            display: block !important; // !important needed due to .mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre
+            // !important needed due to .mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre
+            display: block !important;
         }
     }
 
@@ -160,12 +161,11 @@ $left-gutter: 64px;
         visibility: hidden;
     }
 
-    &[data-layout=irc],
-    &[data-layout=group] {
+    &[data-layout="irc"],
+    &[data-layout="group"] {
         // TODO: adjust the values for IRC layout
         --EventTile-box-shadow-offset-x: calc(50px + $selected-message-border-width);
         --EventTile-box-shadow-spread-radius: -50px;
-
         .mx_EventTile_e2eIcon {
             position: absolute;
         }
@@ -225,7 +225,9 @@ $left-gutter: 64px;
         &.mx_EventTile_selected {
             > .mx_EventTile_line {
                 // TODO: ultimately we probably want some transition on here.
-                box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) $accent;
+                box-shadow:
+                    inset var(--EventTile-box-shadow-offset-x) 0 0
+                    var(--EventTile-box-shadow-spread-radius) $accent;
             }
         }
 
@@ -245,27 +247,33 @@ $left-gutter: 64px;
             }
 
             &.mx_EventTile_verified .mx_EventTile_line {
-                box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) $e2e-verified-color;
+                box-shadow:
+                    inset var(--EventTile-box-shadow-offset-x) 0 0
+                    var(--EventTile-box-shadow-spread-radius) $e2e-verified-color;
             }
 
             &.mx_EventTile_unverified .mx_EventTile_line {
-                box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) $e2e-unverified-color;
+                box-shadow:
+                    inset var(--EventTile-box-shadow-offset-x) 0 0
+                    var(--EventTile-box-shadow-spread-radius) $e2e-unverified-color;
             }
 
             &.mx_EventTile_unknown .mx_EventTile_line {
-                box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) $e2e-unknown-color;
+                box-shadow:
+                    inset var(--EventTile-box-shadow-offset-x) 0 0
+                    var(--EventTile-box-shadow-spread-radius) $e2e-unknown-color;
             }
         }
     }
 
-    &[data-layout=bubble],
-    &[data-layout=group] {
+    &[data-layout="bubble"],
+    &[data-layout="group"] {
         .mx_EventTileBubble {
             margin-inline: auto;
         }
     }
 
-    &[data-layout=irc] {
+    &[data-layout="irc"] {
         --EventTile_irc_line_info-inset-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
 
         .mx_EventTile_msgOption {
@@ -308,7 +316,7 @@ $left-gutter: 64px;
         }
     }
 
-    &[data-layout=group] {
+    &[data-layout="group"] {
         .mx_EventTile_avatar {
             top: 14px;
             left: $spacing-8;
@@ -374,10 +382,12 @@ $left-gutter: 64px;
             }
 
             .mx_ThreadSummary {
-                max-width: min(calc(100% - $left-gutter - $inline-end-margin), 600px); // leave space on both left & right gutters
+                // leave space on both left & right gutters
+                max-width: min(calc(100% - $left-gutter - $inline-end-margin), 600px);
             }
 
-            // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
+            // on ELS we need the margin to allow interaction with the expand/collapse button
+            // which is normally in the RR gutter
         }
 
         &.mx_EventTile_continuation {
@@ -403,7 +413,8 @@ $left-gutter: 64px;
 
             .mx_EventTile_line {
                 padding-block: $spacing-block-start $spacing-block-end;
-                padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px); // 20px: avatar area
+                // 20px: avatar area
+                padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
 
                 .mx_MessageTimestamp {
                     top: 0;
@@ -420,7 +431,7 @@ $left-gutter: 64px;
         }
     }
 
-    &[data-layout=bubble] {
+    &[data-layout="bubble"] {
         .mx_EventTile_msgOption {
             .mx_ReadReceiptGroup {
                 position: absolute;
@@ -434,7 +445,6 @@ $left-gutter: 64px;
                 inset-block-end: calc(($font-18px - 24px) / 2);
             }
         }
-
         .mx_EventTileBubble {
             // Timestamps are inside the tile, so the width can be less constrained
             max-width: 600px;
@@ -446,7 +456,7 @@ $left-gutter: 64px;
     }
 }
 
-.mx_EventTile:not([data-layout=bubble]) {
+.mx_EventTile:not([data-layout="bubble"]) {
     max-width: 100%;
     clear: both;
     padding-top: 18px;
@@ -459,14 +469,14 @@ $left-gutter: 64px;
 }
 
 .mx_GenericEventListSummary {
-    &[data-layout=irc],
-    &[data-layout=group] {
+    &[data-layout="irc"],
+    &[data-layout="group"] {
         .mx_EventTile_line .mx_RedactedBody {
             line-height: 1; // remove spacing between lines
         }
     }
 
-    &[data-layout=irc] {
+    &[data-layout="irc"] {
         .mx_EventTile_line .mx_RedactedBody {
             padding-left: 24px; // 25px - 1px
 
@@ -477,11 +487,14 @@ $left-gutter: 64px;
 
         // Apply only collapsed events block
         > .mx_EventTile_line {
-            padding-left: calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding)); // 15 px of padding
+            /* stylelint-disable-next-line declaration-colon-space-after */
+            padding-left:
+                // 15 px of padding
+                calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding));
         }
     }
 
-    &[data-layout=group] {
+    &[data-layout="group"] {
         .mx_EventTile_line {
             padding-left: $left-gutter;
         }
@@ -825,13 +838,13 @@ $left-gutter: 64px;
 // is less pretty, but is easier to target because otherwise we need to define the
 // animation for when it's shown which means duplicating the style definition in
 // multiple places.
-.mx_EventTile:not(:hover):not(.mx_EventTile_actionBarFocused):not([data-whatinput='keyboard'] :focus-within):not(.focus-visible:focus-within) {
-    .mx_MessageActionBar .mx_Indicator {
+.mx_EventTile:not(:hover):not(.mx_EventTile_actionBarFocused):not([data-whatinput='keyboard'] :focus-within) {
+    &:not(.focus-visible:focus-within) .mx_MessageActionBar .mx_Indicator {
         animation: none;
     }
 }
 
-.mx_EventTile[data-shape=ThreadsList] {
+.mx_EventTile[data-shape="ThreadsList"] {
     --topOffset: $spacing-12;
     --leftOffset: 48px;
     $borderRadius: 8px;
@@ -879,11 +892,11 @@ $left-gutter: 64px;
         inset: $notification-inset-block-start $spacing-8 auto auto;
     }
 
-    &[data-notification=total]::before {
+    &[data-notification="total"]::before {
         background-color: $room-icon-unread-color;
     }
 
-    &[data-notification=highlight]::before {
+    &[data-notification="highlight"]::before {
         background-color: $alert;
     }
 
@@ -970,7 +983,7 @@ $left-gutter: 64px;
     }
 
     // ThreadsList has always group layout
-    &[data-layout=group]:hover {
+    &[data-layout="group"]:hover {
         .mx_EventTile_line {
             background-color: $system; // override $event-selected-color
             box-shadow: none; // don't show the verification left stroke in the thread list
@@ -978,7 +991,7 @@ $left-gutter: 64px;
     }
 }
 
-// For style rules of ThreadView, see _ThreadPanel.scss
+// For style rules of ThreadView, see _ThreadPanel.pcss
 .mx_ThreadView {
     --ThreadView_group_spacing-start: 56px; // 56px: 64px - 8px (padding)
     --ThreadView_group_spacing-end: 8px; // same as padding
@@ -1029,13 +1042,14 @@ $left-gutter: 64px;
                 .mx_EventTile_content,
                 .mx_RedactedBody {
                     width: auto;
-                    margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px); // 14px: avatar width, 6px: 20px - 14px
+                    // 14px: avatar width, 6px: 20px - 14px
+                    margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px);
                     font-size: $line-height;
                 }
             }
 
-            &[data-layout=irc],
-            &[data-layout=group] {
+            &[data-layout="irc"],
+            &[data-layout="group"] {
                 padding-top: 0;
 
                 .mx_EventTile_avatar {
@@ -1048,15 +1062,15 @@ $left-gutter: 64px;
                 }
             }
 
-            &[data-layout=bubble] {
+            &[data-layout="bubble"] {
                 .mx_EventTile_avatar {
                     inset-inline-start: 0;
                 }
             }
         }
 
-        &[data-layout=irc],
-        &[data-layout=group] {
+        &[data-layout="irc"],
+        &[data-layout="group"] {
             padding-block-start: $spacing-16;
 
             .mx_EventTile_line {
@@ -1068,7 +1082,7 @@ $left-gutter: 64px;
             }
         }
 
-        &[data-layout=group] {
+        &[data-layout="group"] {
             width: 100%;
 
             .mx_EventTile_content,
@@ -1145,7 +1159,7 @@ $left-gutter: 64px;
             }
         }
 
-        &[data-layout=bubble] {
+        &[data-layout="bubble"] {
             margin-inline: var(--BaseCard_EventTile-spacing-inline);
 
             &::before {
@@ -1163,7 +1177,7 @@ $left-gutter: 64px;
                 max-width: var(--EventBubbleTile_line-max-width);
             }
 
-            &[data-self=true] {
+            &[data-self="true"] {
                 align-items: flex-end;
 
                 .mx_EventTile_line.mx_EventTile_mediaLine {
@@ -1174,8 +1188,8 @@ $left-gutter: 64px;
     }
 
     .mx_GenericEventListSummary {
-        &[data-layout=irc],
-        &[data-layout=group] {
+        &[data-layout="irc"],
+        &[data-layout="group"] {
             > .mx_EventTile_line {
                 padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text
                 padding-inline-end: var(--ThreadView_group_spacing-end); // align summary text with message text
@@ -1188,7 +1202,7 @@ $left-gutter: 64px;
 .mx_MatrixChat_useCompactLayout {
     .mx_EventTile {
         // Override :not([data-layout="bubble"])
-        &[data-layout=group] {
+        &[data-layout="group"] {
             --MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
             --MatrixChat_useCompactLayout-top-avatar: 2px;
             --MatrixChat_useCompactLayout-top-e2eIcon: 3px;
@@ -1275,8 +1289,10 @@ $left-gutter: 64px;
             }
         }
 
-        &[data-shape=ThreadsList][data-notification]::before {
-            inset-block-start: calc($notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top));
+        &[data-shape="ThreadsList"][data-notification]::before {
+            /* stylelint-disable-next-line declaration-colon-space-after */
+            inset-block-start:
+                calc($notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top));
         }
     }
 }

res/css/views/rooms/_MemberList.pcss

@@ -66,7 +66,7 @@ limitations under the License.
 .mx_MemberList_query {
     height: 16px;
 
-    // stricter rule to override the one in _common.scss
+    // stricter rule to override the one in _common.pcss
     &[type="text"] {
         font-size: $font-12px;
     }

res/css/views/rooms/_NotificationBadge.pcss

@@ -22,7 +22,6 @@ limitations under the License.
     // Badges are structured a bit weirdly to work around issues with non-monospace
     // font styles. The badge pill is actually a background div and the count floats
     // within that. For example:
-    //
     //  ( 99+ ) <-- Rounded pill is a _bg class.
     //     ^- The count is an element floating within that.
 

res/css/views/rooms/_PinnedEventTile.pcss

@@ -71,8 +71,6 @@ limitations under the License.
         &::before {
             content: "";
             position: absolute;
-            //top: 0;
-            //left: 0;
             height: inherit;
             width: inherit;
             background: $secondary-content;

res/css/views/rooms/_RoomHeader.pcss

@@ -121,7 +121,7 @@ limitations under the License.
         background-color: $tertiary-content;
     }
 
-    &[aria-expanded=true] {
+    &[aria-expanded="true"] {
         background-color: $quinary-content;
 
         .mx_RoomHeader_chevron {

res/css/views/rooms/_RoomListHeader.pcss

@@ -54,7 +54,7 @@ limitations under the License.
             mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
         }
 
-        &[aria-expanded=true] {
+        &[aria-expanded="true"] {
             background-color: $quinary-content;
 
             &::before {

res/css/views/rooms/_RoomPreviewBar.pcss

@@ -126,7 +126,7 @@ limitations under the License.
     .mx_RoomPreviewBar_actions {
         flex-direction: column;
         .mx_AccessibleButton {
-            padding: 7px 50px; //extra wide
+            padding: 7px 50px; // extra wide
         }
 
         & > * {

res/css/views/rooms/_ThreadSummary.pcss

@@ -32,7 +32,8 @@ limitations under the License.
 
 .mx_ThreadSummary {
     min-width: 267px;
-    max-width: min(calc(100% - var(--EventTile_group_line-spacing-inline-start)), 600px); // leave space on both left & right gutters
+    // leave space on both left & right gutters
+    max-width: min(calc(100% - var(--EventTile_group_line-spacing-inline-start)), 600px);
     width: fit-content;
     height: 40px;
     position: relative;

res/css/views/rooms/_VoiceRecordComposerTile.pcss

@@ -101,7 +101,7 @@ limitations under the License.
 // midpoint: lamps take longer to turn off than they do to turn on, and the
 // extra frames give it a bit of a realistic punch for when the animation is
 // ramping back up to 100% opacity.
-//
+
 // Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s
 // (intended to be used in a loop for 2s animation speed)
 @keyframes recording-pulse {

res/css/views/rooms/_WhoIsTypingTile.pcss

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_WhoIsTypingTile {
-    margin-left: -18px; //offset padding from mx_RoomView_MessageList to center avatars
+    margin-left: -18px; // offset padding from mx_RoomView_MessageList to center avatars
     padding-top: 18px;
     display: flex;
     align-items: center;