diff --git a/.stylelintrc.js b/.stylelintrc.js
index e965468486..ab5c796837 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -48,5 +48,6 @@ module.exports = {
         "selector-no-vendor-prefix": null,
         "media-feature-name-no-vendor-prefix": null,
         "number-max-precision": null,
+        "no-invalid-double-slash-comments": true,
     },
 }
diff --git a/res/css/_animations.pcss b/res/css/_animations.pcss
index 26252fcaf6..01b05b5153 100644
--- a/res/css/_animations.pcss
+++ b/res/css/_animations.pcss
@@ -60,15 +60,15 @@ limitations under the License.
 
 @media (prefers-reduced-motion) {
     @keyframes mx--anim-pulse {
-        // Override all keyframes in reduced-motion
+        /* Override all keyframes in reduced-motion */
     }
 
     @keyframes mx_Dialog_lightbox_background_keyframes {
-        // Override all keyframes in reduced-motion
+        /* Override all keyframes in reduced-motion */
     }
 
     @keyframes mx_ImageView_panel_keyframes {
-        // Override all keyframes in reduced-motion
+        /* Override all keyframes in reduced-motion */
     }
 
     .mx_rtg--fade-enter-active {
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index 45e00d6ac7..862a6ad494 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -23,7 +23,7 @@ limitations under the License.
 @import "./_spacing.pcss";
 @import url("maplibre-gl/dist/maplibre-gl.css");
 
-$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
+$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); /* quadratic */
 
 $selected-message-border-width: 4px;
 
@@ -34,7 +34,7 @@ $slider-dot-size: 1em;
 $slider-selection-dot-size: 2.4em;
 
 $container-border-width: 8px;
-$container-gap-width: 8px; // only even numbers should be used because otherwise we get 0.5px margin values.
+$container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
 
 $timeline-image-border-radius: 8px;
 :root {
@@ -56,7 +56,7 @@ html {
        N.B. Breaks things when we have legitimate horizontal overscroll */
     height: 100%;
     overflow: hidden;
-    // Stop similar overscroll bounce in Firefox Nightly for macOS
+    /* Stop similar overscroll bounce in Firefox Nightly for macOS */
     overscroll-behavior: none;
 }
 
@@ -68,8 +68,8 @@ body {
     border: 0px;
     margin: 0px;
 
-    // needed to match the designs correctly on macOS
-    // see https://github.com/vector-im/element-web/issues/11425
+    /* needed to match the designs correctly on macOS */
+    /* see https://github.com/vector-im/element-web/issues/11425 */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
@@ -93,8 +93,8 @@ pre, code {
 }
 
 b {
-    // On Firefox, the default weight for `<b>` is `bolder` which results in no bold
-    // effect since we only have specific weights of our fonts available.
+    /* On Firefox, the default weight for `<b>` is `bolder` which results in no bold */
+    /* effect since we only have specific weights of our fonts available. */
     font-weight: bold;
 }
 
@@ -129,14 +129,14 @@ input[type="search"].mx_textinput_icon {
     background-position: 10px center;
 }
 
-// FIXME THEME - Tint by CSS rather than referencing a duplicate asset
+/* FIXME THEME - Tint by CSS rather than referencing a duplicate asset */
 input[type="text"].mx_textinput_icon.mx_textinput_search,
 input[type="search"].mx_textinput_icon.mx_textinput_search {
     background-image: url('$(res)/img/feather-customised/search-input.svg');
 }
 
-// dont search UI as not all browsers support it,
-// we implement it ourselves where needed instead
+/* dont search UI as not all browsers support it, */
+/* we implement it ourselves where needed instead */
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-results-button,
@@ -144,7 +144,7 @@ input[type="search"]::-webkit-search-results-decoration {
     display: none;
 }
 
-// Override Firefox's UA style so we get a consistent look across browsers
+/* Override Firefox's UA style so we get a consistent look across browsers */
 input::placeholder,
 textarea::placeholder {
     opacity: initial;
@@ -165,15 +165,15 @@ input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
     box-shadow: none;
 }
 
-// This is used to hide the standard outline added by browsers for
-// accessible (focusable) components. Not intended for buttons, but
-// should be used on things like focusable containers where the outline
-// is usually not helping anyone.
+/* This is used to hide the standard outline added by browsers for */
+/* accessible (focusable) components. Not intended for buttons, but */
+/* should be used on things like focusable containers where the outline */
+/* is usually not helping anyone. */
 *:focus:not(.focus-visible) {
     outline: none;
 }
 
-// override defaults
+/* override defaults */
 fieldset {
     display: inline-block;
     margin-inline: unset;
@@ -188,10 +188,10 @@ legend {
     border: none;
 }
 
-// .mx_textinput is a container for a text input
-// + some other controls like buttons, ...
-// it has the appearance of a text box so the controls
-// appear to be part of the input
+/* .mx_textinput is a container for a text input */
+/* + some other controls like buttons, ... */
+/* it has the appearance of a text box so the controls */
+/* appear to be part of the input */
 
 .mx_Dialog, .mx_MatrixChat_wrapper {
     .mx_textinput > input[type="text"],
@@ -210,7 +210,7 @@ legend {
         color: $input-darker-fg-color;
         border-radius: 4px;
         border: 1px solid rgba($primary-content, .1);
-        // these things should probably not be defined globally
+        /* these things should probably not be defined globally */
         margin: 9px;
     }
 
@@ -254,11 +254,10 @@ legend {
     border: 0;
 }
 
-// These are magic constants which are excluded from tinting, to let themes
-// (which only have CSS) tell the app what their non-tinted
-// colourscheme is by inspecting the stylesheet DOM.
-//
-// They are not used for layout!!
+/* These are magic constants which are excluded from tinting, to let themes */
+/* (which only have CSS) tell the app what their non-tinted */
+/* colourscheme is by inspecting the stylesheet DOM. */
+/* They are not used for layout!! */
 #mx_theme_accentColor {
     color: $accent;
 }
@@ -304,12 +303,12 @@ legend {
     overflow-y: auto;
 }
 
-// Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants.
+/* Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. */
 .mx_Dialog .markdown-body {
     font-family: inherit !important;
     white-space: normal !important;
     line-height: inherit !important;
-    color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
+    color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */
     font-size: $font-14px;
 
     pre,
@@ -318,13 +317,13 @@ legend {
         background-color: $codeblock-background-color;
     }
 
-    // this selector wrongly applies to code blocks too but we will unset it in the next one
+    /* this selector wrongly applies to code blocks too but we will unset it in the next one */
     code {
-        white-space: pre-wrap; // don't collapse spaces in inline code blocks
+        white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
     }
 
     pre code {
-        white-space: pre; // we want code blocks to be scrollable and not wrap
+        white-space: pre; /* we want code blocks to be scrollable and not wrap */
 
         >* {
             display: inline;
@@ -332,9 +331,9 @@ legend {
     }
 
     pre {
-        // have to use overlay rather than auto otherwise Linux and Windows
-        // Chrome gets very confused about vertical spacing:
-        // https://github.com/vector-im/vector-web/issues/754
+        /* have to use overlay rather than auto otherwise Linux and Windows */
+        /* Chrome gets very confused about vertical spacing: */
+        /* https://github.com/vector-im/vector-web/issues/754 */
         overflow-x: overlay;
         overflow-y: visible;
 
@@ -358,7 +357,7 @@ legend {
 .mx_Dialog .markdown-body h1,
 .mx_Dialog .markdown-body h2 {
     font-size: 1.5em;
-    border-bottom: none !important; // override GFM
+    border-bottom: none !important; /* override GFM */
 }
 
 .mx_Dialog .markdown-body a {
@@ -397,8 +396,8 @@ legend {
 }
 
 .mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
-    // Roughly half of what it would normally be - we don't want to black out
-    // the app, just make it clear that the dialogs are stacked.
+    /* Roughly half of what it would normally be - we don't want to black out */
+    /* the app, just make it clear that the dialogs are stacked. */
     opacity: 0.4;
 }
 
@@ -446,7 +445,7 @@ legend {
     text-align: center;
 }
 .mx_Dialog_header.mx_Dialog_headerWithCancel {
-    padding-right: 20px; // leave space for the 'X' cancel button
+    padding-right: 20px; /* leave space for the 'X' cancel button */
 }
 
 .mx_Dialog_title.danger {
@@ -487,7 +486,7 @@ legend {
     text-align: right;
 
     .mx_Dialog_buttons_additive {
-        // The consumer is responsible for positioning their elements.
+        /* The consumer is responsible for positioning their elements. */
         float: left;
     }
 }
@@ -499,12 +498,12 @@ legend {
     text-align: initial;
     margin-inline-start: auto;
 
-    // default gap among elements
-    column-gap: $spacing-8; // See margin-right below inside the button style
-    row-gap: 5px; // See margin-bottom below inside the button style
+    /* default gap among elements */
+    column-gap: $spacing-8; /* See margin-right below inside the button style */
+    row-gap: 5px; /* See margin-bottom below inside the button style */
 
     button {
-        margin: 0 !important; // override the margin settings
+        margin: 0 !important; /* override the margin settings */
     }
 }
 
@@ -526,7 +525,7 @@ legend {
     margin-right: 8px;
     margin-bottom: 5px;
 
-    // flip colours for the secondary ones
+    /* flip colours for the secondary ones */
     font-weight: 600;
     border: 1px solid $accent;
     color: $accent;
@@ -598,7 +597,7 @@ legend {
 }
 
 .mx_DialogDesignChanges_wrapper .mx_Dialog_fixedWidth {
-    max-width: 636px; // match splash image width
+    max-width: 636px; /* match splash image width */
 
     .mx_AccessibleButton_kind_link {
         font-size: inherit;
@@ -606,10 +605,10 @@ legend {
     }
 }
 
-// TODO: Review mx_GeneralButton usage to see if it can use a different class
-// These classes were brought in from the old UserSettings and are included here to avoid
-// breaking the app.
-// Ref: https://github.com/vector-im/element-web/issues/8420
+/* TODO: Review mx_GeneralButton usage to see if it can use a different class */
+/* These classes were brought in from the old UserSettings and are included here to avoid */
+/* breaking the app. */
+/* Ref: https://github.com/vector-im/element-web/issues/8420 */
 .mx_GeneralButton {
     @mixin mx_DialogButton;
     display: inline;
@@ -651,8 +650,8 @@ legend {
     margin-top: 69px;
 }
 
-// username colors
-// used by SenderProfile & RoomPreviewBar
+/* username colors */
+/* used by SenderProfile & RoomPreviewBar */
 .mx_Username_color1 {
     color: $username-variant1-color;
 }
@@ -694,7 +693,7 @@ legend {
     padding: 6px 8px;
 }
 
-// This is a workaround for our mixins not supporting child selectors
+/* This is a workaround for our mixins not supporting child selectors */
 .mx_Tooltip_dark {
     .mx_Tooltip_chevron::after {
         border-right-color: $tooltip-timeline-bg-color;
diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index 6903f473e1..444fa3b42a 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -1,4 +1,4 @@
-// autogenerated by rethemendex.sh
+/* autogenerated by rethemendex.sh */
 @import "./_animations.pcss";
 @import "./_common.pcss";
 @import "./_font-sizes.pcss";
diff --git a/res/css/_spacing.pcss b/res/css/_spacing.pcss
index 4022cb1f47..8bc2ac9391 100644
--- a/res/css/_spacing.pcss
+++ b/res/css/_spacing.pcss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// 1rem :: 10px
+/* 1rem :: 10px */
 
 $spacing-4: 4px;
 $spacing-8: 8px;
diff --git a/res/css/components/views/beacon/_BeaconListItem.pcss b/res/css/components/views/beacon/_BeaconListItem.pcss
index 42032b14c1..19ac4148cc 100644
--- a/res/css/components/views/beacon/_BeaconListItem.pcss
+++ b/res/css/components/views/beacon/_BeaconListItem.pcss
@@ -50,7 +50,7 @@ limitations under the License.
 }
 
 .mx_BeaconListItem_status {
-    // override beacon status padding
+    /* override beacon status padding */
     padding: 0 !important;
     margin-bottom: $spacing-8;
 
diff --git a/res/css/components/views/beacon/_BeaconViewDialog.pcss b/res/css/components/views/beacon/_BeaconViewDialog.pcss
index 0fff721053..da5fa1ef3b 100644
--- a/res/css/components/views/beacon/_BeaconViewDialog.pcss
+++ b/res/css/components/views/beacon/_BeaconViewDialog.pcss
@@ -29,7 +29,7 @@ limitations under the License.
     height: calc(80vh - 0.5px);
     overflow: hidden;
 
-    // sidebar is absolutely positioned inside
+    /* sidebar is absolutely positioned inside */
     position: relative;
 
     .mx_Dialog_header {
diff --git a/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss b/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
index de7dfa035c..aa89c801d6 100644
--- a/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
+++ b/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
@@ -25,8 +25,8 @@ limitations under the License.
     color: #fff;
     font-size: $font-10px;
 
-    // panel backdrops overlay the whole sidepanel
-    // go above to get hover for title
+    /* panel backdrops overlay the whole sidepanel */
+    /* go above to get hover for title */
     z-index: 1;
 }
 
diff --git a/res/css/components/views/beacon/_OwnBeaconStatus.pcss b/res/css/components/views/beacon/_OwnBeaconStatus.pcss
index cc22fd7a0c..f007124216 100644
--- a/res/css/components/views/beacon/_OwnBeaconStatus.pcss
+++ b/res/css/components/views/beacon/_OwnBeaconStatus.pcss
@@ -19,13 +19,13 @@ limitations under the License.
 }
 
 .mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
-    // align to top to make room for timestamp
-    // in bubble view
+    /* align to top to make room for timestamp */
+    /* in bubble view */
     align-self: start;
 }
 
 .mx_OwnBeaconStatus_destructiveButton {
-    // override button link_inline styles
+    /* override button link_inline styles */
     color: $alert !important;
     font-weight: $font-semi-bold !important;
 }
diff --git a/res/css/components/views/beacon/_ShareLatestLocation.pcss b/res/css/components/views/beacon/_ShareLatestLocation.pcss
index cbdf34b9d7..4c84a72b77 100644
--- a/res/css/components/views/beacon/_ShareLatestLocation.pcss
+++ b/res/css/components/views/beacon/_ShareLatestLocation.pcss
@@ -20,9 +20,9 @@ limitations under the License.
     color: $secondary-content;
 }
 
-// double class to be more specific than the general mx_CopyableText CSS rule
+/* double class to be more specific than the general mx_CopyableText CSS rule */
 .mx_CopyableText.mx_ShareLatestLocation_copy {
-    // override copyable text style to make compact
+    /* override copyable text style to make compact */
     .mx_CopyableText_copyButton {
         height: 13px;
         margin-left: $spacing-8 !important;
diff --git a/res/css/components/views/beacon/_StyledLiveBeaconIcon.pcss b/res/css/components/views/beacon/_StyledLiveBeaconIcon.pcss
index 5f9a1920e8..4600181d5a 100644
--- a/res/css/components/views/beacon/_StyledLiveBeaconIcon.pcss
+++ b/res/css/components/views/beacon/_StyledLiveBeaconIcon.pcss
@@ -25,7 +25,7 @@ limitations under the License.
     background-color: $location-live-color;
     border-color: $location-live-color;
     padding: 2px;
-    // colors icon
+    /* colors icon */
     color: white;
 }
 
diff --git a/res/css/components/views/location/_MapError.pcss b/res/css/components/views/location/_MapError.pcss
index 7dc8a684d1..9437df8b84 100644
--- a/res/css/components/views/location/_MapError.pcss
+++ b/res/css/components/views/location/_MapError.pcss
@@ -45,7 +45,7 @@ limitations under the License.
 
     .mx_MapError_heading {
         padding-top: $spacing-8;
-        // override h3 heading size
+        /* override h3 heading size */
         font-size: inherit !important;
         font-weight: normal !important;
     }
diff --git a/res/css/components/views/location/_Marker.pcss b/res/css/components/views/location/_Marker.pcss
index 7a1baccf9f..f1e0e38b55 100644
--- a/res/css/components/views/location/_Marker.pcss
+++ b/res/css/components/views/location/_Marker.pcss
@@ -29,7 +29,7 @@ limitations under the License.
     justify-content: center;
     align-items: center;
 
-    // caret down
+    /* caret down */
     &::before {
         content: '';
         border-left: 5px solid transparent;
diff --git a/res/css/components/views/location/_ShareType.pcss b/res/css/components/views/location/_ShareType.pcss
index 4dd49d4470..186365a2ba 100644
--- a/res/css/components/views/location/_ShareType.pcss
+++ b/res/css/components/views/location/_ShareType.pcss
@@ -62,7 +62,7 @@ limitations under the License.
     background-color: $accent;
     border-radius: 50%;
     border: 14px solid $accent;
-    // colors icon
+    /* colors icon */
     color: white;
     box-sizing: border-box;
 }
@@ -82,7 +82,7 @@ limitations under the License.
     border-style: solid;
     border-radius: 50%;
 
-    // Live is styled by StyledLiveBeaconIcon
+    /* Live is styled by StyledLiveBeaconIcon */
 
     &.Own {
         border-color: $accent;
@@ -92,7 +92,7 @@ limitations under the License.
         border-color: $accent;
         background-color: $accent;
         padding: 7px;
-        // colors icon
+        /* colors icon */
         color: white;
     }
 }
diff --git a/res/css/components/views/messages/_MBeaconBody.pcss b/res/css/components/views/messages/_MBeaconBody.pcss
index 446b7e6e3f..26f3653a84 100644
--- a/res/css/components/views/messages/_MBeaconBody.pcss
+++ b/res/css/components/views/messages/_MBeaconBody.pcss
@@ -39,7 +39,7 @@ limitations under the License.
 }
 
 .mx_MBeaconBody_withoutMapInfoLastUpdated {
-    // 48px lines up with icon in BeaconStatus
+    /* 48px lines up with icon in BeaconStatus */
     margin-top: -$spacing-8;
     padding: 0 $spacing-8 $spacing-8 48px;
 
@@ -50,15 +50,15 @@ limitations under the License.
 .mx_MBeaconBody_map {
     height: 100%;
     width: 100%;
-    z-index: 0; // keeps the entire map under the message action bars
+    z-index: 0; /* keeps the entire map under the message action bars */
 
     cursor: pointer;
 }
 
 .mx_MBeaconBody_mapFallback,
 .mx_MBeaconBody_mapError {
-    // pushes spinner/icon up
-    // to appear more centered with the footer
+    /* pushes spinner/icon up */
+    /* to appear more centered with the footer */
     padding-bottom: 50px !important;
 }
 
@@ -83,6 +83,6 @@ limitations under the License.
 }
 
 .mx_ReplyTile .mx_MBeaconBody {
-    // Prevent clicking a beacon within a reply
+    /* Prevent clicking a beacon within a reply */
     pointer-events: none;
 }
diff --git a/res/css/structures/_AutoHideScrollbar.pcss b/res/css/structures/_AutoHideScrollbar.pcss
index 6eba5aabbe..b76970d167 100644
--- a/res/css/structures/_AutoHideScrollbar.pcss
+++ b/res/css/structures/_AutoHideScrollbar.pcss
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// make any scrollbar grey and thin
+/* make any scrollbar grey and thin */
 html {
     scrollbar-color: $scrollbar-thumb-color transparent;
 }
-// scrollbar-width is not inherited (but -color is, why?!),
-// so declare it on every element
+/* scrollbar-width is not inherited (but -color is, why?!), */
+/* so declare it on every element */
 * {
     scrollbar-width: thin;
 }
@@ -34,7 +34,7 @@ html {
     background-color: $scrollbar-thumb-color;
 }
 
-// make auto-hide scrollbars not transparent again on hover
+/* make auto-hide scrollbars not transparent again on hover */
 .mx_AutoHideScrollbar:hover {
     scrollbar-color: $scrollbar-thumb-color transparent;
 
@@ -43,11 +43,11 @@ html {
     }
 }
 
-// make scrollbars transparent for autohide scrollbars
+/* make scrollbars transparent for autohide scrollbars */
 .mx_AutoHideScrollbar {
     overflow-x: hidden;
     overflow-y: auto;
-    overflow-y: overlay;    // where supported
+    overflow-y: overlay;    /* where supported */
     -ms-overflow-style: -ms-autohiding-scrollbar;
 
     &::-webkit-scrollbar {
diff --git a/res/css/structures/_BackdropPanel.pcss b/res/css/structures/_BackdropPanel.pcss
index 63a33276e1..18c544eea0 100644
--- a/res/css/structures/_BackdropPanel.pcss
+++ b/res/css/structures/_BackdropPanel.pcss
@@ -22,7 +22,7 @@ limitations under the License.
     width: 100%;
     overflow: hidden;
     filter: blur(var(--lp-background-blur));
-    // Force a new layer for the backdropPanel so it's better hardware supported
+    /* Force a new layer for the backdropPanel so it's better hardware supported */
     transform: translateZ(0);
 }
 
diff --git a/res/css/structures/_FilePanel.pcss b/res/css/structures/_FilePanel.pcss
index f270a01b71..6fe99e7760 100644
--- a/res/css/structures/_FilePanel.pcss
+++ b/res/css/structures/_FilePanel.pcss
@@ -87,7 +87,7 @@ limitations under the License.
             color: $light-fg-color;
         }
 
-        // anchor link as wrapper
+        /* anchor link as wrapper */
         .mx_EventTile_senderDetailsLink {
             text-decoration: none;
 
@@ -97,7 +97,7 @@ limitations under the License.
                 margin-top: -2px;
 
                 .mx_DisambiguatedProfile {
-                    color: $event-timestamp-color; // for ellipsis. Color of displayName and mxid is inherited
+                    color: $event-timestamp-color; /* for ellipsis. Color of displayName and mxid is inherited */
                 }
 
                 .mx_MessageTimestamp {
diff --git a/res/css/structures/_HeaderButtons.pcss b/res/css/structures/_HeaderButtons.pcss
index 2d26e66c1c..96f6f2e9f9 100644
--- a/res/css/structures/_HeaderButtons.pcss
+++ b/res/css/structures/_HeaderButtons.pcss
@@ -19,8 +19,8 @@ limitations under the License.
 }
 
 .mx_RoomHeader_buttons + .mx_HeaderButtons {
-    // remove the | separator line for when next to RoomHeaderButtons
-    // TODO: remove this once when we redo communities and make the right panel similar to the new rooms one
+    /* remove the | separator line for when next to RoomHeaderButtons */
+    /* TODO: remove this once when we redo communities and make the right panel similar to the new rooms one */
     &::before {
         content: unset;
     }
diff --git a/res/css/structures/_HomePage.pcss b/res/css/structures/_HomePage.pcss
index a85bb0c42b..6bfabd9c87 100644
--- a/res/css/structures/_HomePage.pcss
+++ b/res/css/structures/_HomePage.pcss
@@ -61,7 +61,7 @@ limitations under the License.
         width: fit-content;
 
         .mx_AccessibleButton {
-            padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin
+            padding: 73px 8px 15px; /* top: 20px top padding + 40px icon + 13px margin */
 
             width: 160px;
             min-height: 132px;
@@ -76,18 +76,18 @@ limitations under the License.
             font-weight: 600;
             font-size: $font-15px;
             line-height: $font-20px;
-            color: #fff; // on all themes
+            color: #fff; /* on all themes */
             background-color: $accent;
 
             &::before {
                 top: 20px;
-                left: 60px; // (160px-40px)/2
+                left: 60px; /* (160px-40px)/2 */
                 width: 40px;
                 height: 40px;
 
                 content: '';
                 position: absolute;
-                background-color: #fff; // on all themes
+                background-color: #fff; /* on all themes */
                 mask-repeat: no-repeat;
                 mask-size: contain;
             }
diff --git a/res/css/structures/_LeftPanel.pcss b/res/css/structures/_LeftPanel.pcss
index fbf8341592..d420e5b842 100644
--- a/res/css/structures/_LeftPanel.pcss
+++ b/res/css/structures/_LeftPanel.pcss
@@ -29,7 +29,7 @@ $roomListCollapsedWidth: 68px;
     max-width: 50%;
     position: relative;
 
-    // Contain the amount of layers rendered by constraining what actually needs re-layering via css
+    /* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
     contain: layout paint;
 }
 
@@ -37,7 +37,7 @@ $roomListCollapsedWidth: 68px;
     display: flex;
     flex-direction: row;
     flex: 1;
-    height: 100%; // ensure space panel is still scrollable with an outer wrapper
+    height: 100%; /* ensure space panel is still scrollable with an outer wrapper */
 
     .mx_LeftPanel_wrapper--user {
         background-color: $roomlist-bg-color;
@@ -54,20 +54,20 @@ $roomListCollapsedWidth: 68px;
 .mx_LeftPanel {
     background-color: $roomlist-bg-color;
 
-    // Create a row-based flexbox for the space panel and the room list
+    /* Create a row-based flexbox for the space panel and the room list */
     display: flex;
     contain: content;
     position: relative;
     flex-grow: 1;
     overflow: hidden;
 
-    // Note: The 'room list' in this context is actually everything that isn't the tag
-    // panel, such as the menu options, breadcrumbs, filtering, etc
+    /* Note: The 'room list' in this context is actually everything that isn't the tag */
+    /* panel, such as the menu options, breadcrumbs, filtering, etc */
     .mx_LeftPanel_roomListContainer {
         background-color: $roomlist-bg-color;
         flex: 1 0 0;
         min-width: 0;
-        // Create another flexbox (this time a column) for the room list components
+        /* Create another flexbox (this time a column) for the room list components */
         display: flex;
         flex-direction: column;
 
@@ -76,9 +76,9 @@ $roomListCollapsedWidth: 68px;
              * for internal whitespace in the breadcrumbs)
              */
             padding: 12px;
-            flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
+            flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
 
-            // Create another flexbox column for the rows to stack within
+            /* Create another flexbox column for the rows to stack within */
             display: flex;
             flex-direction: column;
         }
@@ -88,8 +88,8 @@ $roomListCollapsedWidth: 68px;
             overflow-x: scroll;
             margin: 12px 12px 0 12px;
             flex: 0 0 auto;
-            // Create yet another flexbox, this time within the row, to ensure items stay
-            // aligned correctly. This is also a row-based flexbox.
+            /* Create yet another flexbox, this time within the row, to ensure items stay */
+            /* aligned correctly. This is also a row-based flexbox. */
             display: flex;
             align-items: center;
             contain: content;
@@ -112,9 +112,9 @@ $roomListCollapsedWidth: 68px;
             padding: 12px 0 8px;
             border-bottom: 1px solid $quinary-content;
 
-            flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
+            flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
 
-            // Create a flexbox to organize the inputs
+            /* Create a flexbox to organize the inputs */
             display: flex;
             align-items: center;
 
@@ -186,11 +186,11 @@ $roomListCollapsedWidth: 68px;
         }
 
         .mx_LeftPanel_roomListWrapper {
-            // Make the y-scrollbar more responsive
+            /* Make the y-scrollbar more responsive */
             padding-right: 2px;
             overflow: hidden;
-            margin-top: 10px; // so we're not up against the search/filter
-            flex: 1 0 0; // needed in Safari to properly set flex-basis
+            margin-top: 10px; /* so we're not up against the search/filter */
+            flex: 1 0 0; /* needed in Safari to properly set flex-basis */
 
             &.mx_LeftPanel_roomListWrapper_stickyBottom {
                 padding-bottom: 32px;
@@ -202,12 +202,12 @@ $roomListCollapsedWidth: 68px;
         }
 
         .mx_LeftPanel_actualRoomListContainer {
-            position: relative; // for sticky headers
-            height: 100%; // ensure scrolling still works
+            position: relative; /* for sticky headers */
+            height: 100%; /* ensure scrolling still works */
         }
     }
 
-    // These styles override the defaults for the minimized (66px) layout
+    /* These styles override the defaults for the minimized (66px) layout */
     &.mx_LeftPanel_minimized {
         flex-grow: 0;
         min-width: unset;
@@ -222,7 +222,7 @@ $roomListCollapsedWidth: 68px;
             }
 
             .mx_LeftPanel_filterContainer {
-                // Organize the flexbox into a centered column layout
+                /* Organize the flexbox into a centered column layout */
                 flex-direction: column;
                 justify-content: center;
 
diff --git a/res/css/structures/_MainSplit.pcss b/res/css/structures/_MainSplit.pcss
index 00d3d3ca62..81f1a8ca05 100644
--- a/res/css/structures/_MainSplit.pcss
+++ b/res/css/structures/_MainSplit.pcss
@@ -24,10 +24,10 @@ limitations under the License.
 
 .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
     padding: $container-gap-width;
-    // The resizer should be centered: only half of the gap-width is handled by the right panel.
-    // The other half by the RoomView.
+    /* The resizer should be centered: only half of the gap-width is handled by the right panel. */
+    /* The other half by the RoomView. */
     padding-left: calc($container-gap-width / 2);
-    height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
+    height: calc(100vh - 51px); /* height of .mx_RoomHeader.light-panel */
 
     &:hover .mx_ResizeHandle_horizontal::before {
         position: absolute;
@@ -35,7 +35,7 @@ limitations under the License.
         left: 50%;
         transform: translate(-50%, -50%);
 
-        height: 64px; // to match width of the ones on roomlist
+        height: 64px; /* to match width of the ones on roomlist */
         width: 4px;
         border-radius: 4px;
 
diff --git a/res/css/structures/_MatrixChat.pcss b/res/css/structures/_MatrixChat.pcss
index 74d0f8fb4f..95d89cb3c8 100644
--- a/res/css/structures/_MatrixChat.pcss
+++ b/res/css/structures/_MatrixChat.pcss
@@ -52,7 +52,7 @@ limitations under the License.
 
 .mx_MatrixChat_syncError {
     color: $accent-fg-color;
-    background-color: #DF2A8B; // Only used here
+    background-color: #DF2A8B; /* Only used here */
     border-radius: 5px;
     display: table;
     padding: 30px;
@@ -76,22 +76,22 @@ limitations under the License.
     height: 100%;
 }
 
-// We'd like to remove this, but this makes matrixchat's resizehandle's
-// negative margin greater than its positive padding. If it's the same
-// or less, Safari and other WebKit based browsers get confused about overflows somehow and
-// https://github.com/vector-im/element-web/issues/19863 happens.
+/* We'd like to remove this, but this makes matrixchat's resizehandle's */
+/* negative margin greater than its positive padding. If it's the same */
+/* or less, Safari and other WebKit based browsers get confused about overflows somehow and */
+/* https://github.com/vector-im/element-web/issues/19863 happens. */
 .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
     margin: 0 calc(-5.5px - $container-gap-width / 2) 0 calc(-6.5px + $container-gap-width / 2);
-    // The condition to prevent bleeding is: (margin-left + margin-right < -11px)
-    // (IF there is NO margin on the leftPanel_wrapper)
-    // The resizeHandle does not change the gap between the left panel and the room view:
-    //  the resizeHandle width is:
-    //      11px =  10px (padding) + 1px (width)
-    //      and the total negative margin is -12px ->
-    //      the handle requires no space
-    // right: -6px left: -6px positions the element exactly on the edge of leftPanel.
-    // left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap.
-    // We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2)
+    /* The condition to prevent bleeding is: (margin-left + margin-right < -11px) */
+    /* (IF there is NO margin on the leftPanel_wrapper) */
+    /* The resizeHandle does not change the gap between the left panel and the room view: */
+    /*  the resizeHandle width is: */
+    /*      11px =  10px (padding) + 1px (width) */
+    /*      and the total negative margin is -12px -> */
+    /*      the handle requires no space */
+    /* right: -6px left: -6px positions the element exactly on the edge of leftPanel. */
+    /* left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap. */
+    /* We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2) */
 }
 
 .mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
@@ -103,7 +103,7 @@ limitations under the License.
         left: 50%;
         transform: translate(-50%, -50%);
 
-        height: 64px; // to match width of the ones on roomlist
+        height: 64px; /* to match width of the ones on roomlist */
         width: 4px;
         border-radius: 4px;
 
diff --git a/res/css/structures/_NonUrgentToastContainer.pcss b/res/css/structures/_NonUrgentToastContainer.pcss
index 826a812406..ba267342f3 100644
--- a/res/css/structures/_NonUrgentToastContainer.pcss
+++ b/res/css/structures/_NonUrgentToastContainer.pcss
@@ -18,7 +18,7 @@ limitations under the License.
     position: absolute;
     bottom: 30px;
     left: 28px;
-    z-index: 101; // same level as other toasts
+    z-index: 101; /* same level as other toasts */
 
     .mx_NonUrgentToastContainer_toast {
         padding: 10px 12px;
@@ -27,8 +27,8 @@ limitations under the License.
         font-size: $font-13px;
         margin-top: 8px;
 
-        // We don't use variables on the colours because we want it to be the same
-        // in all themes.
+        /* We don't use variables on the colours because we want it to be the same */
+        /* in all themes. */
         background-color: #17191c;
         color: #fff;
     }
diff --git a/res/css/structures/_NotificationPanel.pcss b/res/css/structures/_NotificationPanel.pcss
index a83c88a7ae..be5fd3f369 100644
--- a/res/css/structures/_NotificationPanel.pcss
+++ b/res/css/structures/_NotificationPanel.pcss
@@ -49,7 +49,7 @@ limitations under the License.
 
         .mx_EventTile_senderDetails,
         .mx_EventTile_line {
-            padding-left: 36px; // align with the room name
+            padding-left: 36px; /* align with the room name */
         }
 
         .mx_EventTile_senderDetails {
@@ -57,7 +57,7 @@ limitations under the License.
 
             a {
                 display: flex;
-                column-gap: 5px; // TODO: Use a spacing variable
+                column-gap: 5px; /* TODO: Use a spacing variable */
             }
         }
 
diff --git a/res/css/structures/_QuickSettingsButton.pcss b/res/css/structures/_QuickSettingsButton.pcss
index 153dedf6b7..532ddc867e 100644
--- a/res/css/structures/_QuickSettingsButton.pcss
+++ b/res/css/structures/_QuickSettingsButton.pcss
@@ -26,7 +26,7 @@ limitations under the License.
 
     &.expanded {
         margin-left: 20px;
-        padding-left: 44px; // align with toggle collapse button text
+        padding-left: 44px; /* align with toggle collapse button text */
         padding-right: 8px;
     }
 
@@ -56,7 +56,7 @@ limitations under the License.
     padding: 16px;
     width: max-content;
     min-width: 200px;
-    contain: unset; // let the dropdown paint beyond the context menu
+    contain: unset; /* let the dropdown paint beyond the context menu */
 
     > div > h2 {
         font-weight: $font-semi-bold;
diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss
index a25e172c73..0683e142b8 100644
--- a/res/css/structures/_RightPanel.pcss
+++ b/res/css/structures/_RightPanel.pcss
@@ -28,7 +28,7 @@ limitations under the License.
     contain: strict;
 
     .mx_RoomView_MessageList {
-        padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above
+        padding: 14px 18px; /* top and bottom is 4px smaller to balance with the padding set above */
     }
 }
 
@@ -61,8 +61,8 @@ limitations under the License.
     &::before {
         content: '';
         position: absolute;
-        top: 4px; // center with parent of 32px
-        left: 4px; // center with parent of 32px
+        top: 4px; /* center with parent of 32px */
+        left: 4px; /* center with parent of 32px */
         height: 24px;
         width: 24px;
         background-color: $icon-button-color;
diff --git a/res/css/structures/_RoomDirectory.pcss b/res/css/structures/_RoomDirectory.pcss
index 1589974741..f5ecc734d2 100644
--- a/res/css/structures/_RoomDirectory.pcss
+++ b/res/css/structures/_RoomDirectory.pcss
@@ -80,7 +80,7 @@ limitations under the License.
             font-size: $font-14px;
             line-height: $font-20px;
             color: $secondary-content;
-            max-width: 464px; // easier reading
+            max-width: 464px; /* easier reading */
         }
 
         > hr {
@@ -125,8 +125,8 @@ limitations under the License.
         mask: url("$(res)/img/feather-customised/user.svg");
         mask-repeat: no-repeat;
         mask-position: center;
-        // scale it down and make the size slightly bigger (16 instead of 14px)
-        // to avoid rendering artifacts
+        /* scale it down and make the size slightly bigger (16 instead of 14px) */
+        /* to avoid rendering artifacts */
         mask-size: 80%;
         width: 16px;
         height: 16px;
diff --git a/res/css/structures/_RoomSearch.pcss b/res/css/structures/_RoomSearch.pcss
index 8753137600..35c51307bc 100644
--- a/res/css/structures/_RoomSearch.pcss
+++ b/res/css/structures/_RoomSearch.pcss
@@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// Note: this component expects to be contained within a flexbox
+/* Note: this component expects to be contained within a flexbox */
 .mx_RoomSearch {
     flex: 1;
     min-width: 0;
     border-radius: 8px;
     background-color: $panel-actions;
-    // keep border thickness consistent to prevent movement
+    /* keep border thickness consistent to prevent movement */
     border: 1px solid transparent;
     height: 28px;
     padding: 1px;
 
-    // Create a flexbox for the icons (easier to manage)
+    /* Create a flexbox for the icons (easier to manage) */
     display: flex;
     align-items: center;
 
@@ -48,7 +48,7 @@ limitations under the License.
         color: $tertiary-content;
         flex: 1;
         min-width: 0;
-        // the following rules are to match that of a real input field
+        /* the following rules are to match that of a real input field */
         overflow: hidden;
         margin: 9px;
         font-weight: $font-semi-bold;
diff --git a/res/css/structures/_RoomStatusBar.pcss b/res/css/structures/_RoomStatusBar.pcss
index 51fea7a49a..c401301921 100644
--- a/res/css/structures/_RoomStatusBar.pcss
+++ b/res/css/structures/_RoomStatusBar.pcss
@@ -70,7 +70,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_unsentMessages {
     > div[role="alert"] {
-        // cheat some basic alignment
+        /* cheat some basic alignment */
         display: flex;
         align-items: center;
         min-height: 70px;
@@ -84,13 +84,13 @@ limitations under the License.
         margin-right: 12px;
 
         .mx_NotificationBadge {
-            // Override sizing from the default badge
+            /* Override sizing from the default badge */
             width: 24px !important;
             height: 24px !important;
             border-radius: 24px !important;
 
             .mx_NotificationBadge_count {
-                font-size: $font-16px !important; // override default
+                font-size: $font-16px !important; /* override default */
             }
         }
     }
@@ -112,7 +112,7 @@ limitations under the License.
 
         .mx_AccessibleButton {
             padding: 5px 10px;
-            padding-left: 30px; // 18px for the icon, 2px margin to text, 10px regular padding
+            padding-left: 30px; /* 18px for the icon, 2px margin to text, 10px regular padding */
             display: inline-block;
             position: relative;
 
@@ -123,14 +123,14 @@ limitations under the License.
             &::before {
                 content: '';
                 position: absolute;
-                left: 10px; // inset for regular button padding
+                left: 10px; /* inset for regular button padding */
                 background-color: $muted-fg-color;
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: contain;
                 width: 18px;
                 height: 18px;
-                top: 50%; // text sizes are dynamic
+                top: 50%; /* text sizes are dynamic */
                 transform: translateY(-50%);
             }
 
@@ -139,7 +139,7 @@ limitations under the License.
             }
 
             &.mx_RoomStatusBar_unsentRetry {
-                padding-left: 34px; // 28px from above, but +6px to account for the wider icon
+                padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */
 
                 &::before {
                     mask-image: url('$(res)/img/element-icons/retry.svg');
@@ -150,10 +150,10 @@ limitations under the License.
         .mx_InlineSpinner {
             vertical-align: middle;
             margin-right: 5px;
-            top: 1px; // just to help the vertical alignment be slightly better
+            top: 1px; /* just to help the vertical alignment be slightly better */
 
             & + span {
-                margin-right: 10px; // same margin/padding as the rightmost button
+                margin-right: 10px; /* same margin/padding as the rightmost button */
             }
         }
     }
diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss
index b19173a313..dae85b857e 100644
--- a/res/css/structures/_RoomView.pcss
+++ b/res/css/structures/_RoomView.pcss
@@ -20,7 +20,7 @@ limitations under the License.
     flex: 1;
     position: relative;
     justify-content: center;
-    // Contain the amount of layers rendered by constraining what actually needs re-layering via css
+    /* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
     contain: strict;
 }
 
@@ -171,7 +171,7 @@ limitations under the License.
     padding: 0 24px;
     margin-right: 30px;
     text-align: center;
-    margin-bottom: 80px; // visually center the content (intentional offset)
+    margin-bottom: 80px; /* visually center the content (intentional offset) */
 }
 
 .mx_RoomView_MessageList {
@@ -207,7 +207,7 @@ hr.mx_RoomView_myReadMarker {
     opacity: 1;
 }
 
-// Rooms with immersive content
+/* Rooms with immersive content */
 .mx_RoomView_immersive .mx_RoomHeader_wrapper {
     border: unset;
 }
@@ -274,7 +274,7 @@ hr.mx_RoomView_myReadMarker {
         margin-bottom: 4px;
 
         h2 {
-            margin-top: 6px; // TODO: Use a spacing variable
+            margin-top: 6px; /* TODO: Use a spacing variable */
         }
     }
 
diff --git a/res/css/structures/_SpaceHierarchy.pcss b/res/css/structures/_SpaceHierarchy.pcss
index 32dda6b90d..1d075f76f3 100644
--- a/res/css/structures/_SpaceHierarchy.pcss
+++ b/res/css/structures/_SpaceHierarchy.pcss
@@ -65,7 +65,7 @@ limitations under the License.
 
         .mx_AccessibleButton_kind_danger_outline,
         .mx_AccessibleButton_kind_primary_outline {
-            padding: 3px 12px; // to account for the 1px border
+            padding: 3px 12px; /* to account for the 1px border */
         }
     }
 
@@ -174,7 +174,7 @@ limitations under the License.
                     grid-template-columns: 20px auto;
                     gap: 6px 8px;
                     align-items: center;
-                    flex: 1; // wrap action buttons
+                    flex: 1; /* wrap action buttons */
 
                     .mx_SpaceHierarchy_roomTile_avatar {
                         grid-row: 1;
@@ -259,7 +259,7 @@ limitations under the License.
 
                     .mx_AccessibleButton_kind_danger_outline,
                     .mx_AccessibleButton_kind_primary_outline {
-                        padding: 3px 16px; // to account for the 1px border
+                        padding: 3px 16px; /* to account for the 1px border */
                     }
 
                     .mx_Checkbox {
diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
index 9d23dd5fc9..7fdb2500b4 100644
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@@ -28,10 +28,10 @@ $activeBorderColor: $primary-content;
     padding: 0;
     margin: 0;
     position: relative;
-    // Fix for the blurred avatar-background
+    /* Fix for the blurred avatar-background */
     z-index: 1;
 
-    // Create another flexbox so the Panel fills the container
+    /* Create another flexbox so the Panel fills the container */
     display: flex;
     flex-direction: column;
 
@@ -41,7 +41,7 @@ $activeBorderColor: $primary-content;
         height: 18px;
         border-radius: 50%;
         background-color: $tertiary-content;
-        top: 19px; // v-align with avatar
+        top: 19px; /* v-align with avatar */
         right: -8px;
 
         &::before {
@@ -233,7 +233,7 @@ $activeBorderColor: $primary-content;
             &::before {
                 background-color: $primary-content;
                 mask-image: url('$(res)/img/element-icons/plus.svg');
-                transition: all .2s ease-in-out; // TODO transition
+                transition: all .2s ease-in-out; /* TODO transition */
             }
         }
 
@@ -247,7 +247,7 @@ $activeBorderColor: $primary-content;
 
         .mx_SpaceButton_menuButton {
             width: 20px;
-            min-width: 20px; // yay flex
+            min-width: 20px; /* yay flex */
             height: 20px;
             margin-top: auto;
             margin-bottom: auto;
@@ -282,7 +282,7 @@ $activeBorderColor: $primary-content;
             color: $secondary-content;
             border-radius: 8px;
             background-color: $panel-actions;
-            font-size: $font-15px !important; // override inline style
+            font-size: $font-15px !important; /* override inline style */
             font-weight: $font-semi-bold;
             line-height: $font-18px;
 
@@ -297,7 +297,7 @@ $activeBorderColor: $primary-content;
     }
 
     .mx_SpacePanel_badgeContainer {
-        // Create a flexbox to make aligning dot badges easier
+        /* Create a flexbox to make aligning dot badges easier */
         display: flex;
         align-items: center;
         position: absolute;
@@ -305,12 +305,12 @@ $activeBorderColor: $primary-content;
         top: -3px;
 
         .mx_NotificationBadge {
-            margin: 0 2px; // centering
+            margin: 0 2px; /* centering */
             background-clip: padding-box;
         }
 
         .mx_NotificationBadge_dot {
-            // make the smaller dot occupy the same width for centering
+            /* make the smaller dot occupy the same width for centering */
             margin: 0 -1px 0 0;
             border: 3px solid $spacePanel-bg-color;
         }
@@ -421,7 +421,7 @@ $activeBorderColor: $primary-content;
         display: none;
 
         & + .mx_IconizedContextMenu_label {
-            padding-left: 5px !important; // override default iconized label style to align with header
+            padding-left: 5px !important; /* override default iconized label style to align with header */
         }
     }
 
diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss
index f4d37e0e24..b39f57cbb0 100644
--- a/res/css/structures/_SpaceRoomView.pcss
+++ b/res/css/structures/_SpaceRoomView.pcss
@@ -104,7 +104,7 @@ $SpaceRoomViewInnerWidth: 428px;
             display: block;
             margin-top: 44px;
             width: $SpaceRoomViewInnerWidth;
-            text-align: right; // button alignment right
+            text-align: right; /* button alignment right */
 
             .mx_AccessibleButton_hasKind {
                 padding: 8px 22px;
@@ -112,7 +112,7 @@ $SpaceRoomViewInnerWidth: 428px;
             }
 
             input.mx_AccessibleButton {
-                border: none; // override default styles
+                border: none; /* override default styles */
             }
         }
 
@@ -154,9 +154,9 @@ $SpaceRoomViewInnerWidth: 428px;
                 }
             }
 
-            // XXX: Temporary for the Spaces release only
+            /* XXX: Temporary for the Spaces release only */
             .mx_SpaceFeedbackPrompt {
-                padding: 7px; // 8px - 1px border
+                padding: 7px; /* 8px - 1px border */
                 border: 1px solid rgba($primary-content, .1);
                 border-radius: 8px;
                 width: max-content;
@@ -230,7 +230,7 @@ $SpaceRoomViewInnerWidth: 428px;
                         left: 8px;
                         height: 16px;
                         width: 16px;
-                        background: #fff; // white icon fill
+                        background: #fff; /* white icon fill */
                         mask-size: 16px;
                         mask-image: url('$(res)/img/element-icons/room/invite.svg');
                     }
@@ -282,7 +282,7 @@ $SpaceRoomViewInnerWidth: 428px;
     }
 
     .mx_SpaceRoomView_inviteTeammates {
-        // XXX remove this when spaces leaves Beta
+        /* XXX remove this when spaces leaves Beta */
         .mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
             padding: 16px;
             position: relative;
@@ -307,7 +307,7 @@ $SpaceRoomViewInnerWidth: 428px;
                 position: relative;
                 display: inline-block;
                 padding-left: 32px;
-                line-height: 24px; // to center icons
+                line-height: 24px; /* to center icons */
 
                 &::before {
                     content: "";
diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss
index 526d2dcb9f..e8e9785f3c 100644
--- a/res/css/structures/_TabbedView.pcss
+++ b/res/css/structures/_TabbedView.pcss
@@ -39,7 +39,7 @@ limitations under the License.
     }
 
     .mx_TabbedView_tabPanel {
-        margin-left: 240px; // 170px sidebar + 70px padding
+        margin-left: 240px; /* 170px sidebar + 70px padding */
         flex-direction: column;
     }
 
@@ -146,11 +146,11 @@ limitations under the License.
 .mx_TabbedView_tabPanel {
     flex-grow: 1;
     display: flex;
-    min-height: 0; // firefox
+    min-height: 0; /* firefox */
 }
 
 .mx_TabbedView_tabPanelContent {
     flex-grow: 1;
     overflow: auto;
-    min-height: 0; // firefox
+    min-height: 0; /* firefox */
 }
diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss
index 00c7cd05b4..94e9da5877 100644
--- a/res/css/structures/_ToastContainer.pcss
+++ b/res/css/structures/_ToastContainer.pcss
@@ -67,7 +67,7 @@ limitations under the License.
             }
 
             &.mx_Toast_icon_verification_warning {
-                // white infill for the hollow svg mask
+                /* white infill for the hollow svg mask */
                 &::before {
                     background-color: #ffffff;
                     mask-image: url('$(res)/img/e2e/normal.svg');
@@ -126,7 +126,7 @@ limitations under the License.
                 font-size: $font-12px;
                 line-height: $font-22px;
                 color: $secondary-content;
-                margin-inline-start: auto; // on the end side of the div
+                margin-inline-start: auto; /* on the end side of the div */
             }
         }
 
diff --git a/res/css/structures/_UploadBar.pcss b/res/css/structures/_UploadBar.pcss
index 4fe6773930..f3dfcf9aa4 100644
--- a/res/css/structures/_UploadBar.pcss
+++ b/res/css/structures/_UploadBar.pcss
@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 .mx_UploadBar {
-    padding-left: 65px; // line up with the shield area in the composer
+    padding-left: 65px; /* line up with the shield area in the composer */
     position: relative;
 
     .mx_ProgressBar {
-        width: calc(100% - 40px); // cheating at a right margin
+        width: calc(100% - 40px); /* cheating at a right margin */
     }
 }
 
@@ -33,7 +33,7 @@ limitations under the License.
     margin-top: 5px;
     color: $muted-fg-color;
     position: relative;
-    padding-left: 22px; // 18px for icon, 4px for padding
+    padding-left: 22px; /* 18px for icon, 4px for padding */
     font-size: $font-15px;
     vertical-align: middle;
 
@@ -57,7 +57,7 @@ limitations under the License.
     right: 0;
     height: 16px;
     width: 16px;
-    margin-right: 16px; // align over rightmost button in composer
+    margin-right: 16px; /* align over rightmost button in composer */
     mask-repeat: no-repeat;
     mask-position: center;
     background-color: $muted-fg-color;
diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss
index 4d1b093b0b..cc99a843e5 100644
--- a/res/css/structures/_UserMenu.pcss
+++ b/res/css/structures/_UserMenu.pcss
@@ -27,7 +27,7 @@ limitations under the License.
             position: relative;
 
             .mx_BaseAvatar {
-                pointer-events: none; // makes the avatar non-draggable
+                pointer-events: none; /* makes the avatar non-draggable */
             }
         }
     }
@@ -78,25 +78,25 @@ limitations under the License.
     .mx_UserMenu_contextMenu_header {
         padding: 20px;
 
-        // Create a flexbox to organize the header a bit easier
+        /* Create a flexbox to organize the header a bit easier */
         display: flex;
         align-items: center;
 
         .mx_UserMenu_contextMenu_name {
-            // Create another flexbox of columns to handle large user IDs
+            /* Create another flexbox of columns to handle large user IDs */
             display: flex;
             flex-direction: column;
-            width: calc(100% - 40px); // 40px = 32px theme button + 8px margin to theme button
+            width: calc(100% - 40px); /* 40px = 32px theme button + 8px margin to theme button */
 
             .mx_UserMenu_contextMenu_displayName,
             .mx_UserMenu_contextMenu_userId {
                 font-size: $font-15px;
 
-                // Automatically grow subelements to fit the container
+                /* Automatically grow subelements to fit the container */
                 flex: 1;
                 width: 100%;
 
-                // Ellipsize text overflow
+                /* Ellipsize text overflow */
                 text-overflow: ellipsis;
                 overflow: hidden;
                 white-space: nowrap;
@@ -122,7 +122,7 @@ limitations under the License.
             background-color: $theme-button-bg-color;
             cursor: pointer;
 
-            // to make alignment easier, create flexbox for the image
+            /* to make alignment easier, create flexbox for the image */
             display: flex;
             align-items: center;
             justify-content: center;
diff --git a/res/css/structures/_VideoRoomView.pcss b/res/css/structures/_VideoRoomView.pcss
index 3577e7b73e..aee8cc2816 100644
--- a/res/css/structures/_VideoRoomView.pcss
+++ b/res/css/structures/_VideoRoomView.pcss
@@ -33,7 +33,7 @@ limitations under the License.
         border: none;
     }
 
-    // While the lobby is shown, the widget needs to stay loaded but hidden in the background
+    /* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
     .mx_VideoLobby ~ .mx_AppTile {
         display: none;
     }
diff --git a/res/css/structures/auth/_Login.pcss b/res/css/structures/auth/_Login.pcss
index 638917f1c2..2638daf876 100644
--- a/res/css/structures/auth/_Login.pcss
+++ b/res/css/structures/auth/_Login.pcss
@@ -63,7 +63,7 @@ limitations under the License.
 }
 
 .mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
-    color: #ff8d13; // Only used here
+    color: #ff8d13; /* Only used here */
 }
 
 .mx_Login_type_container {
diff --git a/res/css/views/audio_messages/_AudioPlayer.pcss b/res/css/views/audio_messages/_AudioPlayer.pcss
index 6b8d0ca438..314632d6c0 100644
--- a/res/css/views/audio_messages/_AudioPlayer.pcss
+++ b/res/css/views/audio_messages/_AudioPlayer.pcss
@@ -26,7 +26,7 @@ limitations under the License.
 
         .mx_AudioPlayer_mediaInfo {
             flex: 1;
-            overflow: hidden; // makes the ellipsis on the file name work
+            overflow: hidden; /* makes the ellipsis on the file name work */
 
             & > * {
                 display: block;
@@ -39,7 +39,7 @@ limitations under the License.
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 overflow: hidden;
-                padding-bottom: 4px; // mimics the line-height differences in the Figma
+                padding-bottom: 4px; /* mimics the line-height differences in the Figma */
             }
 
             .mx_AudioPlayer_byline {
@@ -58,8 +58,8 @@ limitations under the License.
         }
 
         .mx_Clock {
-            min-width: $font-42px; // for flexbox
-            padding-left: $spacing-4; // isolate from seek bar
+            min-width: $font-42px; /* for flexbox */
+            padding-left: $spacing-4; /* isolate from seek bar */
             text-align: justify;
             white-space: nowrap;
         }
diff --git a/res/css/views/audio_messages/_PlayPauseButton.pcss b/res/css/views/audio_messages/_PlayPauseButton.pcss
index 9548b62dfd..0c2573002e 100644
--- a/res/css/views/audio_messages/_PlayPauseButton.pcss
+++ b/res/css/views/audio_messages/_PlayPauseButton.pcss
@@ -18,14 +18,14 @@ limitations under the License.
     position: relative;
     width: 32px;
     height: 32px;
-    min-width: 32px; // for when the button is used in a flexbox
-    min-height: 32px; // for when the button is used in a flexbox
+    min-width: 32px; /* for when the button is used in a flexbox */
+    min-height: 32px; /* for when the button is used in a flexbox */
     border-radius: 32px;
     background-color: $system;
 
     &::before {
         content: '';
-        position: absolute; // sizing varies by icon
+        position: absolute; /* sizing varies by icon */
         background-color: $secondary-content;
         mask-repeat: no-repeat;
         mask-size: contain;
@@ -38,16 +38,16 @@ limitations under the License.
     &.mx_PlayPauseButton_play::before {
         width: 13px;
         height: 16px;
-        top: 8px; // center
-        left: 12px; // center
+        top: 8px; /* center */
+        left: 12px; /* center */
         mask-image: url('$(res)/img/element-icons/play.svg');
     }
 
     &.mx_PlayPauseButton_pause::before {
         width: 10px;
         height: 12px;
-        top: 10px; // center
-        left: 11px; // center
+        top: 10px; /* center */
+        left: 11px; /* center */
         mask-image: url('$(res)/img/element-icons/pause.svg');
     }
 }
diff --git a/res/css/views/audio_messages/_PlaybackContainer.pcss b/res/css/views/audio_messages/_PlaybackContainer.pcss
index ebfcf229b0..d2c101658c 100644
--- a/res/css/views/audio_messages/_PlaybackContainer.pcss
+++ b/res/css/views/audio_messages/_PlaybackContainer.pcss
@@ -14,22 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// Dev note: there's no actual component called <PlaybackContainer />. These classes
-// are shared amongst multiple voice message components.
+/* Dev note: there's no actual component called <PlaybackContainer />. These classes */
+/* are shared amongst multiple voice message components. */
 
-// Container for live recording and playback controls
+/* Container for live recording and playback controls */
 .mx_MediaBody.mx_VoiceMessagePrimaryContainer {
-    // The waveform (right) has a 1px padding on it that we want to account for, otherwise
-    // inherit from mx_MediaBody
+    /* The waveform (right) has a 1px padding on it that we want to account for, otherwise */
+    /* inherit from mx_MediaBody */
     padding-right: 11px;
 
-    // Cheat at alignment a bit
+    /* Cheat at alignment a bit */
     display: flex;
     align-items: center;
 
     contain: content;
 
-    // Waveforms are present in live recording only
+    /* Waveforms are present in live recording only */
     .mx_Waveform {
         .mx_Waveform_bar {
             background-color: $quaternary-content;
@@ -38,7 +38,7 @@ limitations under the License.
             transform: scaleY(max(0.05, var(--barHeight)));
 
             &.mx_Waveform_bar_100pct {
-                // Small animation to remove the mechanical feel of progress
+                /* Small animation to remove the mechanical feel of progress */
                 transition: background-color 250ms ease;
                 background-color: $secondary-content;
             }
@@ -46,10 +46,10 @@ limitations under the License.
     }
 
     .mx_Clock {
-        width: $font-42px; // we're not using a monospace font, so fake it
-        min-width: $font-42px; // force sensible layouts in awkward flexboxes (file panel, for example)
-        padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
-        padding-left: 8px; // isolate from recording circle / play control
+        width: $font-42px; /* we're not using a monospace font, so fake it */
+        min-width: $font-42px; /* force sensible layouts in awkward flexboxes (file panel, for example) */
+        padding-right: 6px; /* with the fixed width this ends up as a visual 8px most of the time, as intended. */
+        padding-left: 8px; /* isolate from recording circle / play control */
     }
 
     .mx_RecordingPlayback_timelineLayoutMiddle {
@@ -58,7 +58,7 @@ limitations under the License.
         position: relative;
         display: inline-block;
         flex: 1;
-        height: 30px; // same height as mx_Waveform, needed for automatic vertical centering
+        height: 30px; /* same height as mx_Waveform, needed for automatic vertical centering */
 
         .mx_Waveform {
             left: 0;
@@ -69,10 +69,10 @@ limitations under the License.
             position: absolute;
             left: 0;
             height: 30px;
-            top: -2px; // visually vertically centered
+            top: -2px; /* visually vertically centered */
 
-            // Hide the hairline progress bar since we're at 100% height. Need to have distinct rules
-            // because CSS is weird.
+            /* Hide the hairline progress bar since we're at 100% height. Need to have distinct rules */
+            /* because CSS is weird. */
             background: none;
             &::before {
                 background: none;
@@ -81,10 +81,10 @@ limitations under the License.
                 background: none;
             }
 
-            // Make the thumb easier to see. Like the SeekBar original styles, these need to be
-            // distinct. We make it transparent so it doesn't show up on the UI, but also larger
-            // so it's easier to grab by mouse users in some browsers. Most browsers let the user
-            // move and drag the thumb regardless of hitting the thumb, however.
+            /* Make the thumb easier to see. Like the SeekBar original styles, these need to be */
+            /* distinct. We make it transparent so it doesn't show up on the UI, but also larger */
+            /* so it's easier to grab by mouse users in some browsers. Most browsers let the user */
+            /* move and drag the thumb regardless of hitting the thumb, however. */
             &::-webkit-slider-thumb {
                 width: 10px;
                 height: 10px;
@@ -97,11 +97,11 @@ limitations under the License.
             }
         }
 
-        // For timeline-rendered playback, the clock is on the other side of the waveform.
+        /* For timeline-rendered playback, the clock is on the other side of the waveform. */
         & + .mx_Clock {
             text-align: right;
 
-            // Take the padding off the clock because it's accounted for by the `timelineLayoutMiddle`
+            /* Take the padding off the clock because it's accounted for by the `timelineLayoutMiddle` */
             padding: 0;
         }
     }
diff --git a/res/css/views/audio_messages/_SeekBar.pcss b/res/css/views/audio_messages/_SeekBar.pcss
index 03449d009b..a61876e631 100644
--- a/res/css/views/audio_messages/_SeekBar.pcss
+++ b/res/css/views/audio_messages/_SeekBar.pcss
@@ -14,31 +14,31 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// CSS inspiration from:
-// * https://www.w3schools.com/howto/howto_js_rangeslider.asp
-// * https://stackoverflow.com/a/28283806
-// * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
+/* CSS inspiration from: */
+/* * https://www.w3schools.com/howto/howto_js_rangeslider.asp */
+/* * https://stackoverflow.com/a/28283806 */
+/* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
 
 .mx_SeekBar {
-    // Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't
-    // need to support IE.
+    /* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */
+    /* need to support IE. */
 
-    appearance: none; // default style override
+    appearance: none; /* default style override */
 
     width: 100%;
     height: 1px;
     background: $quaternary-content;
-    outline: none; // remove blue selection border
-    position: relative; // for before+after pseudo elements later on
+    outline: none; /* remove blue selection border */
+    position: relative; /* for before+after pseudo elements later on */
 
     cursor: pointer;
 
     &::-webkit-slider-thumb {
-        appearance: none; // default style override
+        appearance: none; /* default style override */
 
-        // Dev note: This needs to be duplicated with the -moz-range-thumb selector
-        // because otherwise Edge (webkit) will fail to see the styles and just refuse
-        // to apply them.
+        /* Dev note: This needs to be duplicated with the -moz-range-thumb selector */
+        /* because otherwise Edge (webkit) will fail to see the styles and just refuse */
+        /* to apply them. */
         width: 8px;
         height: 8px;
         border-radius: 8px;
@@ -53,33 +53,33 @@ limitations under the License.
         background-color: $tertiary-content;
         cursor: pointer;
 
-        // Firefox adds a border on the thumb
+        /* Firefox adds a border on the thumb */
         border: none;
     }
 
-    // This is for webkit support, but we can't limit the functionality of it to just webkit
-    // browsers. Firefox responds to webkit-prefixed values now, which means we can't use media
-    // or support queries to selectively apply the rule. An upside is that this CSS doesn't work
-    // in firefox, so it's just wasted CPU/GPU time.
-    &::before { // ::before to ensure it ends up under the thumb
+    /* This is for webkit support, but we can't limit the functionality of it to just webkit */
+    /* browsers. Firefox responds to webkit-prefixed values now, which means we can't use media */
+    /* or support queries to selectively apply the rule. An upside is that this CSS doesn't work */
+    /* in firefox, so it's just wasted CPU/GPU time. */
+    &::before { /* ::before to ensure it ends up under the thumb */
         content: '';
         background-color: $tertiary-content;
 
-        // Absolute positioning to ensure it overlaps with the existing bar
+        /* Absolute positioning to ensure it overlaps with the existing bar */
         position: absolute;
         top: 0;
         left: 0;
 
-        // Sizing to match the bar
+        /* Sizing to match the bar */
         width: 100%;
         height: 1px;
 
-        // And finally dynamic width without overly hurting the rendering engine.
+        /* And finally dynamic width without overly hurting the rendering engine. */
         transform-origin: 0 100%;
         transform: scaleX(var(--fillTo));
     }
 
-    // This is firefox's built-in support for the above, with 100% less hacks.
+    /* This is firefox's built-in support for the above, with 100% less hacks. */
     &::-moz-range-progress {
         background-color: $tertiary-content;
         height: 1px;
@@ -89,9 +89,9 @@ limitations under the License.
         opacity: 0.5;
     }
 
-    // Increase clickable area for the slider (approximately same size as browser default)
-    // We do it this way to keep the same padding and margins of the element, avoiding margin math.
-    // Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/
+    /* Increase clickable area for the slider (approximately same size as browser default) */
+    /* We do it this way to keep the same padding and margins of the element, avoiding margin math. */
+    /* Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/ */
     &::after {
         content: '';
         position: absolute;
diff --git a/res/css/views/audio_messages/_Waveform.pcss b/res/css/views/audio_messages/_Waveform.pcss
index cf03c84601..0b2c411194 100644
--- a/res/css/views/audio_messages/_Waveform.pcss
+++ b/res/css/views/audio_messages/_Waveform.pcss
@@ -16,25 +16,25 @@ limitations under the License.
 
 .mx_Waveform {
     position: relative;
-    height: 30px; // tallest bar can only be 30px
-    top: 1px; // because of our border trick (see below), we're off by 1px of aligntment
+    height: 30px; /* tallest bar can only be 30px */
+    top: 1px; /* because of our border trick (see below), we're off by 1px of aligntment */
 
     display: flex;
-    align-items: center; // so the bars grow from the middle
+    align-items: center; /* so the bars grow from the middle */
 
-    overflow: hidden; // this is cheaper than a `max-height: calc(100% - 4px)` in the bar's CSS.
+    overflow: hidden; /* this is cheaper than a `max-height: calc(100% - 4px)` in the bar's CSS. */
 
-    // A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line
-    // with rounded caps.
+    /* A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line */
+    /* with rounded caps. */
     .mx_Waveform_bar {
-        width: 0; // 0px width means we'll end up using the border as our width
-        border: 1px solid transparent; // transparent means we'll use the background colour
-        border-radius: 2px; // rounded end caps, based on the border
-        min-height: 0; // like the width, we'll rely on the border to give us height
-        max-height: 100%; // this makes the `height: 42%` work on the element
-        margin-left: 1px; // we want 2px between each bar, so 1px on either side for balance
+        width: 0; /* 0px width means we'll end up using the border as our width */
+        border: 1px solid transparent; /* transparent means we'll use the background colour */
+        border-radius: 2px; /* rounded end caps, based on the border */
+        min-height: 0; /* like the width, we'll rely on the border to give us height */
+        max-height: 100%; /* this makes the `height: 42%` work on the element */
+        margin-left: 1px; /* we want 2px between each bar, so 1px on either side for balance */
         margin-right: 1px;
 
-        // background color is handled by the parent components
+        /* background color is handled by the parent components */
     }
 }
diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss
index 81c3dda6e7..cdccfe157b 100644
--- a/res/css/views/auth/_AuthBody.pcss
+++ b/res/css/views/auth/_AuthBody.pcss
@@ -119,7 +119,7 @@ limitations under the License.
 }
 
 .mx_AuthBody_paddedFooter {
-    height: 80px; // height of the submit button + register link
+    height: 80px; /* height of the submit button + register link */
     padding-top: 28px;
     text-align: center;
 
diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.pcss b/res/css/views/auth/_InteractiveAuthEntryComponents.pcss
index 43e0062eb3..dfa27ee120 100644
--- a/res/css/views/auth/_InteractiveAuthEntryComponents.pcss
+++ b/res/css/views/auth/_InteractiveAuthEntryComponents.pcss
@@ -42,14 +42,14 @@ limitations under the License.
     width: 100%;
 }
 
-// XXX: This should be a common button class
+/* XXX: This should be a common button class */
 .mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
     background-color: $light-fg-color;
     cursor: default;
 }
 
 .mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
-    background-color: #92caad; // Only used here
+    background-color: #92caad; /* Only used here */
     cursor: default;
 }
 
@@ -76,18 +76,18 @@ limitations under the License.
 }
 
 .mx_InteractiveAuthEntryComponents_emailWrapper {
-    // "Resend" button/link
+    /* "Resend" button/link */
     .mx_AccessibleButton_kind_link_inline {
-        // We need this to be an inline-block so positioning works correctly
+        /* We need this to be an inline-block so positioning works correctly */
         display: inline-block !important;
 
-        // Spinner as end adornment of the "resend" button/link
+        /* Spinner as end adornment of the "resend" button/link */
         .mx_Spinner {
-            // Spinners are usually block elements, but we need it as inline element
+            /* Spinners are usually block elements, but we need it as inline element */
             display: inline-flex !important;
-            // Spinners by default fill all available width, but we don't want that
+            /* Spinners by default fill all available width, but we don't want that */
             width: auto !important;
-            // We need to center the spinner relative to the button/link
+            /* We need to center the spinner relative to the button/link */
             vertical-align: middle !important;
         }
     }
diff --git a/res/css/views/avatars/_BaseAvatar.pcss b/res/css/views/avatars/_BaseAvatar.pcss
index 0356264084..d51dabd48e 100644
--- a/res/css/views/avatars/_BaseAvatar.pcss
+++ b/res/css/views/avatars/_BaseAvatar.pcss
@@ -16,15 +16,15 @@ limitations under the License.
 
 .mx_BaseAvatar {
     position: relative;
-    // In at least Firefox, the case of relative positioned inline elements
-    // (such as mx_BaseAvatar) with absolute positioned children (such as
-    // mx_BaseAvatar_initial) is a dark corner full of spider webs. It will give
-    // different results during full reflow of the page vs. incremental reflow
-    // of small portions. While that's surely a browser bug, we can avoid it by
-    // using `inline-block` instead of the default `inline`.
-    // https://github.com/vector-im/element-web/issues/5594
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1535053
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=255139
+    /* In at least Firefox, the case of relative positioned inline elements */
+    /* (such as mx_BaseAvatar) with absolute positioned children (such as */
+    /* mx_BaseAvatar_initial) is a dark corner full of spider webs. It will give */
+    /* different results during full reflow of the page vs. incremental reflow */
+    /* of small portions. While that's surely a browser bug, we can avoid it by */
+    /* using `inline-block` instead of the default `inline`. */
+    /* https://github.com/vector-im/element-web/issues/5594 */
+    /* https://bugzilla.mozilla.org/show_bug.cgi?id=1535053 */
+    /* https://bugzilla.mozilla.org/show_bug.cgi?id=255139 */
     display: inline-block;
     user-select: none;
 
@@ -53,9 +53,9 @@ limitations under the License.
     background-color: $background;
 }
 
-// Percy screenshot test specific CSS
+/* Percy screenshot test specific CSS */
 @media only percy {
-    // Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot
+    /* Stick the default room avatar colour, so it doesn't cause a false diff on the screenshot */
     .mx_BaseAvatar_initial {
         background-color: $username-variant2-color !important;
         border-radius: 125px;
diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.pcss b/res/css/views/avatars/_DecoratedRoomAvatar.pcss
index 7927f82c2f..3c2304565c 100644
--- a/res/css/views/avatars/_DecoratedRoomAvatar.pcss
+++ b/res/css/views/avatars/_DecoratedRoomAvatar.pcss
@@ -27,7 +27,7 @@ limitations under the License.
 
     .mx_DecoratedRoomAvatar_icon {
         position: absolute;
-        // the following percentage based sizings are to match the scalable svg mask for the cutout
+        /* the following percentage based sizings are to match the scalable svg mask for the cutout */
         bottom: -6.25%;
         right: -6.25%;
         margin: 12.5%;
diff --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss
index 642e08f3f4..b47e7ca1b6 100644
--- a/res/css/views/beta/_BetaCard.pcss
+++ b/res/css/views/beta/_BetaCard.pcss
@@ -58,10 +58,10 @@ limitations under the License.
                     padding: 7px 40px;
                     width: auto;
                     flex: 1;
-                    white-space: nowrap; // text might overflow
+                    white-space: nowrap; /* text might overflow */
 
                     &:nth-child(1) {
-                        order: 2; // Place feedback button top and right
+                        order: 2; /* Place feedback button top and right */
                     }
                 }
             }
@@ -127,7 +127,7 @@ limitations under the License.
     color: $button-primary-fg-color;
     display: inline-block;
     vertical-align: text-bottom;
-    word-break: keep-all; // avoid multiple lines on CJK language
+    word-break: keep-all; /* avoid multiple lines on CJK language */
 
     &.mx_AccessibleButton {
         cursor: pointer;
diff --git a/res/css/views/context_menus/_IconizedContextMenu.pcss b/res/css/views/context_menus/_IconizedContextMenu.pcss
index 84be4301ff..48d2d72590 100644
--- a/res/css/views/context_menus/_IconizedContextMenu.pcss
+++ b/res/css/views/context_menus/_IconizedContextMenu.pcss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// A context menu that largely fits the | [icon]    [label] | format.
+/* A context menu that largely fits the | [icon]    [label] | format. */
 .mx_IconizedContextMenu {
     min-width: 146px;
     width: max-content;
@@ -30,47 +30,47 @@ limitations under the License.
             font-weight: $font-semi-bold;
         }
 
-        // the notFirst class is for cases where the optionList might be under a header of sorts.
+        /* the notFirst class is for cases where the optionList might be under a header of sorts. */
         &:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
-            // This is a bit of a hack when we could just use a simple border-top property,
-            // however we have a (kinda) good reason for doing it this way: we need opacity.
-            // To get the right color, we need an opacity modifier which means we have to work
-            // around the problem. PostCSS doesn't support the opacity() function, and if we
-            // use something like postcss-functions we quickly run into an issue where the
-            // function we would define gets passed a CSS variable for custom themes, which
-            // can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
+            /* This is a bit of a hack when we could just use a simple border-top property, */
+            /* however we have a (kinda) good reason for doing it this way: we need opacity. */
+            /* To get the right color, we need an opacity modifier which means we have to work */
+            /* around the problem. PostCSS doesn't support the opacity() function, and if we */
+            /* use something like postcss-functions we quickly run into an issue where the */
+            /* function we would define gets passed a CSS variable for custom themes, which */
+            /* can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379 */
             //
-            // Therefore, we just hack in a line and border the thing ourselves
+            /* Therefore, we just hack in a line and border the thing ourselves */
             &::before {
                 border-top: 1px solid $primary-content;
                 opacity: 0.1;
                 content: '';
 
-                // Counteract the padding problems (width: 100% ignores the 40px padding,
-                // unless we position it absolutely then it does the right thing).
+                /* Counteract the padding problems (width: 100% ignores the 40px padding, */
+                /* unless we position it absolutely then it does the right thing). */
                 width: 100%;
                 position: absolute;
                 left: 0;
             }
         }
 
-        // round the top corners of the top button for the hover effect to be bounded
+        /* round the top corners of the top button for the hover effect to be bounded */
         &:first-child .mx_IconizedContextMenu_item:first-child {
-            border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
+            border-radius: 8px 8px 0 0; /* radius matches .mx_ContextualMenu */
         }
 
-        // round the bottom corners of the bottom button for the hover effect to be bounded
+        /* round the bottom corners of the bottom button for the hover effect to be bounded */
         &:last-child .mx_IconizedContextMenu_item:last-child {
-            border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
+            border-radius: 0 0 8px 8px; /* radius matches .mx_ContextualMenu */
         }
 
-        // round all corners of the only button for the hover effect to be bounded
+        /* round all corners of the only button for the hover effect to be bounded */
         &:first-child:last-child .mx_IconizedContextMenu_item:first-child:last-child {
-            border-radius: 8px; // radius matches .mx_ContextualMenu
+            border-radius: 8px; /* radius matches .mx_ContextualMenu */
         }
 
         .mx_IconizedContextMenu_item {
-            // pad the inside of the button so that the hover background is padded too
+            /* pad the inside of the button so that the hover background is padded too */
             padding-top: 12px;
             padding-bottom: 12px;
             text-decoration: none;
@@ -78,7 +78,7 @@ limitations under the License.
             font-size: $font-15px;
             line-height: $font-24px;
 
-            // Create a flexbox to more easily define the list items
+            /* Create a flexbox to more easily define the list items */
             display: flex;
             align-items: center;
 
@@ -91,17 +91,17 @@ limitations under the License.
                 cursor: not-allowed;
             }
 
-            img, .mx_IconizedContextMenu_icon { // icons
+            img, .mx_IconizedContextMenu_icon { /* icons */
                 width: 16px;
                 min-width: 16px;
                 max-width: 16px;
             }
 
-            span.mx_IconizedContextMenu_label { // labels
+            span.mx_IconizedContextMenu_label { /* labels */
                 width: 100%;
                 flex: 1;
 
-                // Ellipsize any text overflow
+                /* Ellipsize any text overflow */
                 text-overflow: ellipsis;
                 overflow: hidden;
                 white-space: nowrap;
diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
index f82a29c546..98df86871c 100644
--- a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
@@ -23,7 +23,7 @@ limitations under the License.
 
 .mx_AddExistingToSpace {
     .mx_SearchBox {
-        // To match the space around the title
+        /* To match the space around the title */
         margin: 0 0 15px 0;
         flex-grow: 0;
     }
@@ -226,7 +226,7 @@ limitations under the License.
     display: flex;
     margin-top: 12px;
 
-    .mx_DecoratedRoomAvatar, // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
+    .mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */
     .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
         margin-right: 12px;
     }
diff --git a/res/css/views/dialogs/_BugReportDialog.pcss b/res/css/views/dialogs/_BugReportDialog.pcss
index 348d9ebb99..435fd1972c 100644
--- a/res/css/views/dialogs/_BugReportDialog.pcss
+++ b/res/css/views/dialogs/_BugReportDialog.pcss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_BugReportDialog {
     .mx_BugReportDialog_download {
         .mx_AccessibleButton_kind_link {
-            margin-right: 18px; // Space between "Downloading logs..."
+            margin-right: 18px; /* Space between "Downloading logs..." */
         }
     }
 }
diff --git a/res/css/views/dialogs/_CompoundDialog.pcss b/res/css/views/dialogs/_CompoundDialog.pcss
index 28e7388e0e..b20c17cd2a 100644
--- a/res/css/views/dialogs/_CompoundDialog.pcss
+++ b/res/css/views/dialogs/_CompoundDialog.pcss
@@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// --------------------------------------------------------------------------------
-// DEV NOTE: This stylesheet covers dialogs listed by the compound, including
-// over multiple React components. The actual inner contents of the dialog should
-// be in their respective stylesheets.
-// --------------------------------------------------------------------------------
+/* -------------------------------------------------------------------------------- */
+/* DEV NOTE: This stylesheet covers dialogs listed by the compound, including */
+/* over multiple React components. The actual inner contents of the dialog should */
+/* be in their respective stylesheets. */
+/* -------------------------------------------------------------------------------- */
 
-// Override legacy/default styles for dialogs
+/* Override legacy/default styles for dialogs */
 .mx_Dialog_wrapper.mx_CompoundDialog > .mx_Dialog {
-    padding: 0; // we'll manage it ourselves
+    padding: 0; /* we'll manage it ourselves */
     color: $primary-content;
 }
 
@@ -34,7 +34,7 @@ limitations under the License.
             display: inline-block;
             font-weight: 600;
             font-size: $font-24px;
-            margin: 0; // managed by header class
+            margin: 0; /* managed by header class */
         }
 
         .mx_CompoundDialog_cancelButton {
@@ -42,7 +42,7 @@ limitations under the License.
             width: 20px;
             height: 20px;
 
-            // Align with middle of title, 34px from right edge
+            /* Align with middle of title, 34px from right edge */
             position: absolute;
             top: 34px;
             right: 34px;
@@ -69,14 +69,14 @@ limitations under the License.
 }
 
 .mx_ScrollableBaseDialog {
-    width: 544px; // fixed
-    height: 516px; // fixed
+    width: 544px; /* fixed */
+    height: 516px; /* fixed */
 
     .mx_CompoundDialog_content {
-        height: 349px; // dialogHeight - header - footer
+        height: 349px; /* dialogHeight - header - footer */
     }
 
     .mx_CompoundDialog_footer {
-        box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); // hardcoded colour for both themes
+        box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); /* hardcoded colour for both themes */
     }
 }
diff --git a/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss b/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss
index 3b21ea74de..09d80a3f2f 100644
--- a/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss
+++ b/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss
@@ -53,7 +53,7 @@ limitations under the License.
             content: '';
             position: absolute;
             left: 10px;
-            top: calc(50% - 8px); // vertical centering
+            top: calc(50% - 8px); /* vertical centering */
             height: 16px;
             width: 16px;
             background-color: $secondary-content;
diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/res/css/views/dialogs/_CreateRoomDialog.pcss
index 959b599808..d433e6de59 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.pcss
+++ b/res/css/views/dialogs/_CreateRoomDialog.pcss
@@ -24,7 +24,7 @@ limitations under the License.
         cursor: pointer;
         color: $accent;
 
-        // list-style doesn't do it for webkit
+        /* list-style doesn't do it for webkit */
         &::-webkit-details-marker {
             display: none;
         }
@@ -60,11 +60,11 @@ limitations under the License.
     width: 100%;
 }
 
-// needed to make the alias field only grow as wide as needed
-// as opposed to full width
+/* needed to make the alias field only grow as wide as needed */
+/* as opposed to full width */
 .mx_CreateRoomDialog_aliasContainer {
     display: flex;
-    // put margin on container so it can collapse with siblings
+    /* put margin on container so it can collapse with siblings */
     margin: 24px 0 10px;
 
     .mx_RoomAliasField {
diff --git a/res/css/views/dialogs/_DevtoolsDialog.pcss b/res/css/views/dialogs/_DevtoolsDialog.pcss
index 967d7c2fb9..a231587cab 100644
--- a/res/css/views/dialogs/_DevtoolsDialog.pcss
+++ b/res/css/views/dialogs/_DevtoolsDialog.pcss
@@ -133,13 +133,13 @@ limitations under the License.
         border-collapse: collapse;
 
         th {
-            // Colour choice: first one autocomplete gave me.
+            /* Colour choice: first one autocomplete gave me. */
             border-bottom: 1px solid $accent;
             text-align: left;
         }
 
         td, th {
-            width: 360px; // "feels right" number
+            width: 360px; /* "feels right" number */
 
             text-overflow: ellipsis;
             overflow: hidden;
@@ -151,7 +151,7 @@ limitations under the License.
         }
 
         tr:hover {
-            // Colour choice: first one autocomplete gave me.
+            /* Colour choice: first one autocomplete gave me. */
             background-color: $accent;
         }
     }
@@ -178,8 +178,8 @@ limitations under the License.
 }
 
 .mx_DevTools_SettingsExplorer_setting {
-    // override default link button color
-    // as it is the same as the background highlight
-    // used on focus
+    /* override default link button color */
+    /* as it is the same as the background highlight */
+    /* used on focus */
     color: $links !important;
 }
diff --git a/res/css/views/dialogs/_FeedbackDialog.pcss b/res/css/views/dialogs/_FeedbackDialog.pcss
index 8d11b83fe1..d16401f09c 100644
--- a/res/css/views/dialogs/_FeedbackDialog.pcss
+++ b/res/css/views/dialogs/_FeedbackDialog.pcss
@@ -78,7 +78,7 @@ limitations under the License.
         }
 
         &::after {
-            background: $avatar-initial-color; // TODO
+            background: $avatar-initial-color; /* TODO */
             mask-position: center;
             mask-size: 24px;
             mask-repeat: no-repeat;
diff --git a/res/css/views/dialogs/_ForwardDialog.pcss b/res/css/views/dialogs/_ForwardDialog.pcss
index 8e6a7d0508..bfb9626c9e 100644
--- a/res/css/views/dialogs/_ForwardDialog.pcss
+++ b/res/css/views/dialogs/_ForwardDialog.pcss
@@ -44,9 +44,9 @@ limitations under the License.
             pointer-events: none;
         }
 
-        // When forwarding messages from encrypted rooms, EventTile will complain
-        // that our preview is unencrypted, which doesn't actually matter
-        // We also hide download links to not encourage users to try interacting
+        /* When forwarding messages from encrypted rooms, EventTile will complain */
+        /* that our preview is unencrypted, which doesn't actually matter */
+        /* We also hide download links to not encourage users to try interacting */
         .mx_EventTile_msgOption,
         .mx_EventTile_e2eIcon_unencrypted,
         .mx_EventTile_e2eIcon_warning,
@@ -66,7 +66,7 @@ limitations under the License.
         display: contents;
 
         .mx_SearchBox {
-            // To match the space around the title
+            /* To match the space around the title */
             margin: 0 0 15px 0;
             flex-grow: 0;
         }
@@ -133,7 +133,7 @@ limitations under the License.
                     margin-left: 12px;
 
                     &:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
-                        // Hide the "Send" label while preserving button size
+                        /* Hide the "Send" label while preserving button size */
                         visibility: hidden;
                     }
 
@@ -142,7 +142,7 @@ limitations under the License.
                     }
 
                     .mx_NotificationBadge {
-                        // Match the failed to send indicator's color with the disabled button
+                        /* Match the failed to send indicator's color with the disabled button */
                         background-color: $button-danger-disabled-fg-color;
                     }
 
diff --git a/res/css/views/dialogs/_HostSignupDialog.pcss b/res/css/views/dialogs/_HostSignupDialog.pcss
index b1b7b18898..15c383f1e8 100644
--- a/res/css/views/dialogs/_HostSignupDialog.pcss
+++ b/res/css/views/dialogs/_HostSignupDialog.pcss
@@ -19,10 +19,10 @@ limitations under the License.
     max-width: 580px;
     height: 80vh;
     max-height: 600px;
-    // Ensure dialog borders are always white as the HostSignupDialog
-    // does not yet support dark mode or theming in general.
-    // In the future we might want to pass the theme to the called
-    // iframe, should some hosting provider have that need.
+    /* Ensure dialog borders are always white as the HostSignupDialog */
+    /* does not yet support dark mode or theming in general. */
+    /* In the future we might want to pass the theme to the called */
+    /* iframe, should some hosting provider have that need. */
     background-color: #ffffff;
 
     .mx_HostSignupDialog_info {
diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss
index f529749eeb..ff0ed4fbe0 100644
--- a/res/css/views/dialogs/_InviteDialog.pcss
+++ b/res/css/views/dialogs/_InviteDialog.pcss
@@ -26,13 +26,13 @@ limitations under the License.
 .mx_InviteDialog_addressBar {
     display: flex;
     flex-direction: row;
-    // Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
-    // for the user section gets weird.
-    margin: $spacing-8 45px 0 0; // TODO: Use a spacing variable
+    /* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
+    /* for the user section gets weird. */
+    margin: $spacing-8 45px 0 0; /* TODO: Use a spacing variable */
 
     .mx_InviteDialog_editor {
         flex: 1;
-        width: 100%; // Needed to make the Field inside grow
+        width: 100%; /* Needed to make the Field inside grow */
         background-color: $header-panel-bg-color;
         border-radius: 4px;
         min-height: 25px;
@@ -43,14 +43,14 @@ limitations under the License.
         flex-wrap: wrap;
 
         .mx_InviteDialog_userTile {
-            margin: 6px 6px 0 0; // TODO: Use a spacing variable
+            margin: 6px 6px 0 0; /* TODO: Use a spacing variable */
             display: inline-block;
-            min-width: max-content; // prevent manipulation by flexbox
+            min-width: max-content; /* prevent manipulation by flexbox */
         }
 
-        // overrides bunch of our default text input styles
+        /* overrides bunch of our default text input styles */
         > input[type="text"] {
-            margin: 6px 0 !important; // TODO: Use a spacing variable
+            margin: 6px 0 !important; /* TODO: Use a spacing variable */
             height: 24px;
             line-height: $font-24px;
             font-size: $font-14px;
@@ -67,17 +67,17 @@ limitations under the License.
 
     .mx_InviteDialog_goButton {
         min-width: 48px;
-        margin-inline-start: 10px; // TODO: Use a spacing variable
+        margin-inline-start: 10px; /* TODO: Use a spacing variable */
         height: 25px;
         line-height: $font-25px;
     }
 
     .mx_InviteDialog_buttonAndSpinner {
         .mx_Spinner {
-            // Width and height are required to trick the layout engine.
+            /* Width and height are required to trick the layout engine. */
             width: 20px;
             height: 20px;
-            margin-inline-start: 5px; // TODO: Use a spacing variable
+            margin-inline-start: 5px; /* TODO: Use a spacing variable */
             display: inline-block;
             vertical-align: middle;
         }
@@ -103,7 +103,7 @@ limitations under the License.
     }
 
     .mx_InviteDialog_section_showMore {
-        margin: 7px 18px; // TODO: Use a spacing variable
+        margin: 7px 18px; /* TODO: Use a spacing variable */
         display: block;
     }
 }
@@ -134,7 +134,7 @@ limitations under the License.
     }
 
     .mx_CopyableText.mx_CopyableText_border {
-        width: unset; // full width
+        width: unset; /* full width */
         margin-bottom: 0;
 
         > a {
@@ -146,7 +146,7 @@ limitations under the License.
     }
 }
 
-// Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog.
+/* Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog. */
 .mx_InviteDialog_userTile {
     margin-inline-end: $spacing-8;
 
@@ -157,7 +157,7 @@ limitations under the License.
         height: 24px;
         line-height: $font-24px;
         padding-inline: $spacing-8;
-        color: #ffffff; // this is fine without a var because it's for both themes
+        color: #ffffff; /* this is fine without a var because it's for both themes */
 
         .mx_SearchResultAvatar {
             border-radius: 20px;
@@ -175,7 +175,7 @@ limitations under the License.
         }
 
         .mx_SearchResultAvatar_threepidAvatar {
-            background-color: #ffffff; // this is fine without a var because it's for both themes
+            background-color: #ffffff; /* this is fine without a var because it's for both themes */
         }
     }
 
@@ -186,7 +186,7 @@ limitations under the License.
 }
 
 .mx_InviteDialog_other {
-    // Prevent the dialog from jumping around randomly when elements change.
+    /* Prevent the dialog from jumping around randomly when elements change. */
     display: flex;
     flex-direction: column;
     height: 600px;
@@ -252,7 +252,7 @@ limitations under the License.
 .mx_InviteDialog_userSections {
     margin-top: $spacing-4;
     overflow-y: auto;
-    padding: 0 45px $spacing-4 0; // TODO: Use a spacing variable
+    padding: 0 45px $spacing-4 0; /* TODO: Use a spacing variable */
 }
 
 .mx_InviteDialog_helpText {
@@ -289,7 +289,7 @@ limitations under the License.
 
     .mx_DialPad {
         row-gap: $spacing-16;
-        column-gap: 48px; // TODO: Use a spacing variable
+        column-gap: 48px; /* TODO: Use a spacing variable */
         margin-inline: auto;
     }
 }
@@ -327,7 +327,7 @@ limitations under the License.
     align-items: center;
 
     &.mx_InviteDialog_tile--room {
-        // mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time
+        /* mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time */
         grid-template-columns: min-content auto auto;
         padding: $spacing-4 $spacing-8;
 
@@ -350,9 +350,9 @@ limitations under the License.
                 mask-size: 100%;
                 mask-repeat: no-repeat;
                 position: absolute;
-                top: 6px; // 50%
-                left: 6px; // 50%
-                background-color: #ffffff; // this is fine without a var because it's for both themes
+                top: 6px; /* 50% */
+                left: 6px; /* 50% */
+                background-color: #ffffff; /* this is fine without a var because it's for both themes */
             }
         }
 
@@ -369,7 +369,7 @@ limitations under the License.
     }
 
     &.mx_InviteDialog_tile--inviterError {
-        grid-template-columns: max-content auto; // max-content = avatar width
+        grid-template-columns: max-content auto; /* max-content = avatar width */
         margin-bottom: $spacing-24;
 
         &:last-child {
@@ -450,5 +450,5 @@ limitations under the License.
 }
 
 .mx_InviteDialog_identityServer {
-    margin-top: 1em; // TODO: Use a spacing variable
+    margin-top: 1em; /* TODO: Use a spacing variable */
 }
diff --git a/res/css/views/dialogs/_LeaveSpaceDialog.pcss b/res/css/views/dialogs/_LeaveSpaceDialog.pcss
index aa20efe89a..d63b29f3c1 100644
--- a/res/css/views/dialogs/_LeaveSpaceDialog.pcss
+++ b/res/css/views/dialogs/_LeaveSpaceDialog.pcss
@@ -47,7 +47,7 @@ limitations under the License.
                         content: '';
                         position: absolute;
                         left: 10px;
-                        top: calc(50% - 8px); // vertical centering
+                        top: calc(50% - 8px); /* vertical centering */
                         height: 16px;
                         width: 16px;
                         background-color: $secondary-content;
diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
index 9a05e7f20a..6ad2dc4d08 100644
--- a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
+++ b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
@@ -31,7 +31,7 @@ limitations under the License.
     height: 60vh;
 
     .mx_SearchBox {
-        // To match the space around the title
+        /* To match the space around the title */
         margin: 0 0 15px 0;
         flex-grow: 0;
     }
@@ -119,7 +119,7 @@ limitations under the License.
             content: '';
             position: absolute;
             left: 10px;
-            top: calc(50% - 8px); // vertical centering
+            top: calc(50% - 8px); /* vertical centering */
             height: 16px;
             width: 16px;
             background-color: $secondary-content;
diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss
index 95cde3041a..c92ce13e2e 100644
--- a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss
+++ b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss
@@ -51,9 +51,9 @@ limitations under the License.
         text-decoration: underline;
     }
 
-    // Emulate mx_EventTile[data-layout="group"]
+    /* Emulate mx_EventTile[data-layout="group"] */
     .mx_EventTile {
-        padding-top: 0 !important; // Override mx_EventTile:not([data-layout="bubble"])
+        padding-top: 0 !important; /* Override mx_EventTile:not([data-layout="bubble"]) */
 
         .mx_MessageTimestamp {
             position: absolute;
diff --git a/res/css/views/dialogs/_PollCreateDialog.pcss b/res/css/views/dialogs/_PollCreateDialog.pcss
index 7c59ea1278..b49fda4db0 100644
--- a/res/css/views/dialogs/_PollCreateDialog.pcss
+++ b/res/css/views/dialogs/_PollCreateDialog.pcss
@@ -45,7 +45,7 @@ limitations under the License.
         display: flex;
         align-items: center;
         margin-top: 11px;
-        margin-bottom: 16px; // 11px from the top will collapse, so this creates a 16px gap between options
+        margin-bottom: 16px; /* 11px from the top will collapse, so this creates a 16px gap between options */
 
         .mx_Field {
             flex: 1;
@@ -79,7 +79,7 @@ limitations under the License.
 
     .mx_PollCreateDialog_addOption {
         padding: 0;
-        margin-bottom: 40px; // arbitrary to create scrollable area under the poll
+        margin-bottom: 40px; /* arbitrary to create scrollable area under the poll */
     }
 
     .mx_AccessibleButton_disabled {
diff --git a/res/css/views/dialogs/_RoomSettingsDialog.pcss b/res/css/views/dialogs/_RoomSettingsDialog.pcss
index cad83e2a42..a242a99596 100644
--- a/res/css/views/dialogs/_RoomSettingsDialog.pcss
+++ b/res/css/views/dialogs/_RoomSettingsDialog.pcss
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// ICONS
-// ==========================================================
+/* ICONS */
+/* ========================================================== */
 
 .mx_RoomSettingsDialog_settingsIcon::before {
     mask-image: url('$(res)/img/element-icons/settings.svg');
@@ -34,7 +34,7 @@ limitations under the License.
 }
 
 .mx_RoomSettingsDialog_bridgesIcon::before {
-    // This icon is pants, please improve :)
+    /* This icon is pants, please improve :) */
     mask-image: url('$(res)/img/feather-customised/bridge.svg');
 }
 
@@ -51,7 +51,7 @@ limitations under the License.
     padding-right: 80px;
 }
 
-// show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings
+/* show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings */
 .mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before {
     mask: url("$(res)/img/feather-customised/image.svg");
     mask-repeat: no-repeat;
diff --git a/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss b/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
index a847419a94..72fc912ca6 100644
--- a/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
+++ b/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
@@ -27,7 +27,7 @@ limitations under the License.
             padding: 5px;
             margin-bottom: $spacing-8;
 
-            // border-style around each bridge list item
+            /* border-style around each bridge list item */
             border-width: 1px 1px;
             border-color: $primary-hairline-color;
             border-style: solid;
diff --git a/res/css/views/dialogs/_ServerOfflineDialog.pcss b/res/css/views/dialogs/_ServerOfflineDialog.pcss
index a4f7fad1be..dd027fc8d6 100644
--- a/res/css/views/dialogs/_ServerOfflineDialog.pcss
+++ b/res/css/views/dialogs/_ServerOfflineDialog.pcss
@@ -38,13 +38,13 @@ limitations under the License.
                 display: inline-block;
                 width: 115px;
                 color: $muted-fg-color;
-                line-height: 24px; // same as avatar
+                line-height: 24px; /* same as avatar */
                 vertical-align: top;
             }
 
             .mx_ServerOfflineDialog_content_context_timeline {
                 display: inline-block;
-                width: calc(100% - 155px); // 115px timestamp width + 40px right margin
+                width: calc(100% - 155px); /* 115px timestamp width + 40px right margin */
 
                 .mx_ServerOfflineDialog_content_context_timeline_header {
                     span {
@@ -58,7 +58,7 @@ limitations under the License.
                     margin-top: 8px;
 
                     .mx_ServerOfflineDialog_content_context_txn_desc {
-                        width: calc(100% - 100px); // 100px is an arbitrary margin for the button
+                        width: calc(100% - 100px); /* 100px is an arbitrary margin for the button */
                     }
 
                     .mx_AccessibleButton {
diff --git a/res/css/views/dialogs/_SettingsDialog.pcss b/res/css/views/dialogs/_SettingsDialog.pcss
index e982b6245f..71dedd3fe3 100644
--- a/res/css/views/dialogs/_SettingsDialog.pcss
+++ b/res/css/views/dialogs/_SettingsDialog.pcss
@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// Not actually a component but things shared by settings components
+/* Not actually a component but things shared by settings components */
 .mx_UserSettingsDialog,
 .mx_RoomSettingsDialog,
 .mx_SpaceSettingsDialog,
 .mx_SpacePreferencesDialog {
     width: 90vw;
     max-width: 1000px;
-    // set the height too since tabbed view scrolls itself.
+    /* set the height too since tabbed view scrolls itself. */
     height: 80vh;
 
     .mx_TabbedView {
@@ -35,8 +35,8 @@ limitations under the License.
         display: flex;
         flex-direction: column;
 
-        // Put some padding on the bottom to avoid the settings tab from
-        // colliding harshly with the dialog when scrolled down.
+        /* Put some padding on the bottom to avoid the settings tab from */
+        /* colliding harshly with the dialog when scrolled down. */
         padding-bottom: 100px;
     }
 }
diff --git a/res/css/views/dialogs/_ShareDialog.pcss b/res/css/views/dialogs/_ShareDialog.pcss
index a55849ea08..0d1a5824cb 100644
--- a/res/css/views/dialogs/_ShareDialog.pcss
+++ b/res/css/views/dialogs/_ShareDialog.pcss
@@ -24,7 +24,7 @@ limitations under the License.
     margin: 10px 0;
 
     .mx_CopyableText {
-        width: unset; // full width
+        width: unset; /* full width */
 
         > a {
             text-decoration: none;
diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss
index 9d1ebe2c86..cf6917a475 100644
--- a/res/css/views/dialogs/_SpotlightDialog.pcss
+++ b/res/css/views/dialogs/_SpotlightDialog.pcss
@@ -20,14 +20,14 @@ limitations under the License.
     position: relative;
     height: 60%;
     padding: 0;
-    contain: unset; // needed for #mx_SpotlightDialog_keyboardPrompt to not be culled
+    contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
 
     #mx_SpotlightDialog_keyboardPrompt {
         position: absolute;
         padding: $spacing-8;
         border-radius: 8px;
         background-color: $background;
-        top: -60px; // relative to the top of the modal
+        top: -60px; /* relative to the top of the modal */
         left: 50%;
         transform: translateX(-50%);
         font-size: $font-12px;
@@ -36,13 +36,13 @@ limitations under the License.
 
         kbd {
             display: inline-block;
-            padding: 2px $spacing-4; // TODO: Use a spacing variable
+            padding: 2px $spacing-4; /* TODO: Use a spacing variable */
             margin: 0 $spacing-4;
             border-radius: 6px;
             background-color: $quinary-content;
             vertical-align: middle;
             color: $tertiary-content;
-            // To avoid any styling inherent with <kbd> elements
+            /* To avoid any styling inherent with <kbd> elements */
             font-family: inherit;
             font-weight: inherit;
             font-size: inherit;
@@ -76,7 +76,7 @@ limitations under the License.
             vertical-align: middle;
             color: $primary-content;
             position: relative;
-            padding: $spacing-4 $spacing-8 $spacing-4 37px; // TODO: Use a spacing variable
+            padding: $spacing-4 $spacing-8 $spacing-4 37px; /* TODO: Use a spacing variable */
 
             &::before {
                 background-color: $secondary-content;
@@ -190,7 +190,7 @@ limitations under the License.
                 display: flex;
                 white-space: nowrap;
                 overflow-x: hidden;
-                margin-right: 1px; // occlude the 1px visible of the very next tile to prevent it looking broken
+                margin-right: 1px; /* occlude the 1px visible of the very next tile to prevent it looking broken */
             }
 
             .mx_SpotlightDialog_option {
@@ -209,7 +209,7 @@ limitations under the License.
                 text-overflow: ellipsis;
 
                 .mx_DecoratedRoomAvatar {
-                    margin: 0 9px $spacing-4; // maintain centering
+                    margin: 0 9px $spacing-4; /* maintain centering */
                 }
 
                 & + .mx_SpotlightDialog_option {
@@ -227,7 +227,7 @@ limitations under the License.
         .mx_SpotlightDialog_otherSearches,
         .mx_SpotlightDialog_hiddenResults {
             .mx_SpotlightDialog_option {
-                padding: 6px $spacing-4; // TODO: Use a spacing variable
+                padding: 6px $spacing-4; /* TODO: Use a spacing variable */
                 border-radius: 8px;
                 font-size: $font-15px;
                 line-height: $font-24px;
@@ -251,11 +251,11 @@ limitations under the License.
 
                     .mx_AccessibleButton {
                         padding: $spacing-4 $spacing-20;
-                        margin: 2px $spacing-4; // TODO: Use a spacing variable
+                        margin: 2px $spacing-4; /* TODO: Use a spacing variable */
                     }
 
                     .mx_SpotlightDialog_enterPrompt {
-                        margin-top: 9px; // TODO: Use a spacing variable
+                        margin-top: 9px; /* TODO: Use a spacing variable */
                         margin-right: $spacing-8;
                     }
                 }
@@ -370,7 +370,7 @@ limitations under the License.
             .mx_AccessibleButton {
                 position: relative;
                 margin: 0;
-                padding: 3px $spacing-8 3px $spacing-28; // TODO: Use a spacing variable
+                padding: 3px $spacing-8 3px $spacing-28; /* TODO: Use a spacing variable */
 
                 &::before {
                     content: "";
@@ -471,8 +471,8 @@ limitations under the License.
         }
 
         .mx_SpotlightDialog_enterPrompt {
-            padding: 2px $spacing-4; // TODO: Use a spacing variable
-            // To avoid any styling inherent with <kbd> elements
+            padding: 2px $spacing-4; /* TODO: Use a spacing variable */
+            /* To avoid any styling inherent with <kbd> elements */
             font-family: inherit;
             font-weight: inherit;
             font-size: $font-12px;
diff --git a/res/css/views/dialogs/_UserSettingsDialog.pcss b/res/css/views/dialogs/_UserSettingsDialog.pcss
index 79cacb5c50..c778ad3dd2 100644
--- a/res/css/views/dialogs/_UserSettingsDialog.pcss
+++ b/res/css/views/dialogs/_UserSettingsDialog.pcss
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// ICONS
-// ==========================================================
+/* ICONS */
+/* ========================================================== */
 
 .mx_UserSettingsDialog_settingsIcon::before {
     mask-image: url('$(res)/img/element-icons/settings.svg');
diff --git a/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss b/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss
index c559467c9d..3c1eecb340 100644
--- a/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss
+++ b/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss
@@ -37,16 +37,16 @@ limitations under the License.
     }
 
     .mx_Dialog_buttons {
-        margin-top: 40px; // double normal
+        margin-top: 40px; /* double normal */
     }
 
     .mx_SettingsFlag {
-        line-height: calc($font-14px + 7px + 7px); // 7px top & bottom padding
+        line-height: calc($font-14px + 7px + 7px); /* 7px top & bottom padding */
         color: $muted-fg-color;
         font-size: $font-12px;
 
         .mx_ToggleSwitch {
-            // downsize the switch + ball
+            /* downsize the switch + ball */
             width: $font-32px;
             height: $font-15px;
 
diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
index fc24f27858..11fd44207a 100644
--- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
+++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
@@ -23,12 +23,12 @@ limitations under the License.
             height: 24px;
             margin-inline-end: $spacing-8;
             position: relative;
-            top: 5px; // TODO: spacing variable
+            top: 5px; /* TODO: spacing variable */
             background-color: $primary-content;
         }
 
         &.mx_AccessSecretStorageDialog_resetBadge::before {
-            // The image isn't capable of masking, so we use a background instead.
+            /* The image isn't capable of masking, so we use a background instead. */
             background-image: url("$(res)/img/element-icons/warning-badge.svg");
             background-size: 24px;
             background-color: transparent;
@@ -81,7 +81,7 @@ limitations under the License.
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: 20px;
-                margin-inline-end: 5px; // TODO: spacing variable
+                margin-inline-end: 5px; /* TODO: spacing variable */
             }
 
             &.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
@@ -104,12 +104,12 @@ limitations under the License.
         }
 
         .mx_Dialog_buttons {
-            $spacingStart: $spacing-24;  // 16px icon + 8px padding
+            $spacingStart: $spacing-24;  /* 16px icon + 8px padding */
 
             text-align: initial;
             display: flex;
             flex-flow: column;
-            gap: 14px;  // TODO: spacing variable
+            gap: 14px;  /* TODO: spacing variable */
 
             .mx_Dialog_buttons_additive {
                 float: none;
@@ -125,7 +125,7 @@ limitations under the License.
                         height: 16px;
                         width: 16px;
                         left: 0;
-                        top: 2px; // alignment
+                        top: 2px; /* alignment */
                         background-image: url("$(res)/img/element-icons/warning-badge.svg");
                         background-size: contain;
                     }
@@ -137,7 +137,7 @@ limitations under the License.
             }
 
             .mx_Dialog_buttons_row {
-                gap: $spacing-16; // TODO: needs normalization
+                gap: $spacing-16; /* TODO: needs normalization */
                 padding-inline-start: $spacingStart;
             }
         }
diff --git a/res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss b/res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss
index 8303e02b9e..7255c49d91 100644
--- a/res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss
+++ b/res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss
@@ -15,15 +15,15 @@ limitations under the License.
 */
 
 .mx_CreateCrossSigningDialog {
-    // Why you ask? Because CompleteSecurityBody is 600px so this is the width
-    // we end up when in there, but when in our own dialog we set our own width
-    // so need to fix it to something sensible as otherwise we'd end up either
-    // really wide or really narrow depending on the phase. I bet you wish you
-    // never asked.
+    /* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
+    /* we end up when in there, but when in our own dialog we set our own width */
+    /* so need to fix it to something sensible as otherwise we'd end up either */
+    /* really wide or really narrow depending on the phase. I bet you wish you */
+    /* never asked. */
     width: 560px;
 
     details .mx_AccessibleButton {
-        margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
+        margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
     }
 }
 
diff --git a/res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss b/res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss
index 4503e08fad..515d15bb5a 100644
--- a/res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss
+++ b/res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss
@@ -77,6 +77,6 @@ limitations under the License.
 
 .mx_CreateKeyBackupDialog {
     details .mx_AccessibleButton {
-        margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
+        margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
     }
 }
diff --git a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
index e5b97c4f1b..f9a6a24516 100644
--- a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
+++ b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
@@ -16,11 +16,11 @@ limitations under the License.
 */
 
 .mx_CreateSecretStorageDialog {
-    // Why you ask? Because CompleteSecurityBody is 600px so this is the width
-    // we end up when in there, but when in our own dialog we set our own width
-    // so need to fix it to something sensible as otherwise we'd end up either
-    // really wide or really narrow depending on the phase. I bet you wish you
-    // never asked.
+    /* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
+    /* we end up when in there, but when in our own dialog we set our own width */
+    /* so need to fix it to something sensible as otherwise we'd end up either */
+    /* really wide or really narrow depending on the phase. I bet you wish you */
+    /* never asked. */
     width: 560px;
 
     .mx_SettingsFlag {
@@ -39,7 +39,7 @@ limitations under the License.
     }
 
     details .mx_AccessibleButton {
-        margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
+        margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
     }
 }
 
diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss
index 5f6afbb043..7d01c17e12 100644
--- a/res/css/views/elements/_AccessibleButton.pcss
+++ b/res/css/views/elements/_AccessibleButton.pcss
@@ -38,8 +38,8 @@ limitations under the License.
         align-items: center;
         justify-content: center;
         font-size: $font-14px;
-        border: none; // override default <button /> styles
-        word-break: keep-all; // prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed
+        border: none; /* override default <button /> styles */
+        word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
 
         &.mx_AccessibleButton_kind_primary_sm,
         &.mx_AccessibleButton_kind_danger_sm,
diff --git a/res/css/views/elements/_CopyableText.pcss b/res/css/views/elements/_CopyableText.pcss
index e035b38861..4ba88b62a8 100644
--- a/res/css/views/elements/_CopyableText.pcss
+++ b/res/css/views/elements/_CopyableText.pcss
@@ -32,13 +32,13 @@ limitations under the License.
 
     .mx_CopyableText_copyButton {
         flex-shrink: 0;
-        // using em here to adapt to the local font size
+        /* using em here to adapt to the local font size */
         width: 1em;
         height: 1em;
         cursor: pointer;
         margin-left: 20px;
         display: block;
-        // center to first line
+        /* center to first line */
         position: relative;
         top: .15em;
 
diff --git a/res/css/views/elements/_Dropdown.pcss b/res/css/views/elements/_Dropdown.pcss
index 88cf027e03..6803795fe9 100644
--- a/res/css/views/elements/_Dropdown.pcss
+++ b/res/css/views/elements/_Dropdown.pcss
@@ -95,9 +95,9 @@ input.mx_Dropdown_option:focus {
     border: 0;
     padding-top: 0;
     padding-bottom: 0;
-    // XXX: hack to prevent text box being too big and pushing
-    // its parent out / overlapping the dropdown arrow. Only really
-    // works in the Country dropdown.
+    /* XXX: hack to prevent text box being too big and pushing */
+    /* its parent out / overlapping the dropdown arrow. Only really */
+    /* works in the Country dropdown. */
     width: 60%;
 }
 
diff --git a/res/css/views/elements/_EditableItemList.pcss b/res/css/views/elements/_EditableItemList.pcss
index 8782456249..46bd7c32f9 100644
--- a/res/css/views/elements/_EditableItemList.pcss
+++ b/res/css/views/elements/_EditableItemList.pcss
@@ -51,7 +51,7 @@ limitations under the License.
 .mx_EditableItem_item {
     flex: auto 1 0;
     order: 1;
-    width: calc(100% - 14px); // leave space for the remove button
+    width: calc(100% - 14px); /* leave space for the remove button */
     overflow-x: hidden;
     text-overflow: ellipsis;
 }
diff --git a/res/css/views/elements/_FacePile.pcss b/res/css/views/elements/_FacePile.pcss
index e40695fcf1..dd23eb37e4 100644
--- a/res/css/views/elements/_FacePile.pcss
+++ b/res/css/views/elements/_FacePile.pcss
@@ -23,7 +23,7 @@ limitations under the License.
         flex-direction: row-reverse;
         vertical-align: middle;
 
-        // Overlap the children
+        /* Overlap the children */
         > * + * {
             margin-right: -8px;
         }
@@ -33,7 +33,7 @@ limitations under the License.
         }
 
         .mx_BaseAvatar_initial {
-            margin: 1px; // to offset the border on the image
+            margin: 1px; /* to offset the border on the image */
         }
 
         .mx_FacePile_more {
diff --git a/res/css/views/elements/_Field.pcss b/res/css/views/elements/_Field.pcss
index b4738fb4a6..c1527971be 100644
--- a/res/css/views/elements/_Field.pcss
+++ b/res/css/views/elements/_Field.pcss
@@ -42,8 +42,8 @@ limitations under the License.
     font-weight: normal;
     font-size: $font-14px;
     border: none;
-    // Even without a border here, we still need this avoid overlapping the rounded
-    // corners on the field above.
+    /* Even without a border here, we still need this avoid overlapping the rounded */
+    /* corners on the field above. */
     border-radius: 4px;
     padding: 8px 9px;
     color: $primary-content;
@@ -57,7 +57,7 @@ limitations under the License.
     -webkit-appearance: none;
 }
 
-// Can't add pseudo-elements to a select directly, so we use its parent.
+/* Can't add pseudo-elements to a select directly, so we use its parent. */
 .mx_Field_select::before {
     content: "";
     position: absolute;
@@ -108,11 +108,11 @@ limitations under the License.
     left: 0px;
     margin: 7px 8px;
     padding: 2px;
-    pointer-events: none; // Allow clicks to fall through to the input
+    pointer-events: none; /* Allow clicks to fall through to the input */
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    max-width: calc(100% - 20px); // 100% of parent minus margin and padding
+    max-width: calc(100% - 20px); /* 100% of parent minus margin and padding */
 }
 
 .mx_Field_labelAlwaysTopLeft label,
@@ -183,7 +183,7 @@ limitations under the License.
     animation: mx_fadeout 1s 2s forwards;
 }
 
-// Customise other components when placed inside a Field
+/* Customise other components when placed inside a Field */
 
 .mx_Field .mx_Dropdown_input {
     border: initial;
diff --git a/res/css/views/elements/_GenericEventListSummary.pcss b/res/css/views/elements/_GenericEventListSummary.pcss
index 9687105eb0..4aadf8dfb4 100644
--- a/res/css/views/elements/_GenericEventListSummary.pcss
+++ b/res/css/views/elements/_GenericEventListSummary.pcss
@@ -42,12 +42,12 @@ limitations under the License.
             margin-block: 0;
 
             &[aria-expanded="false"] {
-                order: 9; // TODO: Remove
+                order: 9; /* TODO: Remove */
             }
 
             &[aria-expanded="true"] {
-                margin-inline-start: auto; // reduce clickable area
-                margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
+                margin-inline-start: auto; /* reduce clickable area */
+                margin-inline-end: var(--EventTile_bubble-margin-inline-end); /* as the parent has zero margin */
             }
         }
 
@@ -61,8 +61,8 @@ limitations under the License.
             column-gap: 5px;
         }
 
-        // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
-        // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
+        /* ideally we'd use display=contents here for the layout to all work regardless of the *ELS but */
+        /* that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse. */
         &[data-expanded="true"] {
             flex-direction: column;
             margin: 0;
diff --git a/res/css/views/elements/_ImageView.pcss b/res/css/views/elements/_ImageView.pcss
index e0fb914447..c2dbbf4fd4 100644
--- a/res/css/views/elements/_ImageView.pcss
+++ b/res/css/views/elements/_ImageView.pcss
@@ -135,7 +135,7 @@ $button-gap: 24px;
 .mx_ImageView_button_close {
     padding: calc($button-size - $button-size);
     border-radius: 100%;
-    background: #21262c; // same on all themes
+    background: #21262c; /* same on all themes */
     &::before {
         width: $button-size;
         height: $button-size;
diff --git a/res/css/views/elements/_InlineSpinner.pcss b/res/css/views/elements/_InlineSpinner.pcss
index d7318589c7..e1c1a93e49 100644
--- a/res/css/views/elements/_InlineSpinner.pcss
+++ b/res/css/views/elements/_InlineSpinner.pcss
@@ -24,5 +24,5 @@ limitations under the License.
 }
 
 .mx_InlineSpinner_icon {
-    display: inline-block !important; // Override regular mx_Spinner_icon
+    display: inline-block !important; /* Override regular mx_Spinner_icon */
 }
diff --git a/res/css/views/elements/_InteractiveTooltip.pcss b/res/css/views/elements/_InteractiveTooltip.pcss
index 2240fbc3ac..553e9edf98 100644
--- a/res/css/views/elements/_InteractiveTooltip.pcss
+++ b/res/css/views/elements/_InteractiveTooltip.pcss
@@ -29,19 +29,19 @@ limitations under the License.
 }
 
 .mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
-    top: 10px; // 8px chevron + 2px spacing
+    top: 10px; /* 8px chevron + 2px spacing */
 }
 
 .mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_left {
-    left: 10px; // 8px chevron + 2px spacing
+    left: 10px; /* 8px chevron + 2px spacing */
 }
 
 .mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_right {
-    right: 10px; // 8px chevron + 2px spacing
+    right: 10px; /* 8px chevron + 2px spacing */
 }
 
 .mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
-    bottom: 10px; // 8px chevron + 2px spacing
+    bottom: 10px; /* 8px chevron + 2px spacing */
 }
 
 .mx_InteractiveTooltip_chevron_top {
@@ -55,8 +55,8 @@ limitations under the License.
     border-right: 8px solid transparent;
 }
 
-// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
-// by Sebastiano Guerriero (@guerriero_se)
+/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */
+/* by Sebastiano Guerriero (@guerriero_se) */
 @supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
     .mx_InteractiveTooltip_chevron_top {
         height: 16px;
@@ -66,7 +66,7 @@ limitations under the License.
         clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
         transform: rotate(135deg);
         border-radius: 0 0 0 3px;
-        top: calc(-8px / 1.414); // sqrt(2) because of rotation
+        top: calc(-8px / 1.414); /* sqrt(2) because of rotation */
     }
 }
 
@@ -81,8 +81,8 @@ limitations under the License.
     border-right: 8px solid transparent;
 }
 
-// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
-// by Sebastiano Guerriero (@guerriero_se)
+/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */
+/* by Sebastiano Guerriero (@guerriero_se) */
 @supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
     .mx_InteractiveTooltip_chevron_bottom {
         height: 16px;
@@ -92,6 +92,6 @@ limitations under the License.
         clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
         transform: rotate(-45deg);
         border-radius: 0 0 0 3px;
-        bottom: calc(-8px / 1.414); // sqrt(2) because of rotation
+        bottom: calc(-8px / 1.414); /* sqrt(2) because of rotation */
     }
 }
diff --git a/res/css/views/elements/_LabelledCheckbox.pcss b/res/css/views/elements/_LabelledCheckbox.pcss
index c97b1b341a..d280d27eba 100644
--- a/res/css/views/elements/_LabelledCheckbox.pcss
+++ b/res/css/views/elements/_LabelledCheckbox.pcss
@@ -19,7 +19,7 @@ limitations under the License.
     flex-direction: row;
 
     .mx_Checkbox {
-        margin-top: 3px; // visually align with label text
+        margin-top: 3px; /* visually align with label text */
     }
 
     .mx_LabelledCheckbox_labels {
diff --git a/res/css/views/elements/_MiniAvatarUploader.pcss b/res/css/views/elements/_MiniAvatarUploader.pcss
index 577cf40727..e0949c6365 100644
--- a/res/css/views/elements/_MiniAvatarUploader.pcss
+++ b/res/css/views/elements/_MiniAvatarUploader.pcss
@@ -18,14 +18,14 @@ limitations under the License.
     position: relative;
     width: min-content;
 
-    // this isn't a floating tooltip so override some things to not need to bother with z-index and floating
+    /* this isn't a floating tooltip so override some things to not need to bother with z-index and floating */
     .mx_Tooltip {
         display: inline-block;
         position: absolute;
         z-index: unset;
         width: max-content;
         left: 72px;
-        // top edge starting at 50 % of parent - 50 % of itself -> centered vertically
+        /* top edge starting at 50 % of parent - 50 % of itself -> centered vertically */
         top: 50%;
         transform: translateY(-50%);
     }
diff --git a/res/css/views/elements/_Pill.pcss b/res/css/views/elements/_Pill.pcss
index 608cad180d..f3b44898a9 100644
--- a/res/css/views/elements/_Pill.pcss
+++ b/res/css/views/elements/_Pill.pcss
@@ -26,47 +26,47 @@ limitations under the License.
     overflow: hidden;
     cursor: pointer;
 
-    color: $accent-fg-color !important; // To override .markdown-body
-    background-color: $pill-bg-color !important; // To override .markdown-body
+    color: $accent-fg-color !important; /* To override .markdown-body */
+    background-color: $pill-bg-color !important; /* To override .markdown-body */
 
     &.mx_UserPill_me,
     &.mx_AtRoomPill {
-        background-color: $alert !important; // To override .markdown-body
+        background-color: $alert !important; /* To override .markdown-body */
     }
 
     &:hover {
-        background-color: $pill-hover-bg-color !important; // To override .markdown-body
+        background-color: $pill-hover-bg-color !important; /* To override .markdown-body */
     }
 
     &.mx_UserPill_me:hover {
-        background-color: #ff6b75 !important; // To override .markdown-body | same on both themes
+        background-color: #ff6b75 !important; /* To override .markdown-body | same on both themes */
     }
 
-    // We don't want to indicate clickability
+    /* We don't want to indicate clickability */
     &.mx_AtRoomPill:hover {
-        background-color: $alert !important; // To override .markdown-body
+        background-color: $alert !important; /* To override .markdown-body */
         cursor: unset;
     }
 
     &::before,
     .mx_BaseAvatar {
-        margin-inline-start: -0.3em; // Otherwise the gap is too large
+        margin-inline-start: -0.3em; /* Otherwise the gap is too large */
         margin-inline-end: 0.2em;
-        min-width: $font-16px; // ensure the avatar is not compressed
+        min-width: $font-16px; /* ensure the avatar is not compressed */
     }
 
     .mx_Pill_linkText {
-        white-space: nowrap; // enforce the pill text to be a single line
+        white-space: nowrap; /* enforce the pill text to be a single line */
         overflow: hidden;
         text-overflow: ellipsis;
 
-        pointer-events: none; // ensure clicks on the pills go through the anchor
+        pointer-events: none; /* ensure clicks on the pills go through the anchor */
     }
 
     a& {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
-        text-decoration: none !important; // To override .markdown-body
+        text-decoration: none !important; /* To override .markdown-body */
     }
 }
diff --git a/res/css/views/elements/_ReplyChain.pcss b/res/css/views/elements/_ReplyChain.pcss
index f2e8f13a1f..1f0ba2e665 100644
--- a/res/css/views/elements/_ReplyChain.pcss
+++ b/res/css/views/elements/_ReplyChain.pcss
@@ -16,14 +16,14 @@ limitations under the License.
 
 .mx_ReplyChain {
     margin: 0 0 $spacing-8 0;
-    padding: 0 10px; // TODO: Use a spacing variable
+    padding: 0 10px; /* TODO: Use a spacing variable */
     border-left: 2px solid $accent;
     border-radius: 2px;
 
     .mx_ReplyChain_show {
         &.mx_AccessibleButton_kind_link_inline {
             color: unset;
-            white-space: nowrap; // Enforce 'In reply to' to be a single line
+            white-space: nowrap; /* Enforce 'In reply to' to be a single line */
 
             &:hover {
                 color: $links;
diff --git a/res/css/views/elements/_RichText.pcss b/res/css/views/elements/_RichText.pcss
index 4f0b532c6b..2ef9e8bde5 100644
--- a/res/css/views/elements/_RichText.pcss
+++ b/res/css/views/elements/_RichText.pcss
@@ -1,6 +1,6 @@
-// XXX: bleurgh, what is this? These classes totally break the component
-// naming scheme; it's completely unclear where or how they're being used
-// --Matthew
+/* XXX: bleurgh, what is this? These classes totally break the component */
+/* naming scheme; it's completely unclear where or how they're being used */
+/* --Matthew */
 
 .mx_Markdown_BOLD {
     font-weight: bold;
@@ -13,7 +13,7 @@
     // variant seems yield better results.
 
     // compensate for Nunito italics being terrible
-    // https://github.com/google/fonts/issues/1726
+    // https://github.com/google/fonts/issues/172
     transform: skewX(-14deg);
     display: inline-block;
     */
@@ -37,8 +37,8 @@
 }
 
 .mx_Emoji {
-    // Should be 1.8rem for our default message bodies, and scale with the
-    // surrounding text
+    /* Should be 1.8rem for our default message bodies, and scale with the */
+    /* surrounding text */
     font-size: max($font-18px, 1em);
     vertical-align: bottom;
 }
diff --git a/res/css/views/elements/_RoomAliasField.pcss b/res/css/views/elements/_RoomAliasField.pcss
index 124d24f1f5..96222caca4 100644
--- a/res/css/views/elements/_RoomAliasField.pcss
+++ b/res/css/views/elements/_RoomAliasField.pcss
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .mx_RoomAliasField {
-    // if parent is a flex container, this allows the
-    // width to be as wide as needed, and not 100%
+    /* if parent is a flex container, this allows the */
+    /* width to be as wide as needed, and not 100% */
     flex: 0 1 auto;
     display: flex;
     align-items: stretch;
@@ -47,10 +47,10 @@ limitations under the License.
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
-        // this allows the domain name to show
-        // as long as it doesn't make the input shrink
-        // if it's too big, it shows an ellipsis
-        // 180: 28 for prefix, 152 for input
+        /* this allows the domain name to show */
+        /* as long as it doesn't make the input shrink */
+        /* if it's too big, it shows an ellipsis */
+        /* 180: 28 for prefix, 152 for input */
         max-width: calc(100% - 180px);
     }
 }
diff --git a/res/css/views/elements/_SSOButtons.pcss b/res/css/views/elements/_SSOButtons.pcss
index e8b086c398..ed09ac31e5 100644
--- a/res/css/views/elements/_SSOButtons.pcss
+++ b/res/css/views/elements/_SSOButtons.pcss
@@ -61,9 +61,9 @@ limitations under the License.
 
     .mx_SSOButton_mini {
         box-sizing: border-box;
-        width: 50px; // 48px + 1px border on all sides
-        height: 50px; // 48px + 1px border on all sides
-        min-width: 50px; // prevent crushing by the flexbox
+        width: 50px; /* 48px + 1px border on all sides */
+        height: 50px; /* 48px + 1px border on all sides */
+        min-width: 50px; /* prevent crushing by the flexbox */
         padding: 12px;
 
         > img {
diff --git a/res/css/views/elements/_SettingsFlag.pcss b/res/css/views/elements/_SettingsFlag.pcss
index 6d941e94eb..a581edae67 100644
--- a/res/css/views/elements/_SettingsFlag.pcss
+++ b/res/css/views/elements/_SettingsFlag.pcss
@@ -55,7 +55,7 @@ limitations under the License.
     line-height: $font-15px;
     color: $secondary-content;
 
-    // Support code/pre elements in settings flag descriptions
+    /* Support code/pre elements in settings flag descriptions */
     pre, code {
         font-family: $monospace-font-family !important;
         background-color: $rte-code-bg-color;
diff --git a/res/css/views/elements/_Slider.pcss b/res/css/views/elements/_Slider.pcss
index 6b590f34af..d7d7dd7168 100644
--- a/res/css/views/elements/_Slider.pcss
+++ b/res/css/views/elements/_Slider.pcss
@@ -32,7 +32,7 @@ limitations under the License.
     position: absolute;
     height: 1em;
     width: 100%;
-    padding: 0 0.5em; // half the width of a dot.
+    padding: 0 0.5em; /* half the width of a dot. */
     align-items: center;
 }
 
@@ -46,7 +46,7 @@ limitations under the License.
 .mx_Slider_selection {
     display: flex;
     align-items: center;
-    width: calc(100% - 1em); // 2 * half the width of a dot
+    width: calc(100% - 1em); /* 2 * half the width of a dot */
     height: 1em;
     position: absolute;
     pointer-events: none;
@@ -94,8 +94,8 @@ limitations under the License.
     color: $slider-background-color;
 }
 
-// The following is a hack to center the labels without adding
-// any width to the slider's dots.
+/* The following is a hack to center the labels without adding */
+/* any width to the slider's dots. */
 .mx_Slider_labelContainer {
     width: 1em;
 }
diff --git a/res/css/views/elements/_StyledRadioButton.pcss b/res/css/views/elements/_StyledRadioButton.pcss
index 47f01cb2a7..cc7339ac00 100644
--- a/res/css/views/elements/_StyledRadioButton.pcss
+++ b/res/css/views/elements/_StyledRadioButton.pcss
@@ -47,7 +47,7 @@ limitations under the License.
     }
 
     input[type="radio"] {
-        // Remove the OS's representation
+        /* Remove the OS's representation */
         margin: 0;
         padding: 0;
         appearance: none;
@@ -63,7 +63,7 @@ limitations under the License.
             box-sizing: border-box;
             height: $font-16px;
             width: $font-16px;
-            margin-left: 2px; // For the highlight on focus
+            margin-left: 2px; /* For the highlight on focus */
 
             border: $font-1-5px solid $radio-circle-color;
             border-radius: $font-16px;
diff --git a/res/css/views/elements/_TagComposer.pcss b/res/css/views/elements/_TagComposer.pcss
index 7efe83281f..d5f0033cdd 100644
--- a/res/css/views/elements/_TagComposer.pcss
+++ b/res/css/views/elements/_TagComposer.pcss
@@ -20,19 +20,19 @@ limitations under the License.
 
         .mx_Field {
             flex: 1;
-            margin: 0; // override from field styles
+            margin: 0; /* override from field styles */
         }
 
         .mx_AccessibleButton {
             min-width: 70px;
-            padding: 0 8px; // override from button styles
-            margin-left: 16px; // distance from <Field>
+            padding: 0 8px; /* override from button styles */
+            margin-left: 16px; /* distance from <Field> */
         }
 
         .mx_Field,
         .mx_Field input,
         .mx_AccessibleButton {
-            // So they look related to each other by feeling the same
+            /* So they look related to each other by feeling the same */
             border-radius: 8px;
         }
     }
@@ -40,7 +40,7 @@ limitations under the License.
     .mx_TagComposer_tags {
         display: flex;
         flex-wrap: wrap;
-        margin-top: 12px; // this plus 12px from the tags makes 24px from the input
+        margin-top: 12px; /* this plus 12px from the tags makes 24px from the input */
     }
 
     .mx_Tag {
@@ -73,7 +73,7 @@ limitations under the License.
     .mx_Tag_delete {
         border-radius: 50%;
         text-align: center;
-        width: 1.066666em; // 16px;
+        width: 1.066666em; /* 16px; */
         height: 1.066666em;
         line-height: 1em;
         color: $secondary-content;
diff --git a/res/css/views/elements/_Tooltip.pcss b/res/css/views/elements/_Tooltip.pcss
index 893aa605f1..8793cec41c 100644
--- a/res/css/views/elements/_Tooltip.pcss
+++ b/res/css/views/elements/_Tooltip.pcss
@@ -62,7 +62,7 @@ limitations under the License.
     display: none;
     position: fixed;
     border-radius: 8px;
-    z-index: 6000; // Higher than context menu so tooltips can be used everywhere
+    z-index: 6000; /* Higher than context menu so tooltips can be used everywhere */
     padding: 10px;
     pointer-events: none;
     line-height: $font-14px;
@@ -71,7 +71,7 @@ limitations under the License.
     max-width: 300px;
     word-break: break-word;
 
-    background-color: #21262C; // Same on both themes
+    background-color: #21262C; /* Same on both themes */
     color: $accent-fg-color;
     border: 0;
     text-align: center;
@@ -94,7 +94,7 @@ limitations under the License.
     }
 }
 
-// These tooltips use an older style with a chevron
+/* These tooltips use an older style with a chevron */
 .mx_Field_tooltip {
     background-color: $menu-bg-color;
     color: $primary-content;
diff --git a/res/css/views/location/_LocationPicker.pcss b/res/css/views/location/_LocationPicker.pcss
index 9b513a1fb5..c131d4cd6a 100644
--- a/res/css/views/location/_LocationPicker.pcss
+++ b/res/css/views/location/_LocationPicker.pcss
@@ -22,10 +22,10 @@ limitations under the License.
     display: flex;
     flex-direction: column;
 
-    // when there are errors loading the map
-    // the canvas is still inserted
-    // and can overlap error message/close buttons
-    // hide it
+    /* when there are errors loading the map */
+    /* the canvas is still inserted */
+    /* and can overlap error message/close buttons */
+    /* hide it */
     &.mx_LocationPicker_hasError {
         .maplibregl-canvas-container, .maplibregl-control-container {
             display: none;
@@ -43,8 +43,8 @@ limitations under the License.
         }
 
         .maplibregl-ctrl.maplibregl-ctrl-group {
-            // place below the close button
-            // padding-16 + 24px close button + padding-10
+            /* place below the close button */
+            /* padding-16 + 24px close button + padding-10 */
             margin-top: 50px;
         }
 
diff --git a/res/css/views/messages/_CallEvent.pcss b/res/css/views/messages/_CallEvent.pcss
index b0b117efde..9ce45621ba 100644
--- a/res/css/views/messages/_CallEvent.pcss
+++ b/res/css/views/messages/_CallEvent.pcss
@@ -113,7 +113,7 @@ limitations under the License.
                 display: flex;
                 flex-direction: column;
                 gap: $spacing-4;
-                margin-left: 10px; // To match mx_CallEvent
+                margin-left: 10px; /* To match mx_CallEvent */
                 margin-right: 10px;
                 min-width: 0;
 
@@ -160,8 +160,8 @@ limitations under the License.
             flex-wrap: wrap;
             align-items: center;
             color: $secondary-content;
-            gap: $spacing-12; // See mx_IncomingCallToast_buttons
-            margin-inline-start: 42px; // avatar (32px) + mx_CallEvent_info_basic margin (10px)
+            gap: $spacing-12; /* See mx_IncomingCallToast_buttons */
+            margin-inline-start: 42px; /* avatar (32px) + mx_CallEvent_info_basic margin (10px) */
             word-break: break-word;
             max-width: fit-content;
 
@@ -217,7 +217,7 @@ limitations under the License.
         .mx_CallEvent {
             position: relative;
 
-            // 5px (gap) + 14px (e2e icon size * mask-size) + 9px (margin-left of e2e icon)
+            /* 5px (gap) + 14px (e2e icon size * mask-size) + 9px (margin-left of e2e icon) */
             right: calc(5px + 14px + 9px);
         }
     }
@@ -236,7 +236,7 @@ limitations under the License.
 .mx_IRCLayout {
     .mx_CallEvent_wrapper {
         .mx_CallEvent {
-            margin-inline-start: $spacing-4; // display green line
+            margin-inline-start: $spacing-4; /* display green line */
         }
     }
 }
diff --git a/res/css/views/messages/_DisambiguatedProfile.pcss b/res/css/views/messages/_DisambiguatedProfile.pcss
index cb605726dd..ef4bc7cfb3 100644
--- a/res/css/views/messages/_DisambiguatedProfile.pcss
+++ b/res/css/views/messages/_DisambiguatedProfile.pcss
@@ -30,7 +30,7 @@ limitations under the License.
         font-weight: 600;
         font-size: 1.1rem;
         margin-inline-start: 5px;
-        opacity: 0.5; // Match mx_TextualEvent
+        opacity: 0.5; /* Match mx_TextualEvent */
         color: $primary-content;
     }
 }
diff --git a/res/css/views/messages/_EventTileBubble.pcss b/res/css/views/messages/_EventTileBubble.pcss
index 4135dc09f2..bbf346cab1 100644
--- a/res/css/views/messages/_EventTileBubble.pcss
+++ b/res/css/views/messages/_EventTileBubble.pcss
@@ -15,12 +15,12 @@ limitations under the License.
 */
 
 .mx_EventTileBubble {
-    --EventTileBubble_margin-block: 10px; // TODO: Use a spacing variable
+    --EventTileBubble_margin-block: 10px; /* TODO: Use a spacing variable */
 
     background-color: $dark-panel-bg-color;
-    padding: 10px; // TODO: Use a spacing variable
+    padding: 10px; /* TODO: Use a spacing variable */
     border-radius: 8px;
-    // Reserve space for external timestamps, but also cap the width
+    /* Reserve space for external timestamps, but also cap the width */
     max-width: min(calc(100% - 2 * $MessageTimestamp_width), 600px);
     box-sizing: border-box;
     display: grid;
diff --git a/res/css/views/messages/_JumpToDatePicker.pcss b/res/css/views/messages/_JumpToDatePicker.pcss
index ae8646764d..d7ff865d28 100644
--- a/res/css/views/messages/_JumpToDatePicker.pcss
+++ b/res/css/views/messages/_JumpToDatePicker.pcss
@@ -16,8 +16,8 @@ limitations under the License.
 
 .mx_JumpToDatePicker_form {
     display: flex;
-    // This matches the default padding of IconizedContextMenuOption
-    // (see context_menus/_IconizedContextMenu.pcss)
+    /* This matches the default padding of IconizedContextMenuOption */
+    /* (see context_menus/_IconizedContextMenu.pcss) */
     padding-top: 12px;
     padding-bottom: 12px;
 }
diff --git a/res/css/views/messages/_MFileBody.pcss b/res/css/views/messages/_MFileBody.pcss
index ccb6b9a355..c0fe75229a 100644
--- a/res/css/views/messages/_MFileBody.pcss
+++ b/res/css/views/messages/_MFileBody.pcss
@@ -18,7 +18,7 @@ limitations under the License.
     color: $accent;
 
     .mx_MFileBody_download_icon {
-        // 12px instead of 14px to better match surrounding font size
+        /* 12px instead of 14px to better match surrounding font size */
         width: 12px;
         height: 12px;
         mask-size: 12px;
@@ -93,7 +93,7 @@ limitations under the License.
         overflow: hidden;
         white-space: nowrap;
         display: inline-block;
-        width: calc(100% - 32px - 12px); // 32px icon, 12px margin on the icon
+        width: calc(100% - 32px - 12px); /* 32px icon, 12px margin on the icon */
         vertical-align: middle;
     }
 }
diff --git a/res/css/views/messages/_MImageBody.pcss b/res/css/views/messages/_MImageBody.pcss
index ba29f06cb0..01bd8b9699 100644
--- a/res/css/views/messages/_MImageBody.pcss
+++ b/res/css/views/messages/_MImageBody.pcss
@@ -24,23 +24,23 @@ $timeline-image-border-radius: 8px;
     padding: $spacing-4;
     border-radius: $timeline-image-border-radius;
     font-size: $font-15px;
-    user-select: none; // prevent banner text from being selected
-    pointer-events: none; // let the cursor go through to the media underneath
+    user-select: none; /* prevent banner text from being selected */
+    pointer-events: none; /* let the cursor go through to the media underneath */
 
-    // Trying to match the width of the image is surprisingly difficult, so arbitrarily break it off early.
+    /* Trying to match the width of the image is surprisingly difficult, so arbitrarily break it off early. */
     max-width: min(100%, 350px);
 
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
 
-    // Hardcoded colours because it's the same on all themes
+    /* Hardcoded colours because it's the same on all themes */
     background-color: rgba(0, 0, 0, 0.6);
     color: #ffffff;
 }
 
 .mx_MImageBody_placeholder {
-    // Position the placeholder on top of the thumbnail, so that the reveal animation can work
+    /* Position the placeholder on top of the thumbnail, so that the reveal animation can work */
     position: absolute;
     left: 0;
     top: 0;
@@ -57,7 +57,7 @@ $timeline-image-border-radius: 8px;
 .mx_MImageBody_thumbnail_container {
     border-radius: $timeline-image-border-radius;
 
-    // Necessary for the border radius to apply correctly to the placeholder
+    /* Necessary for the border radius to apply correctly to the placeholder */
     overflow: hidden;
     contain: paint;
 }
@@ -65,14 +65,14 @@ $timeline-image-border-radius: 8px;
 .mx_MImageBody_thumbnail {
     display: block;
 
-    // Force the image to be the full size of the container, even if the
-    // pixel size is smaller. The problem here is that we don't know what
-    // thumbnail size the HS is going to give us, but we have to commit to
-    // a container size immediately and not change it when the image loads
-    // or we'll get a scroll jump (or have to leave blank space).
-    // This will obviously result in an upscaled image which will be a bit
-    // blurry. The best fix would be for the HS to advertise what size thumbnails
-    // it guarantees to produce.
+    /* Force the image to be the full size of the container, even if the */
+    /* pixel size is smaller. The problem here is that we don't know what */
+    /* thumbnail size the HS is going to give us, but we have to commit to */
+    /* a container size immediately and not change it when the image loads */
+    /* or we'll get a scroll jump (or have to leave blank space). */
+    /* This will obviously result in an upscaled image which will be a bit */
+    /* blurry. The best fix would be for the HS to advertise what size thumbnails */
+    /* it guarantees to produce. */
     height: 100%;
     width: 100%;
 }
@@ -97,7 +97,7 @@ $timeline-image-border-radius: 8px;
     bottom: 0;
     right: 0;
 
-    // To center the text in the middle of the frame
+    /* To center the text in the middle of the frame */
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/res/css/views/messages/_MImageReplyBody.pcss b/res/css/views/messages/_MImageReplyBody.pcss
index 364a756dc8..f1b9514adc 100644
--- a/res/css/views/messages/_MImageReplyBody.pcss
+++ b/res/css/views/messages/_MImageReplyBody.pcss
@@ -21,7 +21,7 @@ limitations under the License.
     .mx_MImageBody_thumbnail_container,
     .mx_MImageReplyBody_info {
         flex: 1;
-        min-width: 0; // Prevent a blowout
+        min-width: 0; /* Prevent a blowout */
     }
 
     .mx_MImageReplyBody_info {
diff --git a/res/css/views/messages/_MJitsiWidgetEvent.pcss b/res/css/views/messages/_MJitsiWidgetEvent.pcss
index 0d811a74b0..8bda80e741 100644
--- a/res/css/views/messages/_MJitsiWidgetEvent.pcss
+++ b/res/css/views/messages/_MJitsiWidgetEvent.pcss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_EventTileBubble.mx_MJitsiWidgetEvent {
     &::before {
-        background-color: $header-panel-text-primary-color; // XXX: Variable abuse
+        background-color: $header-panel-text-primary-color; /* XXX: Variable abuse */
         mask-image: url('$(res)/img/element-icons/call/video-call.svg');
     }
 }
diff --git a/res/css/views/messages/_MLocationBody.pcss b/res/css/views/messages/_MLocationBody.pcss
index 2a8866c03b..0692a0c1e9 100644
--- a/res/css/views/messages/_MLocationBody.pcss
+++ b/res/css/views/messages/_MLocationBody.pcss
@@ -21,7 +21,7 @@ limitations under the License.
         max-width: 100%;
         width: 450px;
         height: 300px;
-        z-index: 0; // keeps the entire map under the message action bar
+        z-index: 0; /* keeps the entire map under the message action bar */
 
         border-radius: $timeline-image-border-radius;
         cursor: pointer;
@@ -40,10 +40,10 @@ limitations under the License.
 }
 
 .mx_DisambiguatedProfile ~ .mx_MLocationBody {
-    margin-top: 6px; // See: https://github.com/matrix-org/matrix-react-sdk/pull/8442
+    margin-top: 6px; /* See: https://github.com/matrix-org/matrix-react-sdk/pull/8442 */
 }
 
 .mx_ReplyTile .mx_MLocationBody {
-    // Prevent clicking a location within a reply
+    /* Prevent clicking a location within a reply */
     pointer-events: none;
 }
diff --git a/res/css/views/messages/_MPollBody.pcss b/res/css/views/messages/_MPollBody.pcss
index 81613339d1..7eeb7e2518 100644
--- a/res/css/views/messages/_MPollBody.pcss
+++ b/res/css/views/messages/_MPollBody.pcss
@@ -109,7 +109,7 @@ limitations under the License.
         }
     }
 
-    // options not actionable in these states
+    /* options not actionable in these states */
     .mx_MPollBody_option_checked, .mx_MPollBody_option_ended {
         pointer-events: none;
     }
@@ -151,14 +151,14 @@ limitations under the License.
     }
 }
 
-// Prevent clicking a poll within a reply
+/* Prevent clicking a poll within a reply */
 .mx_ReplyTile .mx_MPollBody {
     pointer-events: none;
 }
 
 .mx_MPollBody_option,
-// label has cursor: default in user-agent stylesheet
-// override
+/* label has cursor: default in user-agent stylesheet */
+/* override */
 .mx_MPollBody_live-option {
     cursor: pointer;
 }
diff --git a/res/css/views/messages/_MStickerBody.pcss b/res/css/views/messages/_MStickerBody.pcss
index 12cd7c6f39..4d1b49b5ff 100644
--- a/res/css/views/messages/_MStickerBody.pcss
+++ b/res/css/views/messages/_MStickerBody.pcss
@@ -28,14 +28,14 @@ limitations under the License.
     text-decoration: none;
     text-align: center;
 
-    // To center the text in the middle of the frame
+    /* To center the text in the middle of the frame */
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .mx_MStickerBody_placeholder {
-    // centering
+    /* centering */
     position: absolute;
     left: calc(50% - 40px);
     top: calc(50% - 40px);
diff --git a/res/css/views/messages/_MediaBody.pcss b/res/css/views/messages/_MediaBody.pcss
index 874de05c71..b7daa3c820 100644
--- a/res/css/views/messages/_MediaBody.pcss
+++ b/res/css/views/messages/_MediaBody.pcss
@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// A "media body" is any file upload looking thing, apart from images and videos (they
-// have unique styles).
+/* A "media body" is any file upload looking thing, apart from images and videos (they */
+/* have unique styles). */
 
 .mx_MediaBody {
     background-color: $quinary-content;
     border-radius: 12px;
-    max-width: 243px; // use max-width instead of width so it fits within right panels
+    max-width: 243px; /* use max-width instead of width so it fits within right panels */
 
     color: $secondary-content;
     font-size: $font-14px;
diff --git a/res/css/views/messages/_MessageActionBar.pcss b/res/css/views/messages/_MessageActionBar.pcss
index 6ed2405d34..2b0e17fdb4 100644
--- a/res/css/views/messages/_MessageActionBar.pcss
+++ b/res/css/views/messages/_MessageActionBar.pcss
@@ -17,7 +17,7 @@ limitations under the License.
 
 .mx_MessageActionBar {
     --MessageActionBar-size-button: 28px;
-    --MessageActionBar-size-box: 32px; // 28px + 2px (margin) * 2
+    --MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
     --MessageActionBar-item-hover-background: $panel-actions;
     --MessageActionBar-item-hover-borderRadius: 6px;
     --MessageActionBar-item-hover-zIndex: 1;
@@ -35,20 +35,20 @@ limitations under the License.
     top: -32px;
     right: 8px;
     user-select: none;
-    // Ensure the action bar appears above other things like the read marker
-    // and sender avatar (for small screens)
+    /* Ensure the action bar appears above other things like the read marker */
+    /* and sender avatar (for small screens) */
     z-index: 10;
 
-    // Adds a previous event safe area so that you can't accidentally hover the
-    // previous event while trying to mouse into the action bar or from the
-    // react button to its tooltip.
+    /* Adds a previous event safe area so that you can't accidentally hover the */
+    /* previous event while trying to mouse into the action bar or from the */
+    /* react button to its tooltip. */
     &::before {
         content: '';
         position: absolute;
-        // tooltip safe mousing area + tooltip overhang +
-        // action bar + action bar offset from event
+        /* tooltip safe mousing area + tooltip overhang + */
+        /* action bar + action bar offset from event */
         width: calc(10px + 48px + 100% + 8px);
-        // safe area + action bar
+        /* safe area + action bar */
         height: calc(20px + 100%);
         top: -12px;
         left: -58px;
@@ -57,10 +57,10 @@ limitations under the License.
 
         /* stylelint-disable-next-line max-line-length */
         .mx_GenericEventListSummary[data-layout="bubble"] .mx_GenericEventListSummary_toggle ~ .mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type & {
-            // improve clickability of "collapse" link button on bubble layout by reducing width and height values
-            // mx_GenericEventListSummary_toggle ~: to apply rules to action bar when "collapse" button is available
-            // mx_EventTile_info:first-of-type: to apply rules to the info event tile just under "collapse" button
-            // TODO: use a new class name instead
+            /* improve clickability of "collapse" link button on bubble layout by reducing width and height values */
+            /* mx_GenericEventListSummary_toggle ~: to apply rules to action bar when "collapse" button is available */
+            /* mx_EventTile_info:first-of-type: to apply rules to the info event tile just under "collapse" button */
+            /* TODO: use a new class name instead */
             width: 100%;
             height: 100%;
             top: 0;
@@ -68,7 +68,7 @@ limitations under the License.
         }
 
         .mx_EventTile_info .mx_ViewSourceEvent ~ & {
-            // improve clickability of view source event toggle button by removing vertical safe area
+            /* improve clickability of view source event toggle button by removing vertical safe area */
             width: 100%;
             height: 100%;
             top: 0;
@@ -131,7 +131,7 @@ limitations under the License.
 
             &.mx_MessageActionBar_downloadSpinnerButton {
                 svg {
-                    display: none; // hide the download icon
+                    display: none; /* hide the download icon */
                 }
             }
         }
diff --git a/res/css/views/messages/_MessageTimestamp.pcss b/res/css/views/messages/_MessageTimestamp.pcss
index ea11cc5a34..e4e1a475ec 100644
--- a/res/css/views/messages/_MessageTimestamp.pcss
+++ b/res/css/views/messages/_MessageTimestamp.pcss
@@ -20,7 +20,7 @@ limitations under the License.
     color: $event-timestamp-color;
     font-size: $font-10px;
     font-variant-numeric: tabular-nums;
-    display: block; // enable the width setting below
+    display: block; /* enable the width setting below */
     width: $MessageTimestamp_width;
     white-space: nowrap;
     user-select: none;
diff --git a/res/css/views/messages/_ReactionsRow.pcss b/res/css/views/messages/_ReactionsRow.pcss
index 591abce143..dbf5ab9964 100644
--- a/res/css/views/messages/_ReactionsRow.pcss
+++ b/res/css/views/messages/_ReactionsRow.pcss
@@ -21,7 +21,7 @@ limitations under the License.
     .mx_ReactionsRow_addReactionButton {
         position: relative;
         display: inline-block;
-        visibility: hidden; // show on hover of the .mx_EventTile
+        visibility: hidden; /* show on hover of the .mx_EventTile */
         width: 24px;
         height: 24px;
         vertical-align: middle;
@@ -41,7 +41,7 @@ limitations under the License.
         }
 
         &.mx_ReactionsRow_addReactionButton_active {
-            visibility: visible; // keep showing whilst the context menu is shown
+            visibility: visible; /* keep showing whilst the context menu is shown */
         }
 
         &:hover, &.mx_ReactionsRow_addReactionButton_active {
diff --git a/res/css/views/messages/_ViewSourceEvent.pcss b/res/css/views/messages/_ViewSourceEvent.pcss
index 0cb7359fc5..63698a1371 100644
--- a/res/css/views/messages/_ViewSourceEvent.pcss
+++ b/res/css/views/messages/_ViewSourceEvent.pcss
@@ -19,8 +19,8 @@ limitations under the License.
     opacity: 0.6;
     font-size: $font-12px;
     width: 100%;
-    overflow-x: auto; // Cancel overflow setting of .mx_EventTile_content
-    line-height: normal; // Align with avatar and E2E icon
+    overflow-x: auto; /* Cancel overflow setting of .mx_EventTile_content */
+    line-height: normal; /* Align with avatar and E2E icon */
 
     pre,
     code {
@@ -34,9 +34,9 @@ limitations under the License.
 
     .mx_ViewSourceEvent_toggle {
         visibility: hidden;
-        // override styles from AccessibleButton
+        /* override styles from AccessibleButton */
         border-radius: 0;
-        // icon
+        /* icon */
         mask-repeat: no-repeat;
         mask-position: 0 center;
         mask-size: auto 12px;
diff --git a/res/css/views/messages/_common_CryptoEvent.pcss b/res/css/views/messages/_common_CryptoEvent.pcss
index 5753a8bf79..3371012509 100644
--- a/res/css/views/messages/_common_CryptoEvent.pcss
+++ b/res/css/views/messages/_common_CryptoEvent.pcss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_EventTileBubble.mx_cryptoEvent {
     margin: var(--EventTileBubble_margin-block) auto;
 
-    // white infill for the transparency
+    /* white infill for the transparency */
     &.mx_cryptoEvent_icon::before {
         background-color: #ffffff;
         mask-image: url('$(res)/img/e2e/normal.svg');
diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss
index 1ea320a04e..5b55da70fc 100644
--- a/res/css/views/right_panel/_BaseCard.pcss
+++ b/res/css/views/right_panel/_BaseCard.pcss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_BaseCard {
     --BaseCard_padding-inline: $spacing-8;
     --BaseCard_EventTile_line-padding-block: 2px;
-    --BaseCard_EventTile-spacing-inline: 36px; // TODO: Use a spacing variable
+    --BaseCard_EventTile-spacing-inline: 36px; /* TODO: Use a spacing variable */
     --BaseCard_header-button-size: 24px;
 
     padding: 0 var(--BaseCard_padding-inline);
@@ -32,7 +32,7 @@ limitations under the License.
         margin: $spacing-4 0 $spacing-12;
 
         > h2 {
-            margin: 0 44px; // TODO: Use a spacing variable
+            margin: 0 44px; /* TODO: Use a spacing variable */
             font-size: $font-18px;
             font-weight: $font-semi-bold;
             overflow: hidden;
@@ -73,13 +73,13 @@ limitations under the License.
                 mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
             }
 
-            // Header title with the back button
+            /* Header title with the back button */
             ~ .mx_BaseCard_header_title {
                 width: calc(100% - 60px);
                 margin-inline-start: var(--BaseCard_header-button-size);
 
                 .mx_BaseCard_header_title_heading {
-                    margin-inline-start: 6px; // TODO: Use a spacing variable
+                    margin-inline-start: 6px; /* TODO: Use a spacing variable */
                 }
             }
         }
@@ -135,7 +135,7 @@ limitations under the License.
     }
 
     .mx_AutoHideScrollbar {
-        // collapse the margin into a padding to move the scrollbar into the right gutter
+        /* collapse the margin into a padding to move the scrollbar into the right gutter */
         margin-right: -8px;
         padding-right: 8px;
         min-height: 0;
@@ -158,7 +158,7 @@ limitations under the License.
         }
 
         .mx_BaseCard_Button {
-            padding: 10px; // TODO: Use a spacing variable
+            padding: 10px; /* TODO: Use a spacing variable */
             padding-inline-start: $spacing-12;
             margin: 0;
             position: relative;
@@ -234,8 +234,8 @@ limitations under the License.
 
         font-size: $font-12px;
         color: $secondary-content;
-        padding-top: 10px; // TODO: Use a spacing variable
-        padding-bottom: 10px; // TODO: Use a spacing variable
+        padding-top: 10px; /* TODO: Use a spacing variable */
+        padding-bottom: 10px; /* TODO: Use a spacing variable */
 
         border: 1px solid $quinary-content;
         box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
@@ -243,7 +243,7 @@ limitations under the License.
 
     .mx_ContextualMenu_chevron_top {
         left: auto;
-        right: 22px; // TODO: Use a spacing variable
+        right: 22px; /* TODO: Use a spacing variable */
         border-bottom-color: $quinary-content;
 
         &::after {
diff --git a/res/css/views/right_panel/_PinnedMessagesCard.pcss b/res/css/views/right_panel/_PinnedMessagesCard.pcss
index 3c753f2d86..7b6396a8ec 100644
--- a/res/css/views/right_panel/_PinnedMessagesCard.pcss
+++ b/res/css/views/right_panel/_PinnedMessagesCard.pcss
@@ -29,7 +29,7 @@ limitations under the License.
                 width: max-content;
                 margin: 0 auto;
 
-                // Cancel the default values for non-interactivity
+                /* Cancel the default values for non-interactivity */
                 position: unset;
                 visibility: visible;
                 cursor: unset;
diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss
index 6061b853dd..b81f1b64b0 100644
--- a/res/css/views/right_panel/_RoomSummaryCard.pcss
+++ b/res/css/views/right_panel/_RoomSummaryCard.pcss
@@ -47,8 +47,8 @@ limitations under the License.
                 height: 54px;
                 border-radius: 50%;
                 background-color: #737d8c;
-                margin-top: -3px; // alignment
-                margin-left: -10px; // overlap
+                margin-top: -3px; /* alignment */
+                margin-left: -10px; /* overlap */
                 border: 3px solid $dark-panel-bg-color;
 
                 &::before {
@@ -109,14 +109,14 @@ limitations under the License.
 
     .mx_RoomSummaryCard_appsGroup {
         .mx_RoomSummaryCard_Button {
-            // this button is special so we have to override some of the original styling
-            // as we will be applying it in its children
+            /* this button is special so we have to override some of the original styling */
+            /* as we will be applying it in its children */
             padding: 0;
             height: auto;
             color: $tertiary-content;
 
             .mx_RoomSummaryCard_icon_app {
-                padding: 10px 48px 10px 12px; // based on typical mx_RoomSummaryCard_Button padding
+                padding: 10px 48px 10px 12px; /* based on typical mx_RoomSummaryCard_Button padding */
                 text-overflow: ellipsis;
                 overflow: hidden;
 
@@ -135,11 +135,11 @@ limitations under the License.
             .mx_RoomSummaryCard_app_options {
                 position: absolute;
                 top: 0;
-                height: 100%; // to give bigger interactive zone
+                height: 100%; /* to give bigger interactive zone */
                 width: 24px;
                 padding: 12px 4px;
                 box-sizing: border-box;
-                min-width: 24px; // prevent flexbox crushing
+                min-width: 24px; /* prevent flexbox crushing */
 
                 &:hover {
                     &::after {
@@ -147,7 +147,7 @@ limitations under the License.
                         position: absolute;
                         height: 24px;
                         width: 24px;
-                        top: 8px; // equal to padding-top of parent
+                        top: 8px; /* equal to padding-top of parent */
                         left: 0;
                         border-radius: 12px;
                         background-color: rgba(141, 151, 165, 0.1);
@@ -174,7 +174,7 @@ limitations under the License.
                 }
             }
             .mx_RoomSummaryCard_app_maximiseToggle {
-                right: 32px; //24 + 8
+                right: 32px; /* 24 + 8 */
 
                 &::before {
                     mask-size: 14px;
@@ -183,9 +183,8 @@ limitations under the License.
             }
 
             .mx_RoomSummaryCard_app_options {
-                right: 56px; //2*24 + 8
+                right: 56px; /* 2*24 + 8 */
                 display: none;
-
                 &::before {
                     mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
                 }
@@ -226,8 +225,8 @@ limitations under the License.
             }
 
             &::after {
-                top: 8px; // re-align based on the height change
-                pointer-events: none; // pass through to the real button
+                top: 8px; /* re-align based on the height change */
+                pointer-events: none; /* pass through to the real button */
             }
         }
     }
diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss
index 2b2bd120be..e0564c6780 100644
--- a/res/css/views/right_panel/_ThreadPanel.pcss
+++ b/res/css/views/right_panel/_ThreadPanel.pcss
@@ -26,7 +26,7 @@ limitations under the License.
             }
 
             .mx_ThreadPanel_dropdown {
-                padding: 3px $spacing-4 3px $spacing-8; // TODO: Use a spacing variable
+                padding: 3px $spacing-4 3px $spacing-8; /* TODO: Use a spacing variable */
                 border-radius: 4px;
                 line-height: 1.5;
                 user-select: none;
@@ -55,25 +55,25 @@ limitations under the License.
         background-color: $background;
         border-radius: 8px;
         padding-inline-end: 0;
-        overflow-y: scroll; // set gap between the thread tile and the right border
+        overflow-y: scroll; /* set gap between the thread tile and the right border */
         height: 100%;
     }
 
     .mx_EventTile[data-layout="group"] {
         .mx_MessageActionBar {
             right: 0;
-            top: -36px; // 2px above EventTile
-            z-index: 10; // See _EventTile.pcss
+            top: -36px; /* 2px above EventTile */
+            z-index: 10; /* See _EventTile.pcss */
         }
     }
 
-    // For style rules of EventTile in a thread, see _EventTile.pcss
+    /* For style rules of EventTile in a thread, see _EventTile.pcss */
     &.mx_ThreadView {
         max-height: 100%;
 
         .mx_ThreadView_timelinePanelWrapper {
             position: relative;
-            min-height: 0; // don't displace the composer
+            min-height: 0; /* don't displace the composer */
             flex-grow: 1;
 
             .mx_FileDropTarget {
@@ -86,9 +86,9 @@ limitations under the License.
         }
     }
 
-    .mx_RoomView_messagePanel { // To avoid the rule from being applied to .mx_ThreadPanel_empty
+    .mx_RoomView_messagePanel { /* To avoid the rule from being applied to .mx_ThreadPanel_empty */
         .mx_RoomView_messageListWrapper {
-            width: calc(100% + 6px); // 8px - 2px
+            width: calc(100% + 6px); /* 8px - 2px */
         }
     }
 
@@ -100,7 +100,7 @@ limitations under the License.
 
     .mx_EventTile,
     .mx_GenericEventListSummary {
-        // Account for scrollbar when hovering
+        /* Account for scrollbar when hovering */
         padding-top: 0;
 
         .mx_DateSeparator {
@@ -160,7 +160,7 @@ limitations under the License.
     bottom: 0;
     left: 0;
     padding: 20px;
-    box-sizing: border-box; // Include padding and border
+    box-sizing: border-box; /* Include padding and border */
     width: 100%;
 
     h2 {
diff --git a/res/css/views/right_panel/_TimelineCard.pcss b/res/css/views/right_panel/_TimelineCard.pcss
index 84c890d685..13ddda8915 100644
--- a/res/css/views/right_panel/_TimelineCard.pcss
+++ b/res/css/views/right_panel/_TimelineCard.pcss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_TimelineCard {
     .mx_TimelineCard_timeline {
         overflow: hidden;
-        position: relative; // offset parent for jump to bottom button
+        position: relative; /* offset parent for jump to bottom button */
         flex: 1;
         border-radius: 8px;
     }
@@ -55,7 +55,7 @@ limitations under the License.
             &.mx_EventTile_info .mx_EventTile_line,
             .mx_EventTile_line {
                 padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
-                padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden
+                padding-inline-end: $MessageTimestamp_width; /* ensure timestamp is not hidden */
 
                 .mx_EventTile_e2eIcon {
                     inset-inline-start: $spacing-8;
@@ -87,7 +87,7 @@ limitations under the License.
             }
 
             .mx_DisambiguatedProfile {
-                max-width: calc(100% - var(--BaseCard_EventTile-spacing-inline)); // instead of $left-gutter
+                max-width: calc(100% - var(--BaseCard_EventTile-spacing-inline)); /* instead of $left-gutter */
             }
 
             .mx_ReplyTile .mx_DisambiguatedProfile {
@@ -101,7 +101,7 @@ limitations under the License.
             }
 
             .mx_ReactionsRow {
-                // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss
+                /* See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss */
                 margin-inline-end: $spacing-8;
             }
 
@@ -119,9 +119,9 @@ limitations under the License.
         }
 
         &[data-layout="group"] {
-            // Read receipt group on compact modern layout
-            // This is required because mx_TimelineCard is a child element wrapped by mx_MatrixChat_useCompactLayout,
-            // which specifies the default position of mx_ReadReceiptGroup on compact modern layout.
+            /* Read receipt group on compact modern layout */
+            /* This is required because mx_TimelineCard is a child element wrapped by mx_MatrixChat_useCompactLayout, */
+            /* which specifies the default position of mx_ReadReceiptGroup on compact modern layout. */
             .mx_MatrixChat_useCompactLayout & .mx_ReadReceiptGroup {
                 top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
             }
@@ -129,16 +129,16 @@ limitations under the License.
 
         &[data-layout="bubble"] {
             &::before {
-                z-index: auto; // enable background color on hover
+                z-index: auto; /* enable background color on hover */
             }
 
             &.mx_EventTile_info .mx_MessageActionBar {
-                // 1px: border width
+                /* 1px: border width */
                 inset-inline-end: calc($container-gap-width + var(--BaseCard_padding-inline) + 1px);
             }
 
             .mx_ReactionsRow {
-                position: relative; // display on hover
+                position: relative; /* display on hover */
             }
         }
     }
@@ -157,24 +157,24 @@ limitations under the License.
             .mx_EventTile_line,
             .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
                 padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
-                padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden
+                padding-inline-end: $MessageTimestamp_width; /* ensure timestamp is not hidden */
             }
         }
     }
 
     .mx_WhoIsTypingTile {
-        margin-left: -12px; // undo padding on the message list
+        margin-left: -12px; /* undo padding on the message list */
     }
 
     .mx_WhoIsTypingTile_avatars {
-        flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines)
+        flex-basis: 48px; /* 12 (padding on message list) + 36 (padding on event lines) */
     }
 
-    .mx_GenericEventListSummary_unstyledList, // RR next to a message on the event list summary
-    .mx_RoomView_MessageList {                // RR next to a message on the messsge list
+    .mx_GenericEventListSummary_unstyledList, /* RR next to a message on the event list summary */
+    .mx_RoomView_MessageList {                /* RR next to a message on the messsge list */
         .mx_EventTile[data-layout="bubble"] {
             .mx_ReadReceiptGroup {
-                // 6px: scroll bar width (magic number)
+                /* 6px: scroll bar width (magic number) */
                 /* stylelint-disable-next-line declaration-colon-space-after */
                 inset-inline-end:
                     calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + $container-gap-width + 6px);
@@ -182,7 +182,7 @@ limitations under the License.
 
             &.mx_EventTile_info {
                 .mx_ReadReceiptGroup {
-                    inset-inline-end: -4px; // align with RR outside of info tile
+                    inset-inline-end: -4px; /* align with RR outside of info tile */
                 }
             }
         }
diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss
index 4a0478888d..e947435a8f 100644
--- a/res/css/views/right_panel/_UserInfo.pcss
+++ b/res/css/views/right_panel/_UserInfo.pcss
@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 .mx_UserInfo.mx_BaseCard {
-    // UserInfo has a circular image at the top so it fits between the back & close buttons
+    /* UserInfo has a circular image at the top so it fits between the back & close buttons */
     padding-top: 0;
     overflow-y: auto;
     font-size: $font-12px;
@@ -27,8 +27,8 @@ limitations under the License.
         top: 0;
         border-radius: 4px;
         background-color: $dark-panel-bg-color;
-        margin: 9px; // TODO: Use a variable
-        z-index: 1; // render on top of the right panel
+        margin: 9px; /* TODO: Use a variable */
+        z-index: 1; /* render on top of the right panel */
 
         div {
             height: 16px;
@@ -44,7 +44,7 @@ limitations under the License.
     h2 {
         font-size: $font-18px;
         font-weight: 600;
-        margin: 18px 0 0 0; // TODO: Use a variable
+        margin: 18px 0 0 0; /* TODO: Use a variable */
     }
 
     .mx_UserInfo_container {
@@ -128,7 +128,7 @@ limitations under the License.
                         align-items: center;
                         justify-content: center;
 
-                        // override the calculated sizes so that the letter isn't HUGE
+                        /* override the calculated sizes so that the letter isn't HUGE */
                         font-size: 6rem !important;
                         width: 100% !important;
                         transition: font-size 0.5s;
@@ -151,7 +151,7 @@ limitations under the License.
     }
 
     p {
-        margin: 5px 0; // TODO: Use a variable
+        margin: 5px 0; /* TODO: Use a variable */
     }
 
     .mx_UserInfo_profile {
@@ -165,8 +165,8 @@ limitations under the License.
             justify-content: center;
 
             span {
-                // limit to 2 lines, show an ellipsis if it overflows
-                // this looks webkit specific but is supported by Firefox 68+
+                /* limit to 2 lines, show an ellipsis if it overflows */
+                /* this looks webkit specific but is supported by Firefox 68+ */
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
                 -webkit-line-clamp: 2;
@@ -177,9 +177,9 @@ limitations under the License.
             }
 
             .mx_E2EIcon {
-                margin-top: 3px; // visual vertical centering to the top line of text. TODO: Use a variable
-                margin-inline-end: $spacing-4; // margin from displayName
-                min-width: 18px; // convince flexbox to not collapse it
+                margin-top: 3px; /* visual vertical centering to the top line of text. TODO: Use a variable */
+                margin-inline-end: $spacing-4; /* margin from displayName */
+                min-width: 18px; /* convince flexbox to not collapse it */
             }
         }
 
@@ -194,13 +194,13 @@ limitations under the License.
             justify-content: center;
             align-items: center;
 
-            margin: 6px 0; // TODO: Use a variable
+            margin: 6px 0; /* TODO: Use a variable */
 
             .mx_UserInfo_roleDescription {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                // try to make it the same height as the dropdown
+                /* try to make it the same height as the dropdown */
                 margin: 11px 0 12px 0;
             }
 
@@ -261,9 +261,9 @@ limitations under the License.
             }
         }
 
-        // both for icon in expand button and device item
+        /* both for icon in expand button and device item */
         .mx_E2EIcon {
-            // don't squeeze
+            /* don't squeeze */
             flex: 0 0 auto;
             margin: 0;
             width: 12px;
@@ -271,9 +271,9 @@ limitations under the License.
         }
 
         .mx_UserInfo_expand {
-            column-gap: 5px; // cf: mx_UserInfo_device_name
+            column-gap: 5px; /* cf: mx_UserInfo_device_name */
             margin-bottom: 11px;
-            align-items: initial; // Cancel the default property
+            align-items: initial; /* Cancel the default property */
         }
     }
 
@@ -287,7 +287,7 @@ limitations under the License.
             .mx_UserInfo_avatar_transition_child {
                 .mx_BaseAvatar {
                     .mx_BaseAvatar_initial {
-                        font-size: 40px !important; // override the other override because here the avatar is smaller
+                        font-size: 40px !important; /* override the other override because here the avatar is smaller */
                     }
                 }
             }
diff --git a/res/css/views/right_panel/_VerificationPanel.pcss b/res/css/views/right_panel/_VerificationPanel.pcss
index 972eb9197f..562f23f342 100644
--- a/res/css/views/right_panel/_VerificationPanel.pcss
+++ b/res/css/views/right_panel/_VerificationPanel.pcss
@@ -16,9 +16,9 @@ limitations under the License.
 
 .mx_VerificationPanel_verified_section,
 .mx_VerificationPanel_reciprocate_section {
-    // center the big shield icon
+    /* center the big shield icon */
     .mx_E2EIcon {
-        // Override general user info margin
+        /* Override general user info margin */
         margin: 20px auto !important;
     }
 }
@@ -65,11 +65,11 @@ limitations under the License.
         border-radius: 4px;
         width: max-content;
         max-width: 100%;
-        // Override general user info margin
+        /* Override general user info margin */
         margin: 0 auto !important;
 
         canvas {
-            // override height and width which are set on the element directly
+            /* override height and width which are set on the element directly */
             height: auto !important;
             width: 100% !important;
             max-width: 240px;
@@ -87,7 +87,7 @@ limitations under the License.
     }
 }
 
-// Special case styling for EncryptionPanel in a Modal dialog
+/* Special case styling for EncryptionPanel in a Modal dialog */
 .mx_Dialog, .mx_CompleteSecurity_body {
     .mx_VerificationPanel_QRPhase_startOptions {
         display: flex;
@@ -140,9 +140,9 @@ limitations under the License.
         }
     }
 
-    // EncryptionPanel when verification is done
+    /* EncryptionPanel when verification is done */
     .mx_VerificationPanel_verified_section {
-        // right align the "Got it" button
+        /* right align the "Got it" button */
         .mx_AccessibleButton {
             float: right;
         }
diff --git a/res/css/views/room_settings/_AliasSettings.pcss b/res/css/views/room_settings/_AliasSettings.pcss
index 3c7cdd803f..a218e29e1d 100644
--- a/res/css/views/room_settings/_AliasSettings.pcss
+++ b/res/css/views/room_settings/_AliasSettings.pcss
@@ -34,7 +34,7 @@ limitations under the License.
         font-weight: 600;
         list-style: none;
 
-        // list-style doesn't do it for webkit
+        /* list-style doesn't do it for webkit */
         &::-webkit-details-marker {
             display: none;
         }
diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss
index 22fe00393a..6795f9e52f 100644
--- a/res/css/views/rooms/_AppsDrawer.pcss
+++ b/res/css/views/rooms/_AppsDrawer.pcss
@@ -16,14 +16,14 @@ limitations under the License.
 */
 
 $MiniAppTileHeight: 200px;
-// TODO this should be 300px but that's too large
+/* TODO this should be 300px but that's too large */
 $MinWidth: 240px;
 
 .mx_AppsDrawer {
     margin: $container-gap-width;
-    // 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.
+    margin-bottom: 0; /* No bottom margin for the correct gap to the CallView below. */
     position: relative;
     display: flex;
     flex-direction: column;
@@ -44,16 +44,16 @@ $MinWidth: 240px;
     .mx_AppsContainer_resizerHandle {
         cursor: ns-resize;
 
-        // Override styles from library, making the whole area the target area
+        /* Override styles from library, making the whole area the target area */
         width: 100% !important;
         height: 100% !important;
 
-        // This is positioned directly below frame
+        /* This is positioned directly below frame */
         position: absolute;
-        bottom: 50% !important; // override from library
+        bottom: 50% !important; /* override from library */
 
-        // We then render the pill handle in an ::after to keep it in the handle's
-        // area without being a massive line across the screen
+        /* We then render the pill handle in an ::after to keep it in the handle's */
+        /* area without being a massive line across the screen */
         &::after {
             content: '';
             position: absolute;
@@ -62,8 +62,8 @@ $MinWidth: 240px;
             height: 4px;
             bottom: 0;
 
-            // Together, these make the bar 64px wide
-            // These are also overridden from the library
+            /* Together, these make the bar 64px wide */
+            /* These are also overridden from the library */
             left: calc(50% - 32px);
             right: calc(50% - 32px);
         }
@@ -81,7 +81,7 @@ $MinWidth: 240px;
             top: 50%;
             transform: translate(0, -50%);
 
-            height: 64px; // to match width of the ones on roomlist
+            height: 64px; /* to match width of the ones on roomlist */
             width: 4px;
             border-radius: 4px;
 
@@ -158,7 +158,7 @@ $MinWidth: 240px;
 }
 
 .mx_AppTileFullWidth {
-    width: 100% !important; // to override the inline style set by the resizer
+    width: 100% !important; /* to override the inline style set by the resizer */
     margin: 0;
     padding: 0;
     border: $container-border-width solid $widget-menu-bar-bg-color;
@@ -377,7 +377,7 @@ $MinWidth: 240px;
     position: relative;
     height: 100%;
 
-    // match bg of border so that the cut corners have the right fill
+    /* match bg of border so that the cut corners have the right fill */
     background-color: $widget-body-bg-color !important;
     border-radius: 8px;
 }
diff --git a/res/css/views/rooms/_BasicMessageComposer.pcss b/res/css/views/rooms/_BasicMessageComposer.pcss
index d480d696f2..cb8158d391 100644
--- a/res/css/views/rooms/_BasicMessageComposer.pcss
+++ b/res/css/views/rooms/_BasicMessageComposer.pcss
@@ -44,8 +44,8 @@ limitations under the License.
         outline: none;
         overflow-x: hidden;
 
-        // Force caret nodes to be selected in full so that they can be
-        // navigated through in a single keypress
+        /* Force caret nodes to be selected in full so that they can be */
+        /* navigated through in a single keypress */
         .caretNode {
             user-select: all;
         }
@@ -56,22 +56,22 @@ limitations under the License.
             span.mx_SpacePill {
                 user-select: all;
                 position: relative;
-                cursor: unset; // We don't want indicate clickability
+                cursor: unset; /* We don't want indicate clickability */
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
 
                 &:hover {
-                    // We don't want indicate clickability | To override the overriding of .markdown-body
+                    /* We don't want indicate clickability | To override the overriding of .markdown-body */
                     background-color: $pill-bg-color !important;
                 }
 
-                // avatar psuedo element
+                /* avatar psuedo element */
                 &::before {
                     display: inline-block;
                     content: var(--avatar-letter);
                     width: $font-16px;
-                    min-width: $font-16px; // ensure the avatar is not compressed
+                    min-width: $font-16px; /* ensure the avatar is not compressed */
                     height: $font-16px;
                     margin-inline-end: 0.24rem;
                     background: var(--avatar-background), $background;
@@ -88,7 +88,7 @@ limitations under the License.
         }
 
         &.mx_BasicMessageComposer_input_disabled {
-            // Ignore all user input to avoid accidentally triggering the composer
+            /* Ignore all user input to avoid accidentally triggering the composer */
             pointer-events: none;
         }
     }
diff --git a/res/css/views/rooms/_E2EIcon.pcss b/res/css/views/rooms/_E2EIcon.pcss
index 46809df00a..a6cbea6246 100644
--- a/res/css/views/rooms/_E2EIcon.pcss
+++ b/res/css/views/rooms/_E2EIcon.pcss
@@ -39,7 +39,7 @@ limitations under the License.
     }
 }
 
-// white infill for the transparency
+/* white infill for the transparency */
 .mx_E2EIcon::before {
     background-color: #ffffff;
     mask-image: url('$(res)/img/e2e/normal.svg');
@@ -48,16 +48,16 @@ limitations under the License.
     mask-size: 80%;
 }
 
-// transparent-looking border surrounding the shield for when overlain over avatars
+/* transparent-looking border surrounding the shield for when overlain over avatars */
 .mx_E2EIcon_bordered {
     mask-image: url('$(res)/img/e2e/normal.svg');
     background-color: $header-panel-bg-color;
 
-    // shrink the actual badge
+    /* shrink the actual badge */
     &::after {
         mask-size: 75%;
     }
-    // shrink the infill of the badge
+    /* shrink the infill of the badge */
     &::before {
         mask-size: 60%;
     }
diff --git a/res/css/views/rooms/_EditMessageComposer.pcss b/res/css/views/rooms/_EditMessageComposer.pcss
index 39feccad58..b684f4f32b 100644
--- a/res/css/views/rooms/_EditMessageComposer.pcss
+++ b/res/css/views/rooms/_EditMessageComposer.pcss
@@ -20,7 +20,7 @@ limitations under the License.
 
     display: flex;
     flex-direction: column;
-    max-width: 100%; // disable overflow
+    max-width: 100%; /* disable overflow */
     width: auto;
     gap: 5px;
     padding: 3px var(--EditMessageComposer-padding-inline);
@@ -33,13 +33,13 @@ limitations under the License.
         padding: 3px 6px;
 
         &:focus {
-            border-color: rgba($accent, 0.5); // Only ever used here
+            border-color: rgba($accent, 0.5); /* Only ever used here */
         }
     }
 
     .mx_EditMessageComposer_buttons {
         display: flex;
-        flex-flow: row wrap-reverse; // display "Save" over "Cancel"
+        flex-flow: row wrap-reverse; /* display "Save" over "Cancel" */
         justify-content: flex-end;
         gap: 5px;
         margin-inline-start: auto;
@@ -47,7 +47,7 @@ limitations under the License.
         .mx_AccessibleButton {
             flex: 1;
             box-sizing: border-box;
-            min-width: 100px; // magic number to align the edge of the button with the input area
+            min-width: 100px; /* magic number to align the edge of the button with the input area */
         }
     }
 }
diff --git a/res/css/views/rooms/_EntityTile.pcss b/res/css/views/rooms/_EntityTile.pcss
index b8d71a4cc0..dd56bb7d1f 100644
--- a/res/css/views/rooms/_EntityTile.pcss
+++ b/res/css/views/rooms/_EntityTile.pcss
@@ -31,13 +31,13 @@ limitations under the License.
 
 .mx_EntityTile:hover {
     padding-right: 30px;
-    position: relative; // to keep the chevron aligned
+    position: relative; /* to keep the chevron aligned */
 }
 
 .mx_EntityTile:hover::before {
     content: "";
     position: absolute;
-    top: calc(50% - 8px); // center
+    top: calc(50% - 8px); /* center */
     right: -8px;
     mask: url('$(res)/img/member_chevron.png');
     mask-repeat: no-repeat;
diff --git a/res/css/views/rooms/_EventBubbleTile.pcss b/res/css/views/rooms/_EventBubbleTile.pcss
index f04b15be28..a49dc395e0 100644
--- a/res/css/views/rooms/_EventBubbleTile.pcss
+++ b/res/css/views/rooms/_EventBubbleTile.pcss
@@ -29,7 +29,7 @@ limitations under the License.
     --cornerRadius: 12px;
     --maxWidth: 70%;
 
-    // For both event tile and event list summary
+    /* For both event tile and event list summary */
     --EventTile_bubble-margin-inline-start: 49px;
     --EventTile_bubble-margin-inline-end: 60px;
 
@@ -48,7 +48,7 @@ limitations under the License.
     font-size: $font-14px;
 
     .mx_MessageTimestamp {
-        width: unset; // Cancel the default width
+        width: unset; /* Cancel the default width */
         max-width: var(--MessageTimestamp-max-width);
     }
 
@@ -102,32 +102,33 @@ limitations under the License.
         --EventBubbleTile_line-max-width: 70%;
 
         width: fit-content;
-        max-width: var(--EventBubbleTile_line-max-width); // Align message bubble and displayName
-        line-height: $font-18px; // fixed line height to prevent emoji from being taller than text
+        max-width: var(--EventBubbleTile_line-max-width); /* Align message bubble and displayName */
+        line-height: $font-18px; /* fixed line height to prevent emoji from being taller than text */
     }
 
-    // other users profile on bubble layout
+    /* other users profile on bubble layout */
     > .mx_DisambiguatedProfile {
-        white-space: normal; // display mxid
+        white-space: normal; /* display mxid */
 
         .mx_DisambiguatedProfile_displayName {
-            white-space: nowrap; // truncate long display names
+            white-space: nowrap; /* truncate long display names */
             margin-inline-end: 5px;
 
-            // For RTL displayName
+            /* For RTL displayName */
             unicode-bidi: embed;
             direction: ltr;
         }
 
         .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"] */
         }
     }
 
-    // inside mx_RoomView_MessageList, outside of mx_ReplyTile
-    // (on the main panel and the chat panel with a maximized widget)
+    /* inside mx_RoomView_MessageList, outside of mx_ReplyTile */
+    /* (on the main panel and the chat panel with a maximized widget) */
     > .mx_DisambiguatedProfile,
-    // inside a thread, outside of mx_ReplyTile
+    /* inside a thread, outside of mx_ReplyTile */
     .mx_EventTile_senderDetails > .mx_DisambiguatedProfile {
         position: relative;
         top: -2px;
@@ -137,11 +138,11 @@ limitations under the License.
 
     .mx_MessageActionBar {
         top: -28px;
-        z-index: 9; // above the avatar
+        z-index: 9; /* above the avatar */
     }
 
     .mx_MediaBody {
-        // leave space for the timestamp
+        /* leave space for the timestamp */
         padding-right: 48px;
     }
 
@@ -185,7 +186,7 @@ limitations under the License.
 
         .mx_MessageActionBar {
             inset-inline-start: calc(100% - var(--MessageActionBar-size-box));
-            right: initial; // Reset the default value
+            right: initial; /* Reset the default value */
         }
 
         .mx_ThreadSummary {
@@ -216,7 +217,7 @@ limitations under the License.
         }
 
         .mx_EventTile_sticker {
-            // align timestamp with those inside bubbles
+            /* align timestamp with those inside bubbles */
             margin-right: 32px;
         }
 
@@ -238,12 +239,12 @@ limitations under the License.
             justify-content: flex-end;
 
             > :last-child {
-                order: -1; // Moving the "add reaction button" before the reactions
+                order: -1; /* Moving the "add reaction button" before the reactions */
             }
         }
 
         .mx_EventTile_avatar {
-            top: -19px; // height of the sender block
+            top: -19px; /* height of the sender block */
             right: -35px;
         }
 
@@ -267,37 +268,37 @@ limitations under the License.
         border-top-left-radius: var(--cornerRadius);
         border-top-right-radius: var(--cornerRadius);
 
-        // the selector here is quite weird because timestamps can appear linked & unlinked and in different places
-        // in the DOM depending on the specific rendering context
-        > a, // timestamp wrapper anchor
+        /* the selector here is quite weird because timestamps can appear linked & unlinked and in different places */
+        /* in the DOM depending on the specific rendering context */
+        > a, /* timestamp wrapper anchor */
         .mx_MessageActionBar + .mx_MessageTimestamp {
             position: absolute;
             padding: 4px 8px;
             bottom: 0;
             right: 0;
-            z-index: 3; // above media and location share maps
+            z-index: 3; /* above media and location share maps */
         }
 
         &.mx_EventTile_mediaLine {
-            // TODO: Use a common class name instead
+            /* TODO: Use a common class name instead */
             .mx_MFileBody,
             .mx_MAudioBody {
-                max-width: 100%; // avoid overflow
+                max-width: 100%; /* avoid overflow */
             }
 
             .mx_MVoiceMessageBody {
-                // allow the event to be collapsed, this causes the waveform to get cropped
+                /* allow the event to be collapsed, this causes the waveform to get cropped */
                 min-width: 0;
             }
 
-            // we put the timestamps for media (other than stickers) atop the media
-            // for images we also apply a linear gradient and change the timestamp colour to aid readability
+            /* we put the timestamps for media (other than stickers) atop the media */
+            /* for images we also apply a linear gradient and change the timestamp colour to aid readability */
             &.mx_EventTile_image {
                 .mx_MessageTimestamp {
-                    color: #ffffff; // regardless of theme, always visible on the below gradient
+                    color: #ffffff; /* regardless of theme, always visible on the below gradient */
                 }
 
-                // linear gradient to make the timestamp more visible
+                /* linear gradient to make the timestamp more visible */
                 .mx_MImageBody::before {
                     content: "";
                     position: absolute;
@@ -313,9 +314,9 @@ limitations under the License.
         }
 
         &.mx_EventTile_sticker {
-            > a, // timestamp wrapper anchor
+            > a, /* timestamp wrapper anchor */
             .mx_MessageActionBar + .mx_MessageTimestamp {
-                // position timestamps for stickers to the right of the un-bubbled sticker
+                /* position timestamps for stickers to the right of the un-bubbled sticker */
                 right: unset;
                 left: 100%;
             }
@@ -334,7 +335,7 @@ limitations under the License.
             }
         }
 
-        //noinspection CssReplaceWithShorthandSafely
+        /* noinspection CssReplaceWithShorthandSafely */
         .mx_MImageBody .mx_MImageBody_thumbnail_container,
         .mx_MVideoBody .mx_MVideoBody_container,
         .mx_MediaBody {
@@ -344,15 +345,16 @@ limitations under the License.
         }
 
         .mx_EventTile_e2eIcon {
-            flex-shrink: 0; // keep it at full size
+            flex-shrink: 0; /* keep it at full size */
         }
     }
 
     &:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
-        // make the top and bottom padding 1px smaller so that we can pad .mx_EventTile_content by 1px
-        // to avoid anti-zalgo cutting off our larger than text emojis.
+        /* make the top and bottom padding 1px smaller so that we can pad
+            .mx_EventTile_content by 1px */
+        /* to avoid anti-zalgo cutting off our larger than text emojis. */
         padding: calc(var(--gutterSize) - 1px);
-        padding-right: 60px; // space for the timestamp
+        padding-right: 60px; /* space for the timestamp */
         background: var(--backgroundColor);
 
         .mx_EventTile_content {
@@ -441,7 +443,7 @@ limitations under the License.
             .mx_EventTile_reply {
                 max-width: 90%;
                 padding: 0;
-                > a, // timestamp wrapper anchor
+                > a, /* timestamp wrapper anchor */
                 .mx_MessageActionBar + .mx_MessageTimestamp {
                     display: none !important;
                 }
@@ -461,11 +463,11 @@ limitations under the License.
     }
 
     .mx_MPollBody {
-        width: 550px; // to prevent timestamp overlapping summary text
-        max-width: 100%; // prevent overflowing a reply tile
+        width: 550px; /* to prevent timestamp overlapping summary text */
+        max-width: 100%; /* prevent overflowing a reply tile */
 
         .mx_MPollBody_totalVotes {
-            // align summary text with corner timestamp
+            /* align summary text with corner timestamp */
             padding: 4px 0;
         }
     }
@@ -490,7 +492,7 @@ limitations under the License.
             .mx_EventTile_keyRequestInfo,
             .mx_ReplyChain_wrapper,
             .mx_ViewSourceEvent {
-                min-width: 0; // Prevent a grid blowout
+                min-width: 0; /* Prevent a grid blowout */
             }
 
             .mx_EventTile_e2eIcon {
@@ -511,9 +513,9 @@ limitations under the License.
         }
 
         &.mx_EventTile_info {
-            // "Unable To Decrypt" layout for hidden events
+            /* "Unable To Decrypt" layout for hidden events */
             .mx_EventTile_line {
-                gap: 0 9px; // 9px: margin value of E2E icon
+                gap: 0 9px; /* 9px: margin value of E2E icon */
                 align-items: center;
                 grid-template:
                     "shield source" auto
@@ -540,14 +542,14 @@ limitations under the License.
     --backgroundColor: transparent;
 
     .mx_EventTile_line.mx_EventTile_emote {
-        padding-right: 60px; // align with bubbles text
+        padding-right: 60px; /* align with bubbles text */
         font-style: italic;
 
-        > a { // timestamp anchor wrapper
+        > a { /* timestamp anchor wrapper */
             align-self: center;
             bottom: unset;
             top: unset;
-            font-style: normal; // undo italic above
+            font-style: normal; /* undo italic above */
         }
 
         .mx_MEmoteBody {
@@ -559,7 +561,7 @@ limitations under the License.
 .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
+        /* hide this timestamp as the tile will render its own */
         display: none;
     }
 }
@@ -575,7 +577,7 @@ limitations under the License.
     .mx_EventTile_line,
     .mx_EventTile_info {
         min-width: 100%;
-        // Preserve alignment with left edge of text in bubbles
+        /* Preserve alignment with left edge of text in bubbles */
         margin: 0;
     }
 }
@@ -590,16 +592,16 @@ limitations under the License.
     .mx_EventTile_avatar {
         position: static;
         order: -1;
-        margin-inline-end: var(--EventTile_bubble_gap-inline); // Same spacing between E2E icon and a hidden event
+        margin-inline-end: var(--EventTile_bubble_gap-inline); /* Same spacing between E2E icon and a hidden event */
     }
 
     .mx_EventTile_e2eIcon {
-        margin-inline-start: 0; // mx_EventTile_avatar has margin-inline-end, so margin is not needed here
+        margin-inline-start: 0; /* mx_EventTile_avatar has margin-inline-end, so margin is not needed here */
         align-self: center;
     }
 
     .mx_EventTile_line {
-        > a, // timestamp wrapper anchor
+        > a, /* timestamp wrapper anchor */
         .mx_MessageActionBar + .mx_MessageTimestamp {
             right: auto;
             left: -77px;
@@ -615,13 +617,13 @@ limitations under the License.
 
 .mx_GenericEventListSummary[data-layout="bubble"] {
     .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
-        // Avoid overflow of event info by cancelling width settings
+        /* Avoid overflow of event info by cancelling width settings */
         width: 100%;
         min-width: 0;
         max-width: 100%;
     }
 
-    // increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
+    /* 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"] {
         margin-top: 20px;
     }
@@ -631,22 +633,22 @@ limitations under the License.
         margin-right: 0;
 
         .mx_MessageActionBar {
-            // 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
+            inset-inline-end: 48px; /* align with that of right-column bubbles */
         }
 
         .mx_ReadReceiptGroup {
-            // match alignment to RRs of chat bubbles
+            /* match alignment to RRs of chat bubbles */
             inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px);
         }
 
         &::before {
-            inset-inline-end: 0; // match alignment of the hover background to that of chat bubbles
+            inset-inline-end: 0; /* match alignment of the hover background to that of chat bubbles */
         }
     }
 }
 
 .mx_EventTile_tileError[data-layout="bubble"] .mx_EventTile_line {
-    flex-direction: column; // restore the centering
+    flex-direction: column; /* restore the centering */
 }
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index cf4828aa7b..f77b4027b8 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -18,7 +18,7 @@ limitations under the License.
 $left-gutter: 64px;
 
 .mx_EventTile {
-    --EventTile_content-margin-inline-end: 34px; // TODO: Use a spacing variable
+    --EventTile_content-margin-inline-end: 34px; /* TODO: Use a spacing variable */
     --EventTile_group_line-spacing-block-start: 1px;
     --EventTile_group_line-spacing-block-end: 3px;
     --EventTile_group_line-spacing-inline-start: $left-gutter;
@@ -68,7 +68,7 @@ $left-gutter: 64px;
 
     .mx_EventTile_content {
         &.mx_EditMessageComposer {
-            // Make sure the formatting bar is visible
+            /* Make sure the formatting bar is visible */
             overflow: visible;
         }
     }
@@ -93,7 +93,7 @@ $left-gutter: 64px;
     .mx_MImageBody {
         .mx_MImageBody_thumbnail_container {
             display: flex;
-            align-items: center; // on every layout
+            align-items: center; /* on every layout */
         }
     }
 
@@ -119,7 +119,7 @@ $left-gutter: 64px;
         }
 
         .mx_EventTile_collapsedCodeBlock {
-            // !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;
         }
     }
@@ -142,7 +142,7 @@ $left-gutter: 64px;
         .mx_EventTile_line {
             margin-right: 0;
             grid-column: 1 / 3;
-            padding: 0 !important; // override default padding of mx_EventTile_line so that we can be centered
+            padding: 0 !important; /* override default padding of mx_EventTile_line so that we can be centered */
         }
 
         .mx_EventTile_msgOption {
@@ -151,7 +151,7 @@ $left-gutter: 64px;
 
         &:hover {
             .mx_EventTile_line {
-                // To avoid bubble events being highlighted
+                /* To avoid bubble events being highlighted */
                 background-color: inherit !important;
             }
         }
@@ -163,7 +163,7 @@ $left-gutter: 64px;
 
     &[data-layout="irc"],
     &[data-layout="group"] {
-        // TODO: adjust the values for IRC layout
+        /* 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 {
@@ -220,11 +220,11 @@ $left-gutter: 64px;
             }
         }
 
-        // this is used for the tile for the event which is selected via the URL.
+        /* this is used for the tile for the event which is selected via the URL. */
         &.mx_EventTile_isEditing,
         &.mx_EventTile_selected {
             > .mx_EventTile_line {
-                // TODO: ultimately we probably want some transition on here.
+                /* 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;
@@ -278,7 +278,7 @@ $left-gutter: 64px;
 
         .mx_EventTile_msgOption {
             .mx_ReadReceiptGroup {
-                inset-block-start: -0.3rem; // ($irc-line-height - avatar height) / 2
+                inset-block-start: -0.3rem; /* ($irc-line-height - avatar height) / 2 */
             }
         }
 
@@ -296,12 +296,12 @@ $left-gutter: 64px;
         }
 
         .mx_ReplyTile .mx_EventTileBubble {
-            left: unset; // Cancel the value specified above for the tile inside ReplyTile
+            left: unset; /* Cancel the value specified above for the tile inside ReplyTile */
         }
 
         &.mx_EventTile_isEditing > .mx_EventTile_line {
             .mx_EditMessageComposer {
-                // add space for the stroke on box-shadow
+                /* add space for the stroke on box-shadow */
                 padding-inline-start: calc($selected-message-border-width + var(--EditMessageComposer-padding-inline));
             }
         }
@@ -342,9 +342,9 @@ $left-gutter: 64px;
             margin-inline-end: 10px;
 
             .mx_ReadReceiptGroup {
-                // This aligns the avatar with the last line of the
-                // message. We want to move it one line up
-                // See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss
+                /* This aligns the avatar with the last line of the */
+                /* message. We want to move it one line up */
+                /* See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss */
                 inset-block-start: calc(-$font-22px - 3px);
             }
         }
@@ -376,7 +376,7 @@ $left-gutter: 64px;
         }
 
         .mx_RoomView_timeline_rr_enabled & {
-            $inline-end-margin: 80px; // TODO: Use a spacing variable
+            $inline-end-margin: 80px; /* TODO: Use a spacing variable */
 
             .mx_ThreadSummary,
             .mx_ThreadSummary_icon,
@@ -386,12 +386,12 @@ $left-gutter: 64px;
             }
 
             .mx_ThreadSummary {
-                // 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 {
@@ -417,7 +417,7 @@ $left-gutter: 64px;
 
             .mx_EventTile_line {
                 padding-block: $spacing-block-start $spacing-block-end;
-                // 20px: avatar area
+                /* 20px: avatar area */
                 padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
 
                 .mx_MessageTimestamp {
@@ -441,16 +441,16 @@ $left-gutter: 64px;
                 position: absolute;
                 inset-block-start: auto;
 
-                // as close to right gutter without clipping as possible
+                /* as close to right gutter without clipping as possible */
                 inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end));
 
-                // (EventTileLine.line-height - ReadReceiptGroup.height) / 2
-                // this centers the ReadReceiptGroup if we’ve got a single line
+                /* (EventTileLine.line-height - ReadReceiptGroup.height) / 2 */
+                /* this centers the ReadReceiptGroup if we’ve got a single line */
                 inset-block-end: calc(($font-18px - 24px) / 2);
             }
         }
         .mx_EventTileBubble {
-            // Timestamps are inside the tile, so the width can be less constrained
+            /* Timestamps are inside the tile, so the width can be less constrained */
             max-width: 600px;
         }
 
@@ -476,22 +476,22 @@ $left-gutter: 64px;
     &[data-layout="irc"],
     &[data-layout="group"] {
         .mx_EventTile_line .mx_RedactedBody {
-            line-height: 1; // remove spacing between lines
+            line-height: 1; /* remove spacing between lines */
         }
     }
 
     &[data-layout="irc"] {
         .mx_EventTile_line .mx_RedactedBody {
-            padding-left: 24px; // 25px - 1px
+            padding-left: 24px; /* 25px - 1px */
 
             &::before {
                 left: var(--right-padding);
             }
         }
 
-        // Apply only collapsed events block
+        /* Apply only collapsed events block */
         > .mx_EventTile_line {
-            // 15 px of padding
+            /* 15 px of padding */
             /* stylelint-disable-next-line declaration-colon-space-after */
             padding-left:
                 calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding));
@@ -504,7 +504,7 @@ $left-gutter: 64px;
         }
 
         .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
-            padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+            padding-left: calc($left-gutter + 20px); /* override padding-left $left-gutter */
         }
     }
 }
@@ -538,7 +538,7 @@ $left-gutter: 64px;
         font-family: inherit !important;
         white-space: normal !important;
         line-height: inherit !important;
-        color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
+        color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */
         font-size: $font-14px;
 
         pre,
@@ -548,13 +548,13 @@ $left-gutter: 64px;
         }
 
         code {
-            white-space: pre-wrap; // don't collapse spaces in inline code blocks
+            white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
         }
 
         pre {
-            // have to use overlay rather than auto otherwise Linux and Windows
-            // Chrome gets very confused about vertical spacing:
-            // https://github.com/vector-im/vector-web/issues/754
+            /* have to use overlay rather than auto otherwise Linux and Windows */
+            /* Chrome gets very confused about vertical spacing: */
+            /* https://github.com/vector-im/vector-web/issues/754 */
             overflow-x: overlay;
             overflow-y: visible;
 
@@ -563,7 +563,7 @@ $left-gutter: 64px;
             }
 
             code {
-                white-space: pre; // we want code blocks to be scrollable and not wrap
+                white-space: pre; /* we want code blocks to be scrollable and not wrap */
 
                 > * {
                     display: inline;
@@ -585,7 +585,7 @@ $left-gutter: 64px;
         h1,
         h2 {
             font-size: 1.5em;
-            border-bottom: none !important; // override GFM
+            border-bottom: none !important; /* override GFM */
         }
 
         a {
@@ -696,7 +696,7 @@ $left-gutter: 64px;
         }
     }
 
-    // selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity
+    /* selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity */
     &.markdown-body img {
         object-fit: contain;
         object-position: left top;
@@ -711,7 +711,7 @@ $left-gutter: 64px;
     }
 
     .mx_EventTile_pre_container {
-        // For correct positioning of _copyButton (See TextualBody)
+        /* For correct positioning of _copyButton (See TextualBody) */
         position: relative;
 
         &:focus-within,
@@ -725,7 +725,7 @@ $left-gutter: 64px;
             max-height: 30vh;
         }
 
-        // Inserted adjacent to <pre> blocks, (See TextualBody)
+        /* Inserted adjacent to <pre> blocks, (See TextualBody) */
         .mx_EventTile_button {
             position: absolute;
             top: $spacing-8;
@@ -819,7 +819,7 @@ $left-gutter: 64px;
     color: red;
     text-align: center;
 
-    // Remove some of the default tile padding so that the error is centered
+    /* Remove some of the default tile padding so that the error is centered */
     margin-right: 0;
 
     .mx_EventTile_line {
@@ -843,10 +843,10 @@ $left-gutter: 64px;
     visibility: visible;
 }
 
-// Inverse of the above to *disable* the animation on any indicators. This approach
-// 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.
+/* Inverse of the above to *disable* the animation on any indicators. This approach */
+/* 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 {
         animation: none;
@@ -859,9 +859,9 @@ $left-gutter: 64px;
     $borderRadius: 8px;
     $padding: $spacing-8;
     $hrHeight: 1px;
-    $notification-dot-size: 8px; // notification dot next to the timestamp
+    $notification-dot-size: 8px; /* notification dot next to the timestamp */
 
-    margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); // include the height of horizontal line
+    margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); /* include the height of horizontal line */
     padding: $padding $spacing-24 $padding $padding;
     border-radius: $borderRadius;
 
@@ -878,22 +878,22 @@ $left-gutter: 64px;
     &::after {
         $inset-block-start: auto;
         $inset-inline-end: calc(32px - $padding);
-        $inset-block-end: calc(-1 * var(--topOffset) - $hrHeight); // exclude the height of horizontal line
+        $inset-block-end: calc(-1 * var(--topOffset) - $hrHeight); /* exclude the height of horizontal line */
         $inset-inline-start: calc(var(--leftOffset) + $padding);
         inset: $inset-block-start $inset-inline-end $inset-block-end $inset-inline-start;
 
         height: $hrHeight;
         background-color: $quinary-content;
-        pointer-events: none; // disable the message action bar on hover
+        pointer-events: none; /* disable the message action bar on hover */
     }
 
     &::before {
         inset: 0;
     }
 
-    // Display notification dot
+    /* Display notification dot */
     &[data-notification]::before {
-        $notification-inset-block-start: 14px; // 14px: align the dot with the timestamp row
+        $notification-inset-block-start: 14px; /* 14px: align the dot with the timestamp row */
 
         width: $notification-dot-size;
         height: $notification-dot-size;
@@ -965,7 +965,7 @@ $left-gutter: 64px;
             .mx_ThreadPanel_replies_amount {
                 @mixin ThreadRepliesAmount;
                 line-height: var(--EventTile_ThreadSummary-line-height);
-                font-size: $font-12px; // Same font size as the counter on the main panel
+                font-size: $font-12px; /* Same font size as the counter on the main panel */
             }
 
             .mx_ThreadSummary_content {
@@ -991,19 +991,19 @@ $left-gutter: 64px;
         background-color: $system;
     }
 
-    // ThreadsList has always group layout
+    /* ThreadsList has always group layout */
     &[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
+            background-color: $system; /* override $event-selected-color */
+            box-shadow: none; /* don't show the verification left stroke in the thread list */
         }
     }
 }
 
-// For style rules of ThreadView, see _ThreadPanel.pcss
+/* 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
+    --ThreadView_group_spacing-start: 56px; /* 56px: 64px - 8px (padding) */
+    --ThreadView_group_spacing-end: 8px; /* same as padding */
 
     .mx_EventTile {
         display: flex;
@@ -1019,26 +1019,27 @@ $left-gutter: 64px;
 
         .mx_EventTile_line,
         .mx_ReactionsRow {
-            padding-inline-start: 0; // Cancel inherited padding value for event message and reactions row
+            padding-inline-start: 0; /* Cancel inherited padding value for event message and reactions row */
         }
 
         .mx_ReactionsRow {
             padding-inline-end: 0;
         }
 
-        // handling for hidden events (e.g reactions) in the thread view
+        /* handling for hidden events (e.g reactions) in the thread view */
         &.mx_EventTile_info {
             .mx_EventTile_avatar {
                 position: absolute;
-                top: 1.5px; // Align with hidden event content
+                top: 1.5px; /* Align with hidden event content */
                 margin-top: 0;
                 margin-bottom: 0;
-                width: 14px; // avatar img size
-                height: 14px; // avatar img size
+                width: 14px; /* avatar img size */
+                height: 14px; /* avatar img size */
             }
 
             .mx_ViewSourceEvent_toggle {
-                display: none; // hide the hidden event expand button, not enough space, view source can still be used
+                display: none; /* hide the hidden event expand button, not enough
+                space, view source can still be used */
             }
 
             &.mx_EventTile_selected .mx_EventTile_line,
@@ -1051,7 +1052,7 @@ $left-gutter: 64px;
                 .mx_EventTile_content,
                 .mx_RedactedBody {
                     width: auto;
-                    // 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;
                 }
@@ -1062,12 +1063,12 @@ $left-gutter: 64px;
                 padding-top: 0;
 
                 .mx_EventTile_avatar {
-                    left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text
-                    z-index: 9; // position above the hover styling
+                    left: calc($MessageTimestamp_width + 14px - 4px); /* 14px: avatar width, 4px: align with text */
+                    z-index: 9; /* position above the hover styling */
                 }
 
                 .mx_MessageTimestamp {
-                    top: 2px; // Align with avatar
+                    top: 2px; /* Align with avatar */
                 }
             }
 
@@ -1085,7 +1086,7 @@ $left-gutter: 64px;
             .mx_EventTile_line {
                 .mx_EventTile_content {
                     &.mx_EditMessageComposer {
-                        padding-inline-start: 0; // align start of first letter with that of the event body
+                        padding-inline-start: 0; /* align start of first letter with that of the event body */
                     }
                 }
             }
@@ -1115,29 +1116,29 @@ $left-gutter: 64px;
 
             .mx_ReplyChain_wrapper {
                 .mx_MLocationBody,
-                .mx_UnknownBody { // Error message inside ReplyTile
+                .mx_UnknownBody { /* Error message inside ReplyTile */
                     margin-inline: unset;
                 }
             }
 
             .mx_EventTile_mediaLine {
-                // such as MImageBody
+                /* such as MImageBody */
                 > div,
                 > span {
                     margin-inline-start: var(--ThreadView_group_spacing-start);
                     margin-inline-end: var(--ThreadView_group_spacing-end);
                 }
 
-                // such as MAudioBody and MFileBody
+                /* such as MAudioBody and MFileBody */
                 > span {
-                    display: block; // Apply the margin declarations to span element
+                    display: block; /* Apply the margin declarations to span element */
                 }
             }
 
             .mx_EventTile_senderDetails {
                 display: flex;
                 align-items: center;
-                gap: $spacing-16; // gap between the avatar and the sender ID
+                gap: $spacing-16; /* gap between the avatar and the sender ID */
                 padding-inline-start: $spacing-8;
 
                 a {
@@ -1155,8 +1156,8 @@ $left-gutter: 64px;
             }
 
             .mx_MessageTimestamp {
-                position: absolute; // for IRC layout
-                top: 2px; // Align with mx_EventTile_content
+                position: absolute; /* for IRC layout */
+                top: 2px; /* Align with mx_EventTile_content */
             }
 
             &:hover {
@@ -1173,11 +1174,11 @@ $left-gutter: 64px;
 
             &::before {
                 inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
-                z-index: auto; // enable background color on hover
+                z-index: auto; /* enable background color on hover */
             }
 
             .mx_ReactionsRow {
-                position: relative; // display on hover
+                position: relative; /* display on hover */
             }
 
             .mx_EventTile_line.mx_EventTile_mediaLine {
@@ -1190,7 +1191,7 @@ $left-gutter: 64px;
                 align-items: flex-end;
 
                 .mx_EventTile_line.mx_EventTile_mediaLine {
-                    margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; // align with normal messages
+                    margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; /* align with normal messages */
                 }
             }
         }
@@ -1200,17 +1201,17 @@ $left-gutter: 64px;
         &[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
+                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 */
             }
         }
     }
 }
 
-// Cascading - compact modern layout on the main timeline and the right panel
+/* Cascading - compact modern layout on the main timeline and the right panel */
 .mx_MatrixChat_useCompactLayout {
     .mx_EventTile {
-        // Override :not([data-layout="bubble"])
+        /* Override :not([data-layout="bubble"]) */
         &[data-layout="group"] {
             --MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
             --MatrixChat_useCompactLayout-top-avatar: 2px;
@@ -1225,7 +1226,7 @@ $left-gutter: 64px;
             }
 
             &.mx_EventTile_info {
-                padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
+                padding-top: 0; /* same as the padding for non-compact .mx_EventTile.mx_EventTile_info */
                 font-size: $font-13px;
 
                 .mx_EventTile_e2eIcon,
@@ -1241,7 +1242,7 @@ $left-gutter: 64px;
             }
 
             &.mx_EventTile_emote {
-                padding-top: $spacing-8; // add a bit more space for emotes so that avatars don't collide
+                padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */
 
                 .mx_EventTile_avatar {
                     top: var(--MatrixChat_useCompactLayout-top-avatar);
@@ -1260,7 +1261,7 @@ $left-gutter: 64px;
                 }
             }
 
-            // Cascading - apply zero padding to every element including mx_EventTile_emote
+            /* Cascading - apply zero padding to every element including mx_EventTile_emote */
             &.mx_EventTile_continuation {
                 padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block);
             }
@@ -1279,8 +1280,8 @@ $left-gutter: 64px;
 
             .mx_EventTile_msgOption {
                 .mx_ReadReceiptGroup {
-                    // This aligns the avatar with the last line of the
-                    // message. We want to move it one line up - 2rem
+                    /* This aligns the avatar with the last line of the */
+                    /* message. We want to move it one line up - 2rem */
                     inset-block-start: -2rem;
                 }
             }
@@ -1293,7 +1294,7 @@ $left-gutter: 64px;
                 blockquote,
                 pre,
                 table {
-                    margin-bottom: $spacing-4; // 1/4 of the non-compact margin-bottom
+                    margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */
                 }
             }
         }
@@ -1306,7 +1307,7 @@ $left-gutter: 64px;
     }
 }
 
-// Media query for mobile UI
+/* Media query for mobile UI */
 @media only screen and (max-width: 480px) {
     .mx_EventTile_content {
         margin-right: 0;
diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss
index 6d0a97df1f..65ee7d371e 100644
--- a/res/css/views/rooms/_IRCLayout.pcss
+++ b/res/css/views/rooms/_IRCLayout.pcss
@@ -26,7 +26,7 @@ $irc-line-height: $font-18px;
     .mx_EventTile {
         --EventTile_irc_line-padding-block: 1px;
 
-        // timestamps are links which shouldn't be underlined
+        /* timestamps are links which shouldn't be underlined */
         > a {
             text-decoration: none;
             min-width: $MessageTimestamp_width;
@@ -64,7 +64,7 @@ $irc-line-height: $font-18px;
             display: flex;
             align-items: center;
 
-            // Need to use important to override the js provided height and width values.
+            /* Need to use important to override the js provided height and width values. */
             > .mx_BaseAvatar, > .mx_BaseAvatar > * {
                 height: $font-14px !important;
                 width: $font-14px !important;
@@ -75,7 +75,7 @@ $irc-line-height: $font-18px;
 
         .mx_DisambiguatedProfile {
             width: var(--name-width);
-            margin-inline-end: 0; // override mx_EventTile > *
+            margin-inline-end: 0; /* override mx_EventTile > * */
             order: 2;
             flex-shrink: 0;
 
@@ -88,7 +88,7 @@ $irc-line-height: $font-18px;
 
             > .mx_DisambiguatedProfile_mxid {
                 visibility: collapse;
-                // Override the inherited margin.
+                /* Override the inherited margin. */
                 margin-left: 0;
                 padding: 0 5px;
             }
@@ -130,13 +130,14 @@ $irc-line-height: $font-18px;
             .mx_ViewSourceEvent,
             .mx_MTextBody {
                 display: inline-block;
-                // add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo
+                /* add a 1px padding top and bottom because our larger
+                emoji font otherwise gets cropped by anti-zalgo */
                 padding: var(--EventTile_irc_line-padding-block) 0;
             }
 
             .mx_ReplyTile {
                 .mx_MTextBody {
-                    display: -webkit-box; // Enable -webkit-line-clamp
+                    display: -webkit-box; /* Enable -webkit-line-clamp */
                 }
             }
         }
@@ -161,13 +162,13 @@ $irc-line-height: $font-18px;
     }
 
     .mx_EventTile.mx_EventTile_info {
-        .mx_ViewSourceEvent, // For hidden events
+        .mx_ViewSourceEvent, /* For hidden events */
         .mx_TextualEvent {
             line-height: $irc-line-height;
         }
     }
 
-    // Suppress highlight thing from the normal Layout.
+    /* Suppress highlight thing from the normal Layout. */
     .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
     .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
     .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
diff --git a/res/css/views/rooms/_JumpToBottomButton.pcss b/res/css/views/rooms/_JumpToBottomButton.pcss
index 7c85f51182..3530d36690 100644
--- a/res/css/views/rooms/_JumpToBottomButton.pcss
+++ b/res/css/views/rooms/_JumpToBottomButton.pcss
@@ -19,12 +19,12 @@ limitations under the License.
 .mx_JumpToBottomButton {
     z-index: 1000;
     position: absolute;
-    // 12 because height is 50 but button is only 38 = 12+(50-38) = 24
+    /* 12 because height is 50 but button is only 38 = 12+(50-38) = 24 */
     bottom: 12px;
     right: 24px;
     width: 38px;
-    // give it a fixed height so the badge doesn't make
-    // it taller and pop upwards when visible
+    /* give it a fixed height so the badge doesn't make */
+    /* it taller and pop upwards when visible */
     height: 50px;
     text-align: center;
 }
@@ -37,8 +37,8 @@ limitations under the License.
     font-size: $font-12px;
     line-height: $font-14px;
     text-align: center;
-    // to be able to get it centered
-    // with text-align in parent
+    /* to be able to get it centered */
+    /* with text-align in parent */
     display: inline-block;
     padding: 0 4px;
     color: $accent-fg-color;
diff --git a/res/css/views/rooms/_LinkPreviewWidget.pcss b/res/css/views/rooms/_LinkPreviewWidget.pcss
index e274994a53..ceb715275d 100644
--- a/res/css/views/rooms/_LinkPreviewWidget.pcss
+++ b/res/css/views/rooms/_LinkPreviewWidget.pcss
@@ -27,7 +27,7 @@ limitations under the License.
         margin-bottom: 6px;
     }
 
-    // Exclude mx_LinkPreviewGroup_hide from wrapping
+    /* Exclude mx_LinkPreviewGroup_hide from wrapping */
     .mx_LinkPreviewWidget_wrapImageCaption {
         display: flex;
         flex-wrap: wrap;
@@ -36,7 +36,7 @@ limitations under the License.
         .mx_LinkPreviewWidget_image,
         .mx_LinkPreviewWidget_caption {
             margin-inline-start: $spacing-16;
-            min-width: 0; // Prevent blowout
+            min-width: 0; /* Prevent blowout */
         }
 
         .mx_LinkPreviewWidget_image {
@@ -47,7 +47,7 @@ limitations under the License.
 
         .mx_LinkPreviewWidget_caption {
             flex: 1;
-            overflow: hidden; // cause it to wrap rather than clip
+            overflow: hidden; /* cause it to wrap rather than clip */
         }
 
         .mx_LinkPreviewWidget_title,
diff --git a/res/css/views/rooms/_MemberList.pcss b/res/css/views/rooms/_MemberList.pcss
index 05b9019b65..7ad710767f 100644
--- a/res/css/views/rooms/_MemberList.pcss
+++ b/res/css/views/rooms/_MemberList.pcss
@@ -44,8 +44,8 @@ limitations under the License.
     }
 
     .mx_RightPanel_scopeHeader {
-        // vertically align with position on other right panel cards
-        // to prevent it bouncing as user navigates right panel
+        /* vertically align with position on other right panel cards */
+        /* to prevent it bouncing as user navigates right panel */
         margin-top: -8px;
     }
 }
@@ -66,7 +66,7 @@ limitations under the License.
 .mx_MemberList_query {
     height: 16px;
 
-    // stricter rule to override the one in _common.pcss
+    /* stricter rule to override the one in _common.pcss */
     &[type="text"] {
         font-size: $font-12px;
     }
diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss
index 9619bad3fe..75f1487156 100644
--- a/res/css/views/rooms/_MessageComposer.pcss
+++ b/res/css/views/rooms/_MessageComposer.pcss
@@ -75,8 +75,8 @@ limitations under the License.
 .mx_MessageComposer_e2eIcon.mx_E2EIcon {
     position: absolute;
     left: 20px;
-    margin-right: 0; // Counteract the E2EIcon class
-    margin-left: 3px; // Counteract the E2EIcon class
+    margin-right: 0; /* Counteract the E2EIcon class */
+    margin-left: 3px; /* Counteract the E2EIcon class */
     width: 12px;
     height: 12px;
 }
@@ -119,8 +119,8 @@ limitations under the License.
     word-break: break-word;
 }
 
-// FIXME: rather unpleasant hack to get rid of <p/> margins.
-// really we should be mixing in markdown-body from gfm.css instead
+/* FIXME: rather unpleasant hack to get rid of <p/> margins. */
+/* really we should be mixing in markdown-body from gfm.css instead */
 .mx_MessageComposer_editor > :first-child {
     margin-top: 0 !important;
 }
@@ -172,7 +172,7 @@ limitations under the License.
 
 .mx_MessageComposer_button_highlight {
     background: rgba($accent, 0.25);
-    // make the icon the accent color too
+    /* make the icon the accent color too */
     &::before {
         background-color: $accent !important;
     }
diff --git a/res/css/views/rooms/_MessageComposerFormatBar.pcss b/res/css/views/rooms/_MessageComposerFormatBar.pcss
index c1984fb7c5..1c1bd9caf3 100644
--- a/res/css/views/rooms/_MessageComposerFormatBar.pcss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.pcss
@@ -24,8 +24,8 @@ limitations under the License.
     background-color: $background;
     border: 1px solid $input-border-color;
     user-select: none;
-    // equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000)
-    // but as it appears after them in the DOM, will appear on top.
+    /* equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000) */
+    /* but as it appears after them in the DOM, will appear on top. */
     z-index: 1000;
 
     &.mx_MessageComposerFormatBar_shown {
diff --git a/res/css/views/rooms/_NotificationBadge.pcss b/res/css/views/rooms/_NotificationBadge.pcss
index 1c9b380bf5..4afa320dd9 100644
--- a/res/css/views/rooms/_NotificationBadge.pcss
+++ b/res/css/views/rooms/_NotificationBadge.pcss
@@ -19,29 +19,29 @@ limitations under the License.
         display: none;
     }
 
-    // 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.
+    /* 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. */
 
     &.mx_NotificationBadge_visible {
         background-color: $roomtile-default-badge-bg-color;
 
-        // Create a flexbox to order the count a bit easier
+        /* Create a flexbox to order the count a bit easier */
         display: flex;
         align-items: center;
         justify-content: center;
 
         &.mx_NotificationBadge_highlighted {
-            // TODO: Use a more specific variable
+            /* TODO: Use a more specific variable */
             background-color: $alert;
         }
 
-        // These are the 3 background types
+        /* These are the 3 background types */
 
         &.mx_NotificationBadge_dot {
-            background-color: $primary-content; // increased visibility
+            background-color: $primary-content; /* increased visibility */
 
             width: 6px;
             height: 6px;
@@ -60,12 +60,12 @@ limitations under the License.
             border-radius: $font-16px;
         }
 
-        // The following is the floating badge
+        /* The following is the floating badge */
 
         .mx_NotificationBadge_count {
             font-size: $font-10px;
             line-height: $font-14px;
-            color: #fff; // TODO: Variable
+            color: #fff; /* TODO: Variable */
         }
     }
 }
diff --git a/res/css/views/rooms/_PinnedEventTile.pcss b/res/css/views/rooms/_PinnedEventTile.pcss
index add7a78104..6b981a5e45 100644
--- a/res/css/views/rooms/_PinnedEventTile.pcss
+++ b/res/css/views/rooms/_PinnedEventTile.pcss
@@ -39,7 +39,7 @@ limitations under the License.
     .mx_PinnedEventTile_unpinButton,
     .mx_PinnedEventTile_message,
     .mx_PinnedEventTile_footer {
-        min-width: 0; // Prevent a grid blowout
+        min-width: 0; /* Prevent a grid blowout */
     }
 
     .mx_PinnedEventTile_senderAvatar {
@@ -93,7 +93,7 @@ limitations under the License.
         .mx_PinnedEventTile_timestamp {
             color: $secondary-content;
             display: unset;
-            width: unset; // Cancel the default width value
+            width: unset; /* Cancel the default width value */
         }
 
         .mx_AccessibleButton_kind_link {
diff --git a/res/css/views/rooms/_ReadReceiptGroup.pcss b/res/css/views/rooms/_ReadReceiptGroup.pcss
index 87932cb993..a0534381bd 100644
--- a/res/css/views/rooms/_ReadReceiptGroup.pcss
+++ b/res/css/views/rooms/_ReadReceiptGroup.pcss
@@ -89,7 +89,7 @@ limitations under the License.
         line-height: 15px;
         margin: 16px 16px 8px;
         font-weight: 600;
-        // shouldn’t be actually focusable
+        /* shouldn’t be actually focusable */
         outline: none;
     }
 
diff --git a/res/css/views/rooms/_ReplyPreview.pcss b/res/css/views/rooms/_ReplyPreview.pcss
index 50abcc738b..a5e7804302 100644
--- a/res/css/views/rooms/_ReplyPreview.pcss
+++ b/res/css/views/rooms/_ReplyPreview.pcss
@@ -54,8 +54,8 @@ limitations under the License.
 
 .mx_RoomView_body {
     .mx_ReplyPreview {
-        // Add box-shadow to the reply preview on the main (left) panel only.
-        // It is not added to the preview on the (right) panel for threads and a chat with a maximized widget.
+        /* Add box-shadow to the reply preview on the main (left) panel only. */
+        /* It is not added to the preview on the (right) panel for threads and a chat with a maximized widget. */
         box-shadow: 0px -16px 32px $composer-shadow-color;
         border-radius: 8px 8px 0 0;
     }
diff --git a/res/css/views/rooms/_ReplyTile.pcss b/res/css/views/rooms/_ReplyTile.pcss
index ddc2f4f8aa..76c524abfd 100644
--- a/res/css/views/rooms/_ReplyTile.pcss
+++ b/res/css/views/rooms/_ReplyTile.pcss
@@ -56,7 +56,7 @@ limitations under the License.
         }
     }
 
-    // We do reply size limiting with CSS to avoid duplicating the TextualBody component.
+    /* We do reply size limiting with CSS to avoid duplicating the TextualBody component. */
     .mx_EventTile_content {
         $reply-lines: 2;
 
@@ -66,16 +66,16 @@ limitations under the License.
         -webkit-line-clamp: $reply-lines;
 
         .mx_EventTile_body.mx_EventTile_bigEmoji {
-            line-height: $font-22px !important; // Same as var(--EventTile_group_line-line-height)
-            font-size: $font-14px !important; // Override the big emoji override
+            line-height: $font-22px !important; /* Same as var(--EventTile_group_line-line-height) */
+            font-size: $font-14px !important; /* Override the big emoji override */
         }
 
-        // Hide line numbers
+        /* Hide line numbers */
         .mx_EventTile_lineNumbers {
             display: none;
         }
 
-        // Hack to cut content in <pre> tags too
+        /* Hack to cut content in <pre> tags too */
         .mx_EventTile_pre_container > pre {
             overflow-x: scroll;
             overflow-y: hidden;
diff --git a/res/css/views/rooms/_RoomBreadcrumbs.pcss b/res/css/views/rooms/_RoomBreadcrumbs.pcss
index c4b8efb5ab..531d9b1271 100644
--- a/res/css/views/rooms/_RoomBreadcrumbs.pcss
+++ b/res/css/views/rooms/_RoomBreadcrumbs.pcss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_RoomBreadcrumbs {
     width: 100%;
 
-    // Create a flexbox for the crumbs
+    /* Create a flexbox for the crumbs */
     display: flex;
     flex-direction: row;
     align-items: flex-start;
@@ -28,25 +28,25 @@ limitations under the License.
         width: 32px;
     }
 
-    // These classes come from the CSSTransition component. There's many more classes we
-    // could care about, but this is all we worried about for now. The animation works by
-    // first triggering the enter state with the newest breadcrumb off screen (-40px) then
-    // sliding it into view.
+    /* These classes come from the CSSTransition component. There's many more classes we */
+    /* could care about, but this is all we worried about for now. The animation works by */
+    /* first triggering the enter state with the newest breadcrumb off screen (-40px) then */
+    /* sliding it into view. */
     &.mx_RoomBreadcrumbs-enter {
-        transform: translateX(-40px); // 32px for the avatar, 8px for the margin
+        transform: translateX(-40px); /* 32px for the avatar, 8px for the margin */
     }
     &.mx_RoomBreadcrumbs-enter-active {
         transform: translateX(0);
 
-        // Timing function is as-requested by design.
-        // NOTE: The transition time MUST match the value passed to CSSTransition!
+        /* Timing function is as-requested by design. */
+        /* NOTE: The transition time MUST match the value passed to CSSTransition! */
         transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
     }
 
     .mx_RoomBreadcrumbs_placeholder {
         font-weight: 600;
         font-size: $font-14px;
-        line-height: 32px; // specifically to match the height this is not scaled
+        line-height: 32px; /* specifically to match the height this is not scaled */
         height: 32px;
     }
 }
diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
index dc2817ee68..48e3f04be6 100644
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@@ -161,18 +161,18 @@ limitations under the License.
     max-height: calc($lineHeight * $lines);
     border-bottom: 1px solid transparent;
 
-    // to align baseline of topic with room name
+    /* to align baseline of topic with room name */
     margin: 4px 7px 0;
 
     overflow: hidden;
-    -webkit-line-clamp: $lines; // See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp
+    -webkit-line-clamp: $lines; /* See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp */
     -webkit-box-orient: vertical;
     display: -webkit-box;
 }
 
 .mx_RoomHeader_topic .mx_Emoji {
-    // Undo font size increase to prevent vertical cropping and ensure the same size
-    // as in plain text emojis
+    /* Undo font size increase to prevent vertical cropping and ensure the same size */
+    /* as in plain text emojis */
     font-size: inherit;
 }
 
@@ -198,8 +198,8 @@ limitations under the License.
     &::before {
         content: '';
         position: absolute;
-        top: 4px; // center with parent of 32px
-        left: 4px; // center with parent of 32px
+        top: 4px; /* center with parent of 32px */
+        left: 4px; /* center with parent of 32px */
         height: 24px;
         width: 24px;
         background-color: $icon-button-color;
@@ -240,8 +240,8 @@ limitations under the License.
 .mx_RoomHeader_voiceCallButton::before {
     mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
 
-    // The call button SVG is padded slightly differently, so match it up to the size
-    // of the other icons
+    /* The call button SVG is padded slightly differently, so match it up to the size */
+    /* of the other icons */
     mask-size: 20px;
     mask-position: center;
 }
diff --git a/res/css/views/rooms/_RoomInfoLine.pcss b/res/css/views/rooms/_RoomInfoLine.pcss
index 5c0aea7c0b..9af2a364fb 100644
--- a/res/css/views/rooms/_RoomInfoLine.pcss
+++ b/res/css/views/rooms/_RoomInfoLine.pcss
@@ -51,7 +51,7 @@ limitations under the License.
         color: inherit;
 
         &::before {
-            content: "·"; // visual separator
+            content: "·"; /* visual separator */
             margin: 0 6px;
         }
     }
diff --git a/res/css/views/rooms/_RoomList.pcss b/res/css/views/rooms/_RoomList.pcss
index bbac00e0e6..37c3dd3a48 100644
--- a/res/css/views/rooms/_RoomList.pcss
+++ b/res/css/views/rooms/_RoomList.pcss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_RoomList {
-    padding-right: 7px; // width of the scrollbar, to line things up
+    padding-right: 7px; /* width of the scrollbar, to line things up */
 }
 
 .mx_RoomList_iconPlus::before {
diff --git a/res/css/views/rooms/_RoomPreviewBar.pcss b/res/css/views/rooms/_RoomPreviewBar.pcss
index 81188f336f..bccdf426dc 100644
--- a/res/css/views/rooms/_RoomPreviewBar.pcss
+++ b/res/css/views/rooms/_RoomPreviewBar.pcss
@@ -35,7 +35,7 @@ limitations under the License.
 
     h3,
     .mx_RoomPreviewBar_message p {
-        // break-word, with fallback to break-all, which is wider supported
+        /* break-word, with fallback to break-all, which is wider supported */
         word-break: break-all;
         word-break: break-word;
     }
@@ -98,11 +98,11 @@ limitations under the License.
     }
 }
 
-// With maximised widgets, the panel fits in better when rounded
+/* With maximised widgets, the panel fits in better when rounded */
 .mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel {
     margin: $container-gap-width;
-    margin-right: calc($container-gap-width / 2); // Shared with right panel
-    margin-top: 0; // Already covered by apps drawer
+    margin-right: calc($container-gap-width / 2); /* Shared with right panel */
+    margin-top: 0; /* Already covered by apps drawer */
     border-radius: 8px;
 }
 
@@ -126,15 +126,15 @@ limitations under the License.
     .mx_RoomPreviewBar_actions {
         flex-direction: column;
         .mx_AccessibleButton {
-            padding: 7px 50px; // extra wide
+            padding: 7px 50px; /* extra wide */
         }
 
         & > * {
             margin-top: 12px;
         }
         .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
-            // to account for the padding of the primary button which causes inconsistent look between
-            // subsequent secondary (text) buttons
+            /* to account for the padding of the primary button which causes inconsistent look between */
+            /* subsequent secondary (text) buttons */
             margin-bottom: 7px;
         }
     }
diff --git a/res/css/views/rooms/_RoomPreviewCard.pcss b/res/css/views/rooms/_RoomPreviewCard.pcss
index 2c01eca642..255a9633b2 100644
--- a/res/css/views/rooms/_RoomPreviewCard.pcss
+++ b/res/css/views/rooms/_RoomPreviewCard.pcss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_RoomPreviewCard {
-    padding: $spacing-32 $spacing-24 !important; // Override SpaceRoomView's default padding
+    padding: $spacing-32 $spacing-24 !important; /* Override SpaceRoomView's default padding */
     margin: auto;
     flex-grow: 1;
     max-width: 480px;
@@ -65,7 +65,7 @@ limitations under the License.
             }
         }
 
-        // XXX Remove this when video rooms leave beta
+        /* XXX Remove this when video rooms leave beta */
         .mx_BetaCard_betaPill {
             margin-inline-start: auto;
             align-self: start;
@@ -107,7 +107,7 @@ limitations under the License.
     }
 
     h1.mx_RoomPreviewCard_name {
-        margin: $spacing-16 0 !important; // Override SpaceRoomView's default margins
+        margin: $spacing-16 0 !important; /* Override SpaceRoomView's default margins */
     }
 
     .mx_RoomPreviewCard_topic {
diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss
index 84cc8d7618..4fd93f6713 100644
--- a/res/css/views/rooms/_RoomSublist.pcss
+++ b/res/css/views/rooms/_RoomSublist.pcss
@@ -29,23 +29,23 @@ limitations under the License.
     }
 
     .mx_RoomSublist_headerContainer {
-        // Create a flexbox to make alignment easy
+        /* Create a flexbox to make alignment easy */
         display: flex;
         align-items: center;
 
-        // ***************************
-        // Sticky Headers Start
+        /* *************************** */
+        /* Sticky Headers Start */
 
-        // Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the
-        // headerContainer, however due to our layout concerns we actually have to
-        // calculate it manually so we can sticky things in the right places. We also
-        // target the headerText instead of the container to reduce jumps when scrolling,
-        // and to help hide the badges/other buttons that could appear on hover. This
-        // all works by ensuring the header text has a fixed height when sticky so the
-        // fixed height of the container can maintain the scroll position.
+        /* Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the */
+        /* headerContainer, however due to our layout concerns we actually have to */
+        /* calculate it manually so we can sticky things in the right places. We also */
+        /* target the headerText instead of the container to reduce jumps when scrolling, */
+        /* and to help hide the badges/other buttons that could appear on hover. This */
+        /* all works by ensuring the header text has a fixed height when sticky so the */
+        /* fixed height of the container can maintain the scroll position. */
 
-        // The combined height must be set in the LeftPanel component for sticky headers
-        // to work correctly.
+        /* The combined height must be set in the LeftPanel component for sticky headers */
+        /* to work correctly. */
         padding-bottom: 8px;
         height: 24px;
         color: $tertiary-content;
@@ -58,51 +58,51 @@ limitations under the License.
             flex: 1;
             max-width: 100%;
 
-            // Create a flexbox to make ordering easy
+            /* Create a flexbox to make ordering easy */
             display: flex;
             align-items: center;
 
-            // We use a generic sticky class for 2 reasons: to reduce style duplication and
-            // to identify when a header is sticky. If we didn't have a consistent sticky class,
-            // we'd have to do the "is sticky" checks again on click, as clicking the header
-            // when sticky scrolls instead of collapses the list.
+            /* We use a generic sticky class for 2 reasons: to reduce style duplication and */
+            /* to identify when a header is sticky. If we didn't have a consistent sticky class, */
+            /* we'd have to do the "is sticky" checks again on click, as clicking the header */
+            /* when sticky scrolls instead of collapses the list. */
             &.mx_RoomSublist_headerContainer_sticky {
                 position: fixed;
-                height: 32px; // to match the header container
-                // width set by JS because of a compat issue between Firefox and Chrome
+                height: 32px; /* to match the header container */
+                /* width set by JS because of a compat issue between Firefox and Chrome */
                 width: calc(100% - 15px);
             }
 
-            // We don't have a top style because the top is dependent on the room list header's
-            // height, and is therefore calculated in JS.
-            // The class, mx_RoomSublist_headerContainer_stickyTop, is applied though.
+            /* We don't have a top style because the top is dependent on the room list header's */
+            /* height, and is therefore calculated in JS. */
+            /* The class, mx_RoomSublist_headerContainer_stickyTop, is applied though. */
         }
 
-        // Sticky Headers End
-        // ***************************
+        /* Sticky Headers End */
+        /* *************************** */
 
         .mx_RoomSublist_badgeContainer {
-            // Create another flexbox row because it's super easy to position the badge this way.
+            /* Create another flexbox row because it's super easy to position the badge this way. */
             display: flex;
             align-items: center;
             justify-content: center;
 
-            // Apply the width and margin to the badge so the container doesn't occupy dead space
+            /* Apply the width and margin to the badge so the container doesn't occupy dead space */
             .mx_NotificationBadge {
-                // Do not set a width so the badges get properly sized
-                margin-left: 8px; // same as menu+aux buttons
+                /* Do not set a width so the badges get properly sized */
+                margin-left: 8px; /* same as menu+aux buttons */
             }
         }
 
         &:not(.mx_RoomSublist_headerContainer_withAux) {
             .mx_NotificationBadge {
-                margin-right: 4px; // just to push it over a bit, aligning it with the other elements
+                margin-right: 4px; /* just to push it over a bit, aligning it with the other elements */
             }
         }
 
         .mx_RoomSublist_auxButton,
         .mx_RoomSublist_menuButton {
-            margin-left: 8px; // should be the same as the notification badge
+            margin-left: 8px; /* should be the same as the notification badge */
             position: relative;
             width: 24px;
             height: 24px;
@@ -127,7 +127,7 @@ limitations under the License.
             background: $panel-actions;
         }
 
-        // Hide the menu button by default
+        /* Hide the menu button by default */
         .mx_RoomSublist_menuButton {
             visibility: hidden;
             width: 0;
@@ -144,12 +144,12 @@ limitations under the License.
 
         .mx_RoomSublist_headerText {
             flex: 1;
-            max-width: calc(100% - 16px); // 16px is the badge width
+            max-width: calc(100% - 16px); /* 16px is the badge width */
             line-height: $font-16px;
             font-size: $font-13px;
             font-weight: 600;
 
-            // Ellipsize any text overflow
+            /* Ellipsize any text overflow */
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
@@ -180,10 +180,10 @@ limitations under the License.
         }
     }
 
-    // In the general case, we reserve space for each sublist header to prevent
-    // scroll jumps when they become sticky. However, that leaves a gap when
-    // scrolled to the top above the first sublist (whose header can only ever
-    // stick to top), so we make sure to exclude the first visible sublist.
+    /* In the general case, we reserve space for each sublist header to prevent */
+    /* scroll jumps when they become sticky. However, that leaves a gap when */
+    /* scrolled to the top above the first sublist (whose header can only ever */
+    /* stick to top), so we make sure to exclude the first visible sublist. */
     &:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_stickableContainer {
         height: 24px;
     }
@@ -191,7 +191,7 @@ limitations under the License.
     .mx_RoomSublist_resizeBox {
         position: relative;
 
-        // Create another flexbox column for the tiles
+        /* Create another flexbox column for the tiles */
         display: flex;
         flex-direction: column;
         overflow: hidden;
@@ -200,23 +200,23 @@ limitations under the License.
             flex: 1 0 0;
             overflow: hidden;
             overflow: clip;
-            // need this to be flex otherwise the overflow hidden from above
-            // sometimes vertically centers the clipped list ... no idea why it would do this
-            // as the box model should be top aligned. Happens in both FF and Chromium
+            /* need this to be flex otherwise the overflow hidden from above */
+            /* sometimes vertically centers the clipped list ... no idea why it would do this */
+            /* as the box model should be top aligned. Happens in both FF and Chromium */
             display: flex;
             flex-direction: column;
             align-self: stretch;
-            // without this Firefox will prefer pushing the resizer & show more/less button into the overflow
+            /* without this Firefox will prefer pushing the resizer & show more/less button into the overflow */
             min-height: 0;
 
             mask-image: linear-gradient(0deg, transparent, black 4px);
         }
 
         &.mx_RoomSublist_resizeBox_forceExpanded .mx_RoomSublist_tiles {
-            // in this state the div can collapse its height entirely in Chromium,
-            // so prevent that by allowing overflow
+            /* in this state the div can collapse its height entirely in Chromium, */
+            /* so prevent that by allowing overflow */
             overflow: visible;
-            // clear the min-height to make it not collapse entirely in a state with no active resizer
+            /* clear the min-height to make it not collapse entirely in a state with no active resizer */
             min-height: unset;
         }
 
@@ -231,20 +231,20 @@ limitations under the License.
             width: 100%;
         }
 
-        // Class name comes from the ResizableBox component
-        // The hover state needs to use the whole sublist, not just the resizable box,
-        // so that selector is below and one level higher.
+        /* Class name comes from the ResizableBox component */
+        /* The hover state needs to use the whole sublist, not just the resizable box, */
+        /* so that selector is below and one level higher. */
         .mx_RoomSublist_resizerHandle {
             cursor: ns-resize;
             border-radius: 3px;
 
-            // Override styles from library
+            /* Override styles from library */
             max-width: 64px;
-            height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
+            height: 4px !important; /* Update RESIZE_HANDLE_HEIGHT if this changes */
 
-            // This is positioned directly below the 'show more' button.
+            /* This is positioned directly below the 'show more' button. */
             position: relative !important;
-            bottom: 0 !important; // override from library
+            bottom: 0 !important; /* override from library */
         }
 
         &:hover, &.mx_RoomSublist_hasMenuOpen {
@@ -261,12 +261,12 @@ limitations under the License.
         line-height: $font-18px;
         color: $secondary-content;
 
-        // Update the render() function for RoomSublist if these change
-        // Update the ListLayout class for minVisibleTiles if these change.
+        /* Update the render() function for RoomSublist if these change */
+        /* Update the ListLayout class for minVisibleTiles if these change. */
         height: 24px;
         padding-bottom: 4px;
 
-        // We create a flexbox to cheat at alignment
+        /* We create a flexbox to cheat at alignment */
         display: flex;
         align-items: center;
 
@@ -280,7 +280,7 @@ limitations under the License.
             mask-size: contain;
             mask-repeat: no-repeat;
             background: $tertiary-content;
-            left: -1px; // adjust for image position
+            left: -1px; /* adjust for image position */
         }
 
         .mx_RoomSublist_showMoreButtonChevron,
@@ -323,9 +323,9 @@ limitations under the License.
             .mx_RoomSublist_auxButton {
                 order: 2;
                 visibility: visible;
-                width: 32px !important; // !important to override hover styles
-                height: 32px !important; // !important to override hover styles
-                margin-left: 0 !important; // !important to override hover styles
+                width: 32px !important; /* !important to override hover styles */
+                height: 32px !important; /* !important to override hover styles */
+                margin-left: 0 !important; /* !important to override hover styles */
                 background-color: $panel-actions;
                 margin-top: 8px;
 
@@ -344,7 +344,7 @@ limitations under the License.
             flex-direction: column;
 
             .mx_RoomSublist_showNButtonChevron {
-                margin-right: 12px; // to center
+                margin-right: 12px; /* to center */
             }
         }
 
@@ -357,15 +357,15 @@ limitations under the License.
             .mx_RoomSublist_menuButton {
                 visibility: visible;
                 position: absolute;
-                bottom: 48px; // align to middle of name, 40px for aux button (with padding) and 8px for alignment
+                bottom: 48px; /* align to middle of name, 40px for aux button (with padding) and 8px for alignment */
                 right: 0;
                 width: 16px;
                 height: 16px;
                 border-radius: 0;
-                z-index: 1; // occlude the list name
+                z-index: 1; /* occlude the list name */
 
-                // This is the same color as the left panel background because it needs
-                // to occlude the sublist title
+                /* This is the same color as the left panel background because it needs */
+                /* to occlude the sublist title */
                 background-color: $roomlist-bg-color;
 
                 &::before {
@@ -376,7 +376,7 @@ limitations under the License.
 
             &.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) {
                 .mx_RoomSublist_menuButton {
-                    bottom: 8px; // align to the middle of name, 40px less than the `bottom` above.
+                    bottom: 8px; /* align to the middle of name, 40px less than the `bottom` above. */
                 }
             }
         }
@@ -390,7 +390,7 @@ limitations under the License.
     hr {
         margin-top: 16px;
         margin-bottom: 16px;
-        margin-right: 16px; // additional 16px
+        margin-right: 16px; /* additional 16px */
         border: 1px solid $primary-content;
         opacity: 0.1;
     }
@@ -427,6 +427,6 @@ limitations under the License.
 }
 
 .mx_RoomSublist_minimized .mx_RoomSublist_skeletonUI {
-    width: 32px; // cut off the horizontal lines in the svg
-    margin-left: 10px; // align with sublist + buttons
+    width: 32px; /* cut off the horizontal lines in the svg */
+    margin-left: 10px; /* align with sublist + buttons */
 }
diff --git a/res/css/views/rooms/_RoomTile.pcss b/res/css/views/rooms/_RoomTile.pcss
index 2e8d6a479d..441e0130c1 100644
--- a/res/css/views/rooms/_RoomTile.pcss
+++ b/res/css/views/rooms/_RoomTile.pcss
@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// Note: the room tile expects to be in a flexbox column container
+/* Note: the room tile expects to be in a flexbox column container */
 .mx_RoomTile {
     margin-bottom: 4px;
     padding: 4px;
 
-    // The tile is also a flexbox row itself
+    /* The tile is also a flexbox row itself */
     display: flex;
-    contain: content; // Not strict as it will break when resizing a sublist vertically
+    contain: content; /* Not strict as it will break when resizing a sublist vertically */
     box-sizing: border-box;
 
     font-size: $font-13px;
@@ -47,9 +47,9 @@ limitations under the License.
         min-width: 0;
         flex-basis: 0;
         flex-grow: 1;
-        margin-right: 8px; // spacing to buttons/badges
+        margin-right: 8px; /* spacing to buttons/badges */
 
-        // Create a new column layout flexbox for the title parts
+        /* Create a new column layout flexbox for the title parts */
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -57,7 +57,7 @@ limitations under the License.
         .mx_RoomTile_title, .mx_RoomTile_subtitle {
             width: 100%;
 
-            // Ellipsize any text overflow
+            /* Ellipsize any text overflow */
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
@@ -78,39 +78,39 @@ limitations under the License.
         }
 
         .mx_RoomTile_titleWithSubtitle {
-            margin-top: -3px; // shift the title up a bit more
+            margin-top: -3px; /* shift the title up a bit more */
         }
     }
 
     .mx_RoomTile_notificationsButton {
-        margin-left: 4px; // spacing between buttons
+        margin-left: 4px; /* spacing between buttons */
     }
 
     .mx_RoomTile_badgeContainer {
         height: 16px;
-        // don't set width so that it takes no space when there is no badge to show
-        margin: auto 0; // vertically align
+        /* don't set width so that it takes no space when there is no badge to show */
+        margin: auto 0; /* vertically align */
 
-        // Create a flexbox to make aligning dot badges easier
+        /* Create a flexbox to make aligning dot badges easier */
         display: flex;
         align-items: center;
 
         .mx_NotificationBadge {
-            margin-right: 2px; // centering
+            margin-right: 2px; /* centering */
         }
 
         .mx_NotificationBadge_dot {
-            // make the smaller dot occupy the same width for centering
+            /* make the smaller dot occupy the same width for centering */
             margin-left: 5px;
             margin-right: 7px;
         }
     }
 
-    // The context menu buttons are hidden by default
+    /* The context menu buttons are hidden by default */
     .mx_RoomTile_menuButton,
     .mx_RoomTile_notificationsButton {
         width: 20px;
-        min-width: 20px; // yay flex
+        min-width: 20px; /* yay flex */
         height: 20px;
         margin-top: auto;
         margin-bottom: auto;
@@ -131,7 +131,7 @@ limitations under the License.
         }
     }
 
-    // If the room has an overriden notification setting then we always show the notifications menu button
+    /* If the room has an overriden notification setting then we always show the notifications menu button */
     .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
         display: block;
     }
@@ -144,7 +144,7 @@ limitations under the License.
         &:hover,
         &:focus-within,
         &.mx_RoomTile_hasMenuOpen {
-            // Hide the badge container on hover because it'll be a menu button
+            /* Hide the badge container on hover because it'll be a menu button */
             .mx_RoomTile_badgeContainer {
                 width: 0;
                 height: 0;
@@ -169,7 +169,7 @@ limitations under the License.
     }
 }
 
-// We use these both in context menus and the room tiles
+/* We use these both in context menus and the room tiles */
 .mx_RoomTile_iconBell::before {
     mask-image: url('$(res)/img/element-icons/notifications.svg');
 }
diff --git a/res/css/views/rooms/_SearchBar.pcss b/res/css/views/rooms/_SearchBar.pcss
index f6d3478e20..de2940691a 100644
--- a/res/css/views/rooms/_SearchBar.pcss
+++ b/res/css/views/rooms/_SearchBar.pcss
@@ -21,8 +21,8 @@ limitations under the License.
     border-bottom: 1px solid $primary-hairline-color;
 
     .mx_SearchBar_input {
-        // border: 1px solid $input-border-color;
-        // font-size: $font-15px;
+        /* border: 1px solid $input-border-color; */
+        /* font-size: $font-15px; */
         flex: 1 1 0;
         margin-left: 22px;
     }
diff --git a/res/css/views/rooms/_SendMessageComposer.pcss b/res/css/views/rooms/_SendMessageComposer.pcss
index 3e2cf68f1d..37d5f559d1 100644
--- a/res/css/views/rooms/_SendMessageComposer.pcss
+++ b/res/css/views/rooms/_SendMessageComposer.pcss
@@ -19,31 +19,31 @@ limitations under the License.
     display: flex;
     flex-direction: column;
     font-size: $font-14px;
-    // fixed line height to prevent emoji from being taller than text
+    /* fixed line height to prevent emoji from being taller than text */
     line-height: $font-18px;
     justify-content: center;
     margin-right: 6px;
-    // don't grow wider than available space
+    /* don't grow wider than available space */
     min-width: 0;
 
     .mx_BasicMessageComposer {
         flex: 1;
         display: flex;
         flex-direction: column;
-        // min-height at this level so the mx_BasicMessageComposer_input
-        // still stays vertically centered when less than 55px.
-        // We also set this to ensure the voice message recording widget
-        // doesn't cause a jump.
+        /* min-height at this level so the mx_BasicMessageComposer_input */
+        /* still stays vertically centered when less than 55px. */
+        /* We also set this to ensure the voice message recording widget */
+        /* doesn't cause a jump. */
         min-height: 55px;
 
         .mx_BasicMessageComposer_input {
             padding: 3px 0;
-            // this will center the contenteditable
-            // in it's parent vertically
-            // while keeping the autocomplete at the top
-            // of the composer. The parent needs to be a flex container for this to work.
+            /* this will center the contenteditable */
+            /* in it's parent vertically */
+            /* while keeping the autocomplete at the top */
+            /* of the composer. The parent needs to be a flex container for this to work. */
             margin: auto 0;
-            // max-height at this level so autocomplete doesn't get scrolled too
+            /* max-height at this level so autocomplete doesn't get scrolled too */
             max-height: 140px;
             overflow-y: auto;
         }
diff --git a/res/css/views/rooms/_Stickers.pcss b/res/css/views/rooms/_Stickers.pcss
index 94d1c6b779..2aafca71bc 100644
--- a/res/css/views/rooms/_Stickers.pcss
+++ b/res/css/views/rooms/_Stickers.pcss
@@ -21,8 +21,8 @@
     }
 
     iframe {
-        // Sticker picker depends on the fixed height previously used for all tiles
-        height: 283px; // height of the popout minus the AppTile menu bar
+        /* Sticker picker depends on the fixed height previously used for all tiles */
+        height: 283px; /* height of the popout minus the AppTile menu bar */
     }
 }
 
diff --git a/res/css/views/rooms/_ThreadSummary.pcss b/res/css/views/rooms/_ThreadSummary.pcss
index 370aa30ce0..509380d3a6 100644
--- a/res/css/views/rooms/_ThreadSummary.pcss
+++ b/res/css/views/rooms/_ThreadSummary.pcss
@@ -32,7 +32,7 @@ limitations under the License.
 
 .mx_ThreadSummary {
     min-width: 267px;
-    // 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;
@@ -46,7 +46,7 @@ limitations under the License.
     box-sizing: border-box;
     clear: both;
     overflow: hidden;
-    border: 1px solid $system; // always render a border so the hover effect doesn't require a re-layout
+    border: 1px solid $system; /* always render a border so the hover effect doesn't require a re-layout */
 
     .mx_ThreadSummary_chevron {
         position: absolute;
@@ -55,7 +55,7 @@ limitations under the License.
         bottom: 0;
         width: 60px;
         box-sizing: border-box;
-        // XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug
+        /* XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug */
         background: linear-gradient(270deg, $system 50%, $system-transparent 100%);
 
         opacity: 0;
@@ -90,7 +90,7 @@ limitations under the License.
 
     &::before {
         @mixin ThreadSummaryIcon;
-        align-self: center; // v-align the threads icon
+        align-self: center; /* v-align the threads icon */
     }
 
     .mx_ThreadSummary_sender,
@@ -121,7 +121,7 @@ limitations under the License.
 
     .mx_MessagePanel_narrow & {
         min-width: initial;
-        max-width: 100%; // prevent overflow
+        max-width: 100%; /* prevent overflow */
         width: initial;
     }
 }
diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.pcss b/res/css/views/rooms/_VoiceRecordComposerTile.pcss
index 1f1aa39f88..5443eca927 100644
--- a/res/css/views/rooms/_VoiceRecordComposerTile.pcss
+++ b/res/css/views/rooms/_VoiceRecordComposerTile.pcss
@@ -15,12 +15,12 @@ limitations under the License.
 */
 
 .mx_VoiceRecordComposerTile_stop {
-    // 28px plus a 2px border makes this a 32px square (as intended)
+    /* 28px plus a 2px border makes this a 32px square (as intended) */
     width: 28px;
     height: 28px;
     border: 2px solid $voice-record-stop-border-color;
     border-radius: 32px;
-    margin-right: 8px; // between us and the waveform component
+    margin-right: 8px; /* between us and the waveform component */
     position: relative;
 
     &::after {
@@ -39,7 +39,7 @@ limitations under the License.
     width: 24px;
     height: 24px;
     vertical-align: middle;
-    margin-right: 8px; // distance from left edge of waveform container (container has some margin too)
+    margin-right: 8px; /* distance from left edge of waveform container (container has some margin too) */
     background-color: $voice-record-icon-color;
     mask-repeat: no-repeat;
     mask-size: contain;
@@ -62,20 +62,20 @@ limitations under the License.
 }
 
 .mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
-    // Note: remaining class properties are in the PlayerContainer CSS.
+    /* Note: remaining class properties are in the PlayerContainer CSS. */
 
-    // fixed height to reduce layout jumps with the play button appearing
-    // https://github.com/vector-im/element-web/issues/18431
+    /* fixed height to reduce layout jumps with the play button appearing */
+    /* https://github.com/vector-im/element-web/issues/18431 */
     height: 32px;
 
-    margin: 6px; // force the composer area to put a gutter around us
-    margin-right: 12px; // isolate from stop/send button
+    margin: 6px; /* force the composer area to put a gutter around us */
+    margin-right: 12px; /* isolate from stop/send button */
 
-    position: relative; // important for the live circle
+    position: relative; /* important for the live circle */
 
     &.mx_VoiceRecordComposerTile_recording {
-        // We are putting the circle in this padding, so we need +10px from the regular
-        // padding on the left side.
+        /* We are putting the circle in this padding, so we need +10px from the regular */
+        /* padding on the left side. */
         padding-left: 22px;
 
         &::before {
@@ -86,24 +86,24 @@ limitations under the License.
             width: 10px;
             height: 10px;
             position: absolute;
-            left: 12px; // 12px from the left edge for container padding
-            top: 17px; // vertically center (middle align with clock)
+            left: 12px; /* 12px from the left edge for container padding */
+            top: 17px; /* vertically center (middle align with clock) */
             border-radius: 10px;
         }
     }
 }
 
-// The keyframes are slightly weird here to help make a ramping/punch effect
-// for the recording dot. We start and end at 100% opacity to help make the
-// dot feel a bit like a real lamp that is blinking: the animation ends up
-// spending a lot of its time showing a steady state without a fade effect.
-// This lamp effect extends into why the 0% opacity keyframe is not in the
-// 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.
+/* The keyframes are slightly weird here to help make a ramping/punch effect */
+/* for the recording dot. We start and end at 100% opacity to help make the */
+/* dot feel a bit like a real lamp that is blinking: the animation ends up */
+/* spending a lot of its time showing a steady state without a fade effect. */
+/* This lamp effect extends into why the 0% opacity keyframe is not in the */
+/* 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)
+/* 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 {
     0% {
         opacity: 1;
diff --git a/res/css/views/rooms/_WhoIsTypingTile.pcss b/res/css/views/rooms/_WhoIsTypingTile.pcss
index e07e6d00d9..2d469fa531 100644
--- a/res/css/views/rooms/_WhoIsTypingTile.pcss
+++ b/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;
@@ -23,7 +23,7 @@ limitations under the License.
 
 /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
 .mx_WhoIsTypingTile_avatars {
-    flex: 0 0 82px; // 18 (padding on message list) + 64 (padding on event lines)
+    flex: 0 0 82px; /* 18 (padding on message list) + 64 (padding on event lines) */
     text-align: center;
 }
 
diff --git a/res/css/views/settings/_AvatarSetting.pcss b/res/css/views/settings/_AvatarSetting.pcss
index 8c63a00aa8..fb348723ef 100644
--- a/res/css/views/settings/_AvatarSetting.pcss
+++ b/res/css/views/settings/_AvatarSetting.pcss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_AvatarSetting_avatar {
     width: 90px;
-    min-width: 90px; // so it doesn't get crushed by the flexbox in languages with longer words
+    min-width: 90px; /* so it doesn't get crushed by the flexbox in languages with longer words */
     height: 90px;
     margin-top: 8px;
     position: relative;
@@ -24,26 +24,26 @@ limitations under the License.
     .mx_AvatarSetting_hover {
         transition: opacity $hover-transition;
 
-        // position to place the hover bg over the entire thing
+        /* position to place the hover bg over the entire thing */
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
 
-        pointer-events: none; // let the pointer fall through the underlying thing
+        pointer-events: none; /* let the pointer fall through the underlying thing */
 
         line-height: 90px;
         text-align: center;
 
         > span {
             color: $primary-content;
-            position: relative; // tricks the layout engine into putting this on top of the bg
+            position: relative; /* tricks the layout engine into putting this on top of the bg */
             font-weight: 500;
         }
 
         .mx_AvatarSetting_hoverBg {
-            // absolute position to lazily fill the entire container
+            /* absolute position to lazily fill the entire container */
             position: absolute;
             top: 0;
             bottom: 0;
diff --git a/res/css/views/settings/_FontScalingPanel.pcss b/res/css/views/settings/_FontScalingPanel.pcss
index ba255b54ca..9aadf3497d 100644
--- a/res/css/views/settings/_FontScalingPanel.pcss
+++ b/res/css/views/settings/_FontScalingPanel.pcss
@@ -32,11 +32,11 @@ limitations under the License.
         display: flow-root;
 
         &.mx_IRCLayout {
-            padding-top: 9px; // TODO: Use a spacing variable
+            padding-top: 9px; /* TODO: Use a spacing variable */
         }
 
         .mx_EventTile[data-layout="bubble"] {
-            margin-top: 30px; // TODO: Use a spacing variable
+            margin-top: 30px; /* TODO: Use a spacing variable */
         }
 
         .mx_EventTile_msgOption {
@@ -47,7 +47,7 @@ limitations under the License.
     .mx_FontScalingPanel_fontSlider {
         display: flex;
         align-items: center;
-        padding: 15px $spacing-20 35px; // TODO: Use spacing variables
+        padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */
         background: rgba($quinary-content, 0.2);
         border-radius: 10px;
         font-size: $font-10px;
diff --git a/res/css/views/settings/_ImageSizePanel.pcss b/res/css/views/settings/_ImageSizePanel.pcss
index 3b0b982be2..19736347a2 100644
--- a/res/css/views/settings/_ImageSizePanel.pcss
+++ b/res/css/views/settings/_ImageSizePanel.pcss
@@ -19,10 +19,10 @@ limitations under the License.
 
     .mx_ImageSizePanel_radios {
         display: flex;
-        margin-top: 16px; // move away from header a bit
+        margin-top: 16px; /* move away from header a bit */
 
         > label {
-            margin-right: 68px; // keep the boxes separate
+            margin-right: 68px; /* keep the boxes separate */
             cursor: pointer;
         }
 
@@ -33,7 +33,7 @@ limitations under the License.
             mask-position: center;
             width: 221px;
             height: 148px;
-            margin-bottom: 14px; // move radio button away from bottom edge a bit
+            margin-bottom: 14px; /* move radio button away from bottom edge a bit */
 
             &.mx_ImageSizePanel_sizeDefault {
                 mask: url("$(res)/img/element-icons/settings/img-size-normal.svg");
diff --git a/res/css/views/settings/_JoinRuleSettings.pcss b/res/css/views/settings/_JoinRuleSettings.pcss
index c4a9343c3c..a55432b25a 100644
--- a/res/css/views/settings/_JoinRuleSettings.pcss
+++ b/res/css/views/settings/_JoinRuleSettings.pcss
@@ -36,7 +36,7 @@ limitations under the License.
     > span {
         font-weight: 500;
         font-size: $font-14px;
-        line-height: 32px; // matches height of avatar for v-align
+        line-height: 32px; /* matches height of avatar for v-align */
         color: $secondary-content;
         display: inline-block;
 
diff --git a/res/css/views/settings/_Notifications.pcss b/res/css/views/settings/_Notifications.pcss
index c6c8385368..2725fb4a99 100644
--- a/res/css/views/settings/_Notifications.pcss
+++ b/res/css/views/settings/_Notifications.pcss
@@ -15,14 +15,14 @@ limitations under the License.
 */
 
 .mx_UserNotifSettings_grid {
-    width: calc(100% + 12px); // +12px to line up center of 'Noisy' column with toggle switches
+    width: calc(100% + 12px); /* +12px to line up center of 'Noisy' column with toggle switches */
     display: grid;
     grid-template-columns: auto repeat(3, 62px);
     place-items: center center;
     grid-gap: 8px;
     margin-top: $spacing-40;
 
-    // Override StyledRadioButton default styles
+    /* Override StyledRadioButton default styles */
     .mx_StyledRadioButton {
         justify-content: center;
 
@@ -46,9 +46,9 @@ limitations under the License.
 
 .mx_UserNotifSettings_gridRowLabel {
     justify-self: start;
-    // <legend> does not accept
-    // display: inline | inline-block
-    // force it inline using float
+    /* <legend> does not accept */
+    /* display: inline | inline-block */
+    /* force it inline using float */
     float: left;
 }
 .mx_UserNotifSettings_gridRowHeading {
@@ -63,12 +63,12 @@ limitations under the License.
 }
 
 .mx_UserNotifSettings {
-    color: $primary-content; // override from default settings page styles
+    color: $primary-content; /* override from default settings page styles */
 
     .mx_UserNotifSettings_floatingSection {
         margin-top: 40px;
 
-        & > div:first-child { // section header
+        & > div:first-child { /* section header */
             font-size: $font-18px;
             font-weight: $font-semi-bold;
         }
@@ -79,7 +79,7 @@ limitations under the License.
             margin-top: 8px;
 
             tr > td:first-child {
-                // Just for a bit of spacing
+                /* Just for a bit of spacing */
                 padding-right: 8px;
             }
         }
@@ -90,7 +90,7 @@ limitations under the License.
     }
 
     .mx_TagComposer {
-        margin-top: 35px; // lots of distance from the last line of the table
+        margin-top: 35px; /* lots of distance from the last line of the table */
     }
 }
 
diff --git a/res/css/views/settings/_ProfileSettings.pcss b/res/css/views/settings/_ProfileSettings.pcss
index f543a12f29..86b6835dc8 100644
--- a/res/css/views/settings/_ProfileSettings.pcss
+++ b/res/css/views/settings/_ProfileSettings.pcss
@@ -51,12 +51,12 @@ limitations under the License.
     }
 
     .mx_ProfileSettings_buttons {
-        margin-top: 10px; // 18px is already accounted for by the <p> above the buttons
+        margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */
         margin-bottom: $spacing-28;
 
         > .mx_AccessibleButton_kind_link {
             font-size: $font-14px;
-            margin-inline-end: 10px; // TODO: Use a spacing variable
+            margin-inline-end: 10px; /* TODO: Use a spacing variable */
         }
     }
 }
diff --git a/res/css/views/settings/_SetIntegrationManager.pcss b/res/css/views/settings/_SetIntegrationManager.pcss
index 3d98f47346..c6b5d9283b 100644
--- a/res/css/views/settings/_SetIntegrationManager.pcss
+++ b/res/css/views/settings/_SetIntegrationManager.pcss
@@ -34,7 +34,7 @@ limitations under the License.
 
         .mx_ToggleSwitch {
             align-self: flex-start;
-            min-width: var(--ToggleSwitch-min-width); // avoid compression
+            min-width: var(--ToggleSwitch-min-width); /* avoid compression */
         }
     }
 }
diff --git a/res/css/views/settings/_ThemeChoicePanel.pcss b/res/css/views/settings/_ThemeChoicePanel.pcss
index d5bd4fa1ec..8dfd00e867 100644
--- a/res/css/views/settings/_ThemeChoicePanel.pcss
+++ b/res/css/views/settings/_ThemeChoicePanel.pcss
@@ -50,14 +50,14 @@ limitations under the License.
         > .mx_StyledRadioButton_enabled {
             opacity: 1;
 
-            // These colors need to be hardcoded because they don't change with the theme
+            /* These colors need to be hardcoded because they don't change with the theme */
             &.mx_ThemeSelector_light {
                 background-color: #f3f8fd;
                 color: #2e2f32;
             }
 
             &.mx_ThemeSelector_dark {
-                // 5% lightened version of 181b21
+                /* 5% lightened version of 181b21 */
                 background-color: #25282e;
                 color: #f3f8fd;
             }
diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss
index 9d437443cf..d733ebf5a1 100644
--- a/res/css/views/settings/tabs/_SettingsTab.pcss
+++ b/res/css/views/settings/tabs/_SettingsTab.pcss
@@ -16,9 +16,9 @@ limitations under the License.
 
 .mx_SettingsTab {
     --SettingsTab_section-margin-bottom-preferences-labs: 30px;
-    --SettingsTab_heading_nth_child-margin-top: 30px; // TODO: Use a spacing variable
+    --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */
     --SettingsTab_fullWidthField-margin-inline-end: 100px;
-    --SettingsTab_tooltip-max-width: 120px; // So it fits in the space provided by the page
+    --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */
 
     color: $primary-content;
 
@@ -35,8 +35,8 @@ limitations under the License.
     font-size: $font-20px;
     font-weight: 600;
     color: $primary-content;
-    margin-top: 10px; // TODO: Use a spacing variable
-    margin-bottom: 10px; // TODO: Use a spacing variable
+    margin-top: 10px; /* TODO: Use a spacing variable */
+    margin-bottom: 10px; /* TODO: Use a spacing variable */
 
     &:nth-child(n + 2) {
         margin-top: var(--SettingsTab_heading_nth_child-margin-top);
@@ -49,16 +49,16 @@ limitations under the License.
     font-weight: 600;
     color: $primary-content;
     margin-top: $spacing-12;
-    margin-bottom: 10px; // TODO: Use a spacing variable
+    margin-bottom: 10px; /* TODO: Use a spacing variable */
 }
 
 .mx_SettingsTab_subsectionText {
     color: $secondary-content;
     font-size: $font-14px;
     display: block;
-    margin-top: 10px; // TODO: Use a spacing variable
-    margin-inline-end: 80px; // Align with the rest of the view
-    margin-bottom: 10px; // TODO: Use a spacing variable
+    margin-top: 10px; /* TODO: Use a spacing variable */
+    margin-inline-end: 80px; /* Align with the rest of the view */
+    margin-bottom: 10px; /* TODO: Use a spacing variable */
     margin-inline-start: 0;
 }
 
@@ -69,12 +69,12 @@ limitations under the License.
 
     .mx_SettingsFlag {
         margin-inline-end: $end-gutter;
-        margin-bottom: 10px; // TODO: Use a spacing variable
+        margin-bottom: 10px; /* TODO: Use a spacing variable */
 
         .mx_SettingsFlag_label {
             vertical-align: middle;
             display: inline-block;
-            max-width: calc(100% - $font-48px); // Force word wrap instead of colliding with the switch
+            max-width: calc(100% - $font-48px); /* Force word wrap instead of colliding with the switch */
             box-sizing: border-box;
         }
 
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss
index 11b5069074..658f91ed4f 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss
@@ -19,7 +19,7 @@ limitations under the License.
 
     .mx_SettingsTab_subsectionText {
         margin-block: $spacing-12 $spacing-32;
-        color: $primary-content; // Same as mx_SettingsTab
+        color: $primary-content; /* Same as mx_SettingsTab */
     }
 
     .mx_Field {
diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
index 0c0e13d691..070deafa0e 100644
--- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
@@ -22,7 +22,7 @@ limitations under the License.
     margin-top: 0;
 }
 
-// TODO: Make this selector less painful
+/* TODO: Make this selector less painful */
 .mx_GeneralUserSettingsTab_accountSection .mx_SettingsTab_subheading:nth-child(n + 1),
 .mx_GeneralUserSettingsTab_discovery .mx_SettingsTab_subheading:nth-child(n + 2),
 .mx_SetIdServer .mx_SettingsTab_subheading {
@@ -31,7 +31,7 @@ limitations under the License.
 
 .mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
 .mx_GeneralUserSettingsTab_discovery .mx_Spinner {
-    // Move the spinner to the left side of the container (default center)
+    /* Move the spinner to the left side of the container (default center) */
     justify-content: left;
 }
 
diff --git a/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
index 4fe4d175df..aa65e6d494 100644
--- a/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
@@ -27,14 +27,14 @@ limitations under the License.
         column-gap: $spacing-8;
         margin-bottom: $spacing-4;
 
-        // TODO: Use flexbox
+        /* TODO: Use flexbox */
         &:last-of-type {
             margin-bottom: 0;
         }
 
         .mx_KeyboardShortcut {
             flex-wrap: nowrap;
-            column-gap: 5px; // TODO: Use a spacing variable
+            column-gap: 5px; /* TODO: Use a spacing variable */
         }
     }
 }
diff --git a/res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss
index 051ec4c9a0..f10b681668 100644
--- a/res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss
@@ -21,7 +21,7 @@ limitations under the License.
     }
 
     .mx_SettingsFlag {
-        margin-right: 0; // remove right margin to align with beta cards
+        margin-right: 0; /* remove right margin to align with beta cards */
         align-items: center;
     }
 }
diff --git a/res/css/views/spaces/_SpaceBasicSettings.pcss b/res/css/views/spaces/_SpaceBasicSettings.pcss
index e1df48a342..1ec33f62de 100644
--- a/res/css/views/spaces/_SpaceBasicSettings.pcss
+++ b/res/css/views/spaces/_SpaceBasicSettings.pcss
@@ -38,7 +38,7 @@ limitations under the License.
             border-radius: 16px;
         }
 
-        // only show it when the button is a div and not an img (has avatar)
+        /* only show it when the button is a div and not an img (has avatar) */
         div.mx_SpaceBasicSettings_avatar {
             cursor: pointer;
 
@@ -49,7 +49,7 @@ limitations under the License.
                 width: 80px;
                 top: 0;
                 left: 0;
-                background-color: #ffffff; // white icon fill
+                background-color: #ffffff; /* white icon fill */
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: 20px;
@@ -65,7 +65,7 @@ limitations under the License.
             display: inline-block;
             margin: auto 18px;
             color: $links;
-            font-size: $font-14px; // See _SpaceSettingsDialog.pcss
+            font-size: $font-14px; /* See _SpaceSettingsDialog.pcss */
         }
 
         > .mx_SpaceBasicSettings_avatar_remove {
diff --git a/res/css/views/spaces/_SpaceChildrenPicker.pcss b/res/css/views/spaces/_SpaceChildrenPicker.pcss
index 41632870f8..42fc2b4804 100644
--- a/res/css/views/spaces/_SpaceChildrenPicker.pcss
+++ b/res/css/views/spaces/_SpaceChildrenPicker.pcss
@@ -22,7 +22,7 @@ limitations under the License.
     }
 
     .mx_SearchBox {
-        // To match the space around the title
+        /* To match the space around the title */
         margin: 0 0 15px 0;
         flex-grow: 0;
         border-radius: 8px;
diff --git a/res/css/views/spaces/_SpaceCreateMenu.pcss b/res/css/views/spaces/_SpaceCreateMenu.pcss
index 2b24b9a2dc..3c495e2863 100644
--- a/res/css/views/spaces/_SpaceCreateMenu.pcss
+++ b/res/css/views/spaces/_SpaceCreateMenu.pcss
@@ -17,7 +17,7 @@ limitations under the License.
 $spacePanelWidth: 68px;
 
 .mx_SpaceCreateMenu_wrapper {
-    // background blur everything except SpacePanel
+    /* background blur everything except SpacePanel */
     .mx_ContextualMenu_background {
         background-color: $dialog-backdrop-color;
         opacity: 0.6;
@@ -43,7 +43,7 @@ $spacePanelWidth: 68px;
                 color: $secondary-content;
             }
 
-            // XXX: Temporary for the Spaces release only
+            /* XXX: Temporary for the Spaces release only */
             .mx_SpaceFeedbackPrompt {
                 border-top: 1px solid $input-border-color;
                 padding-top: 12px;
diff --git a/res/css/views/toasts/_IncomingCallToast.pcss b/res/css/views/toasts/_IncomingCallToast.pcss
index 5fd244c277..3fa5e5e00a 100644
--- a/res/css/views/toasts/_IncomingCallToast.pcss
+++ b/res/css/views/toasts/_IncomingCallToast.pcss
@@ -18,7 +18,7 @@ limitations under the License.
 .mx_IncomingCallToast {
     display: flex;
     flex-direction: row;
-    pointer-events: initial; // restore pointer events so the user can accept/decline
+    pointer-events: initial; /* restore pointer events so the user can accept/decline */
 
     .mx_IncomingCallToast_content {
         display: flex;
diff --git a/res/css/views/toasts/_NonUrgentEchoFailureToast.pcss b/res/css/views/toasts/_NonUrgentEchoFailureToast.pcss
index 7080cd5adc..4b21384e9c 100644
--- a/res/css/views/toasts/_NonUrgentEchoFailureToast.pcss
+++ b/res/css/views/toasts/_NonUrgentEchoFailureToast.pcss
@@ -22,12 +22,12 @@ limitations under the License.
         mask-position: center;
         mask-size: contain;
         mask-repeat: no-repeat;
-        background-color: #fff; // we know that non-urgent toasts are always styled the same
+        background-color: #fff; /* we know that non-urgent toasts are always styled the same */
         mask-image: url('$(res)/img/element-icons/cloud-off.svg');
         margin-right: 8px;
     }
 
-    span { // includes the i18n block
+    span { /* includes the i18n block */
         vertical-align: middle;
     }
 }
diff --git a/res/css/views/voip/CallView/_CallViewButtons.pcss b/res/css/views/voip/CallView/_CallViewButtons.pcss
index 91d173bc07..8f95eef7ca 100644
--- a/res/css/views/voip/CallView/_CallViewButtons.pcss
+++ b/res/css/views/voip/CallView/_CallViewButtons.pcss
@@ -16,10 +16,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// data-whatintent makes more sense here semantically but then the tooltip would stay visible without the button
-// which looks broken, so we match the behaviour of tooltips which is fine too.
+/* data-whatintent makes more sense here semantically but then the tooltip would stay visible without the button */
+/* which looks broken, so we match the behaviour of tooltips which is fine too. */
 [data-whatinput="mouse"] .mx_CallViewButtons.mx_CallViewButtons_hidden {
-    opacity: 0.001; // opacity 0 can cause a re-layout
+    opacity: 0.001; /* opacity 0 can cause a re-layout */
     pointer-events: none;
 }
 
@@ -32,7 +32,7 @@ limitations under the License.
     bottom: 32px;
     opacity: 1;
     transition: opacity 0.5s;
-    z-index: 200; // To be above _all_ feeds
+    z-index: 200; /* To be above _all_ feeds */
     gap: 18px;
 
     .mx_CallViewButtons_button {
@@ -50,7 +50,7 @@ limitations under the License.
 
         position: relative;
 
-        box-shadow: 0px 4px 4px 0px #00000026; // Same on both themes
+        box-shadow: 0px 4px 4px 0px #00000026; /* Same on both themes */
 
         &::before {
             content: '';
@@ -85,7 +85,7 @@ limitations under the License.
             }
         }
 
-        // State buttons
+        /* State buttons */
         &.mx_CallViewButtons_button_on {
             background-color: $call-view-button-on-background;
 
@@ -106,7 +106,7 @@ limitations under the License.
 
                 &::before {
                     mask-image: url('$(res)/img/voip/call-view/screensharing.svg');
-                    background-color: white; // Same on both themes
+                    background-color: white; /* Same on both themes */
                 }
             }
 
@@ -148,9 +148,9 @@ limitations under the License.
                 }
             }
         }
-        // State buttons
+        /* State buttons */
 
-        // Stateless buttons
+        /* Stateless buttons */
         &.mx_CallViewButtons_dialpad::before {
             mask-image: url('$(res)/img/voip/call-view/dialpad.svg');
         }
@@ -160,21 +160,21 @@ limitations under the License.
 
             &::before {
                 mask-image: url('$(res)/img/voip/call-view/hangup.svg');
-                background-color: white; // Same on both themes
+                background-color: white; /* Same on both themes */
             }
         }
 
         &.mx_CallViewButtons_button_more::before {
             mask-image: url('$(res)/img/voip/call-view/more.svg');
         }
-        // Stateless buttons
+        /* Stateless buttons */
 
-        // Invisible state
+        /* Invisible state */
         &.mx_CallViewButtons_button_invisible {
             visibility: hidden;
             pointer-events: none;
             position: absolute;
         }
-        // Invisible state
+        /* Invisible state */
     }
 }
diff --git a/res/css/views/voip/_CallPreview.pcss b/res/css/views/voip/_CallPreview.pcss
index 0fd97d4676..950466bdb5 100644
--- a/res/css/views/voip/_CallPreview.pcss
+++ b/res/css/views/voip/_CallPreview.pcss
@@ -19,7 +19,7 @@ limitations under the License.
     left: 0;
     top: 0;
 
-    pointer-events: initial; // restore pointer events so the user can leave/interact
+    pointer-events: initial; /* restore pointer events so the user can leave/interact */
 
     .mx_VideoFeed_remote.mx_VideoFeed_voice {
         min-height: 150px;
diff --git a/res/css/views/voip/_CallView.pcss b/res/css/views/voip/_CallView.pcss
index 8ef78fa548..765657e10a 100644
--- a/res/css/views/voip/_CallView.pcss
+++ b/res/css/views/voip/_CallView.pcss
@@ -21,7 +21,7 @@ limitations under the License.
     background-color: $dark-panel-bg-color;
     padding-left: 8px;
     padding-right: 8px;
-    // XXX: PiPContainer sets pointer-events: none - should probably be set back in a better place
+    /* XXX: PiPContainer sets pointer-events: none - should probably be set back in a better place */
     pointer-events: initial;
 
     .mx_CallView_toast {
@@ -33,7 +33,7 @@ limitations under the License.
         border-radius: 4px;
         z-index: 50;
 
-        // Same on both themes
+        /* Same on both themes */
         color: white;
         background-color: #17191c;
     }
@@ -61,7 +61,7 @@ limitations under the License.
             border-radius: 10px;
 
             padding: 10px;
-            padding-right: calc(20% + 20px); // Space for the sidebar
+            padding-right: calc(20% + 20px); /* Space for the sidebar */
 
             background-color: $call-view-content-background;
 
@@ -188,7 +188,7 @@ limitations under the License.
         padding-bottom: 10px;
 
         margin: $container-gap-width;
-        // 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: 10px;
     }
diff --git a/res/css/views/voip/_CallViewForRoom.pcss b/res/css/views/voip/_CallViewForRoom.pcss
index 58b4ddf700..6822f7196f 100644
--- a/res/css/views/voip/_CallViewForRoom.pcss
+++ b/res/css/views/voip/_CallViewForRoom.pcss
@@ -21,8 +21,8 @@ limitations under the License.
         display: flex;
 
         &:hover .mx_CallViewForRoom_ResizeHandle {
-            // Need to use important to override element style attributes
-            // set by re-resizable
+            /* Need to use important to override element style attributes */
+            /* set by re-resizable */
             width: 100% !important;
 
             display: flex;
diff --git a/res/css/views/voip/_DialPad.pcss b/res/css/views/voip/_DialPad.pcss
index c0ae2270f6..e58bb49385 100644
--- a/res/css/views/voip/_DialPad.pcss
+++ b/res/css/views/voip/_DialPad.pcss
@@ -61,7 +61,7 @@ limitations under the License.
         mask-repeat: no-repeat;
         mask-size: 20px;
         mask-position: center;
-        background-color: #FFF; // on all themes
+        background-color: #FFF; /* on all themes */
         mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
     }
 }
diff --git a/res/css/views/voip/_PiPContainer.pcss b/res/css/views/voip/_PiPContainer.pcss
index b013363ecc..8038e32bb8 100644
--- a/res/css/views/voip/_PiPContainer.pcss
+++ b/res/css/views/voip/_PiPContainer.pcss
@@ -20,9 +20,9 @@ limitations under the License.
     bottom: 72px;
     z-index: 100;
 
-    // Disable pointer events for Jitsi widgets to function. Direct
-    // calls have their own cursor and behaviour, but we need to make
-    // sure the cursor hits the iframe for Jitsi which will be at a
-    // different level.
+    /* Disable pointer events for Jitsi widgets to function. Direct */
+    /* calls have their own cursor and behaviour, but we need to make */
+    /* sure the cursor hits the iframe for Jitsi which will be at a */
+    /* different level. */
     pointer-events: none;
 }
diff --git a/res/css/views/voip/_VideoFeed.pcss b/res/css/views/voip/_VideoFeed.pcss
index a0ab8269c0..3d08e19a6e 100644
--- a/res/css/views/voip/_VideoFeed.pcss
+++ b/res/css/views/voip/_VideoFeed.pcss
@@ -64,7 +64,7 @@ limitations under the License.
         width: 24px;
         height: 24px;
 
-        background-color: rgba(0, 0, 0, 0.5); // Same on both themes
+        background-color: rgba(0, 0, 0, 0.5); /* Same on both themes */
         border-radius: 100%;
 
         &::before {
@@ -75,7 +75,7 @@ limitations under the License.
             mask-repeat: no-repeat;
             mask-size: contain;
             mask-position: center;
-            background-color: white; // Same on both themes
+            background-color: white; /* Same on both themes */
             border-radius: 7px;
         }
 
diff --git a/res/css/views/voip/_VideoLobby.pcss b/res/css/views/voip/_VideoLobby.pcss
index a708e79c90..3f4f1af4ec 100644
--- a/res/css/views/voip/_VideoLobby.pcss
+++ b/res/css/views/voip/_VideoLobby.pcss
@@ -55,7 +55,7 @@ limitations under the License.
         .mx_BaseAvatar {
             margin: $spacing-20;
 
-            // Override the explicit dimensions on the element so that this gets sized responsively
+            /* Override the explicit dimensions on the element so that this gets sized responsively */
             width: unset !important;
             height: unset !important;
             min-width: 0;
@@ -70,7 +70,7 @@ limitations under the License.
             height: 100%;
             object-fit: cover;
             display: block;
-            transform: scaleX(-1); // flip the image
+            transform: scaleX(-1); /* flip the image */
             background-color: black;
         }
 
diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss
index b64194010e..d5567c0b08 100644
--- a/res/themes/dark/css/_dark.pcss
+++ b/res/themes/dark/css/_dark.pcss
@@ -1,5 +1,5 @@
-// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
-// ********************
+/* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */
+/* ******************** */
 $primary-content: #ffffff;
 $secondary-content: #A9B2BC;
 $tertiary-content: #8E99A4;
@@ -7,38 +7,38 @@ $quaternary-content: #6F7882;
 $quinary-content: #394049;
 
 $system: #21262C;
-$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
+$system-transparent: rgba($system, 0.0); /* XXX: workaround for Safari 15.3 linear-gradient bug */
 $background: #15191E;
 $overlay-background: rgba($background, 0.85);
 
-$panel-base: #8D97A5; // This color is not intended for use in the app
+$panel-base: #8D97A5; /* This color is not intended for use in the app */
 $panels: rgba($system, 0.9);
 $panel-selected: rgba($panel-base, 0.3);
 $panel-hover: rgba($panel-base, 0.1);
 $panel-actions: rgba($panel-base, 0.2);
 $space-nav: rgba($panel-base, 0.1);
-// ********************
+/* ******************** */
 
-// Reused Figma non-compound colors
-// ********************
+/* Reused Figma non-compound colors */
+/* ******************** */
 $inverted-bg-color: $background;
 $header-panel-bg-color: #20252B;
-// ********************
+/* ******************** */
 
-// Theme specific colors
-// ********************
+/* Theme specific colors */
+/* ******************** */
 $icon-button-color: $tertiary-content;
-// ********************
+/* ******************** */
 
-// Colors that aren't in Figma and are theme specific - we need to get rid of these
-// ********************
+/* Colors that aren't in Figma and are theme specific - we need to get rid of these */
+/* ******************** */
 $header-panel-text-secondary-color: #c8c8cd;
 $room-highlight-color: #343a46;
 $text-secondary-color: #B9BEC6;
-// ********************
+/* ******************** */
 
-// Colors that aren't in Figma - we need to get rid of these
-// ********************
+/* Colors that aren't in Figma - we need to get rid of these */
+/* ******************** */
 $dark-panel-bg-color: $header-panel-bg-color;
 $muted-fg-color: $header-panel-text-primary-color;
 $light-fg-color: $header-panel-text-secondary-color;
@@ -52,134 +52,134 @@ $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
 $h3-color: $primary-content;
 $event-highlight-bg-color: #25271F;
 $header-panel-text-primary-color: $text-secondary-color;
-// ********************
+/* ******************** */
 
-// Tooltip
-// ********************
+/* Tooltip */
+/* ******************** */
 $tooltip-timeline-bg-color: $spacePanel-bg-color;
 $tooltip-timeline-fg-color: $primary-content;
-// ********************
+/* ******************** */
 
-// Widget
-// ********************
+/* Widget */
+/* ******************** */
 $widget-menu-bar-bg-color: $header-panel-bg-color;
 $widget-body-bg-color: $panel-actions;
-// ********************
+/* ******************** */
 
-// Menu
-// ********************
+/* Menu */
+/* ******************** */
 $menu-border-color: #000000;
 $menu-bg-color: $header-panel-bg-color;
 $menu-box-shadow-color: $background;
 $menu-selected-color: $room-highlight-color;
-// ********************
+/* ******************** */
 
-// Settings
-// ********************
+/* Settings */
+/* ******************** */
 $settings-profile-button-bg-color: #e7e7e7;
 $settings-subsection-fg-color: $text-secondary-color;
-// ********************
+/* ******************** */
 
-// Room
-// ********************
+/* Room */
+/* ******************** */
 $room-icon-unread-color: #fff;
-// ********************
+/* ******************** */
 
-// RoomHeader
-// ********************
+/* RoomHeader */
+/* ******************** */
 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
 $roomheader-addroom-fg-color: $primary-content;
-// ********************
+/* ******************** */
 
-// Rich-text-editor
-// ********************
+/* Rich-text-editor */
+/* ******************** */
 $pill-bg-color: $room-highlight-color;
 $pill-hover-bg-color: #545a66;
-// ********************
+/* ******************** */
 
-// Inputs
-// ********************
+/* Inputs */
+/* ******************** */
 $input-border-color: rgba(231, 231, 231, 0.2);
 $input-darker-bg-color: #181b21;
 $input-darker-fg-color: #61708b;
 $input-lighter-bg-color: #f2f5f8;
-// ********************
+/* ******************** */
 
-// Dialog
-// ********************
+/* Dialog */
+/* ******************** */
 $dialog-title-fg-color: $primary-content;
 $dialog-backdrop-color: $menu-border-color;
 $dialog-close-fg-color: #9fa9ba;
 $dialog-close-external-color: $primary-content;
-// ********************
+/* ******************** */
 
-// RoomList
-// ********************
+/* RoomList */
+/* ******************** */
 $roomlist-bg-color: rgba($system, 0.90);
 $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
 $roomtile-default-badge-bg-color: $input-darker-fg-color;
-// ********************
+/* ******************** */
 
-// Tabbed views
-// ********************
+/* Tabbed views */
+/* ******************** */
 $tab-label-fg-color: $primary-content;
 $tab-label-active-fg-color: $primary-content;
-// ********************
+/* ******************** */
 
-// Buttons
-// ********************
+/* Buttons */
+/* ******************** */
 $button-primary-fg-color: $primary-content;
 $button-secondary-bg-color: transparent;
 $button-danger-fg-color: $primary-content;
 $button-danger-disabled-fg-color: $primary-content;
-// ********************
+/* ******************** */
 
-// Toggle switch
-// ********************
+/* Toggle switch */
+/* ******************** */
 $togglesw-off-color: $room-highlight-color;
-// ********************
+/* ******************** */
 
-// Authpage
-// ********************
+/* Authpage */
+/* ******************** */
 $authpage-primary-color: $primary-content;
-// ********************
+/* ******************** */
 
-// Message action bar
-// ********************
+/* Message action bar */
+/* ******************** */
 $message-action-bar-bg-color: $header-panel-bg-color;
 $message-action-bar-fg-color: $header-panel-text-primary-color;
 $message-action-bar-border-color: #616b7f;
 $message-action-bar-hover-border-color: $header-panel-text-primary-color;
-// ********************
+/* ******************** */
 
-// Reaction row
-// ********************
+/* Reaction row */
+/* ******************** */
 $reaction-row-button-hover-border-color: $header-panel-text-primary-color;
 $reaction-row-button-selected-bg-color: #1f6954;
-// ********************
+/* ******************** */
 
-// Voice messages
-// ********************
+/* Voice messages */
+/* ******************** */
 $voice-record-stop-border-color: $quaternary-content;
 $voice-record-icon-color: $quaternary-content;
-// ********************
+/* ******************** */
 
-// Bubble tiles
-// ********************
+/* Bubble tiles */
+/* ******************** */
 $eventbubble-self-bg: #133A34;
 $eventbubble-others-bg: #21262C;
 $eventbubble-bg-hover: #1C2026;
 $eventbubble-reply-color: #C1C6CD;
-// ********************
+/* ******************** */
 
-// Lightbox
-// ********************
+/* Lightbox */
+/* ******************** */
 $lightbox-background-bg-color: $menu-border-color;
 $lightbox-background-bg-opacity: 0.85;
-// ********************
+/* ******************** */
 
-// VoIP
-// ********************
+/* VoIP */
+/* ******************** */
 $call-view-button-on-foreground: $primary-content;
 $call-view-button-on-background: $system;
 $call-view-button-off-foreground: $system;
@@ -191,23 +191,23 @@ $video-feed-secondary-background: $system;
 $video-lobby-system: $system;
 $video-lobby-background: $background;
 $video-lobby-primary-content: $primary-content;
-// ********************
+/* ******************** */
 
-// Location sharing
-// ********************
+/* Location sharing */
+/* ******************** */
 $location-live-color: #5c56f5;
 $location-live-secondary-color: #deddfd;
-// ********************
+/* ******************** */
 
-// Location sharing
-// ********************
+/* Location sharing */
+/* ******************** */
 .maplibregl-ctrl-attrib-button {
     color: $background;
 }
-// ********************
+/* ******************** */
 
-// One-off colors
-// ********************
+/* One-off colors */
+/* ******************** */
 $progressbar-bg-color: $system;
 $kbd-border-color: $menu-border-color;
 $visual-bell-bg-color: #800;
@@ -221,17 +221,17 @@ $resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74);
 $codeblock-background-color: #2a3039;
 $scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
 $selected-color: $room-highlight-color;
-// ********************
+/* ******************** */
 
-// blur amounts for left left panel (only for element theme)
-// ********************
+/* blur amounts for left left panel (only for element theme) */
+/* ******************** */
 :root {
     --lp-background-blur: 45px;
 }
-// ********************
+/* ******************** */
 
-// Mixins
-// ********************
+/* Mixins */
+/* ******************** */
 @define-mixin mx_DialogButton {
     /* align images in buttons (eg spinners) */
     vertical-align: middle;
@@ -255,7 +255,7 @@ $selected-color: $room-highlight-color;
 }
 
 @define-mixin mx_DialogButton_secondary {
-    // flip colours for the secondary ones
+    /* flip colours for the secondary ones */
     font-weight: 600;
     border: 1px solid $accent !important;
     color: $accent;
@@ -266,23 +266,23 @@ $selected-color: $room-highlight-color;
     color: $accent;
     text-decoration: none;
 }
-// ********************
+/* ******************** */
 
 body {
     color-scheme: dark;
 }
 
-// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it
-// better match the theme.  Typically applied to dark grey 'off' buttons or
-// light grey 'on' buttons.
-// ********************
+/* Nasty hacks to apply a filter to arbitrary monochrome artwork to make it */
+/* better match the theme.  Typically applied to dark grey 'off' buttons or */
+/* light grey 'on' buttons. */
+/* ******************** */
 .mx_filterFlipColor {
     filter: invert(1);
 }
-// ********************
+/* ******************** */
 
-// markdown overrides
-// ********************
+/* markdown overrides */
+/* ******************** */
 .mx_EventTile_content .markdown-body {
     table {
         tr {
@@ -294,12 +294,12 @@ body {
         }
     }
 }
-// ********************
+/* ******************** */
 
-// diff highlight colors
-// ********************
+/* diff highlight colors */
+/* ******************** */
 .hljs-tag {
-    color: inherit; // Without this they'd be weirdly blue which doesn't match the theme
+    color: inherit; /* Without this they'd be weirdly blue which doesn't match the theme */
 }
 
 .hljs-addition {
@@ -309,9 +309,9 @@ body {
 .hljs-deletion {
     background: #53232a;
 }
-// ********************
+/* ******************** */
 
-// Splash Page Gradient
+/* Splash Page Gradient */
 .mx_SplashPage::before {
     background-image:
         radial-gradient(
diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss
index 2eff623edf..349453622f 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.pcss
+++ b/res/themes/legacy-dark/css/_legacy-dark.pcss
@@ -1,9 +1,9 @@
-// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
+/* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */
 $system: #21262C;
-$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
+$system-transparent: rgba($system, 0.0); /* XXX: workaround for Safari 15.3 linear-gradient bug */
 
-// unified palette
-// try to use these colors when possible
+/* unified palette */
+/* try to use these colors when possible */
 $bg-color: #181b21;
 $base-color: #15171b;
 $base-text-color: #edf3ff;
@@ -14,39 +14,39 @@ $text-primary-color: #edf3ff;
 $text-secondary-color: #a1b2d1;
 $room-highlight-color: #343a46;
 
-// typical text (dark-on-white in light skin)
+/* typical text (dark-on-white in light skin) */
 $primary-fg-color: $text-primary-color;
 $secondary-fg-color: $primary-fg-color;
 $tertiary-fg-color: $primary-fg-color;
 $primary-bg-color: $bg-color;
 $muted-fg-color: $header-panel-text-primary-color;
 
-// used for dialog box text
+/* used for dialog box text */
 $light-fg-color: $header-panel-text-secondary-color;
 
-// used for focusing form controls
+/* used for focusing form controls */
 $focus-bg-color: $room-highlight-color;
 
 $pill-bg-color: $room-highlight-color;
 $pill-hover-bg-color: #545a66;
 
-// informational plinth
+/* informational plinth */
 $info-plinth-bg-color: $header-panel-bg-color;
 $info-plinth-fg-color: #888;
 
 $spacePanel-bg-color: $base-color;
 $inverted-bg-color: $spacePanel-bg-color;
 
-// used by Autocomplete
+/* used by Autocomplete */
 $selected-color: $room-highlight-color;
 
-// selected for hoverover & selected event tiles
+/* selected for hoverover & selected event tiles */
 $event-selected-color: $header-panel-bg-color;
 
-// used for the hairline dividers in RoomView
+/* used for the hairline dividers in RoomView */
 $primary-hairline-color: #000000;
 
-// used for the border of input text fields
+/* used for the border of input text fields */
 $input-border-color: #e7e7e7;
 $input-darker-bg-color: #181b21;
 $input-darker-fg-color: #61708b;
@@ -54,10 +54,10 @@ $input-lighter-bg-color: #f2f5f8;
 
 $resend-button-divider-color: $muted-fg-color;
 
-// scrollbars
+/* scrollbars */
 $scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
 
-// context menus
+/* context menus */
 $menu-border-color: #000000;
 $menu-bg-color: $header-panel-bg-color;
 $menu-box-shadow-color: $bg-color;
@@ -86,7 +86,7 @@ $icon-button-color: $header-panel-text-primary-color;
 $roomtopic-color: $text-secondary-color;
 $room-icon-unread-color: #fff;
 
-// Legacy theme backports
+/* Legacy theme backports */
 $accent: #0DBD8B;
 $alert: #FF5B55;
 $links: #0086e6;
@@ -96,20 +96,20 @@ $tertiary-content: $tertiary-fg-color;
 $quaternary-content: #6F7882;
 $quinary-content: $quaternary-content;
 $system: #21262C;
-$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
+$system-transparent: rgba($system, 0.0); /* XXX: workaround for Safari 15.3 linear-gradient bug */
 $background: $primary-bg-color;
 $overlay-background: rgba($background, 0.85);
 
 $panels: rgba($system, 0.9);
-$panel-base: #8D97A5; // This color is not intended for use in the app
+$panel-base: #8D97A5; /* This color is not intended for use in the app */
 $panel-selected: rgba($panel-base, 0.3);
 $panel-hover: rgba($panel-base, 0.1);
 $panel-actions: $roomtile-selected-bg-color;
 $space-nav: rgba($panel-base, 0.1);
 
-// Legacy theme backports
+/* Legacy theme backports */
 
-// ********************
+/* ******************** */
 
 $call-view-button-on-foreground: $primary-content;
 $call-view-button-on-background: $system;
@@ -133,28 +133,28 @@ $spacePanel-divider-color: $tertiary-content;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: #1A1D23;
 
-// ********************
+/* ******************** */
 
 $widget-menu-bar-bg-color: $header-panel-bg-color;
 $widget-body-bg-color: #1A1D23;
 
 $event-highlight-bg-color: #25271F;
 
-// event timestamp
+/* event timestamp */
 $event-timestamp-color: $text-secondary-color;
 
-// Tabbed views
+/* Tabbed views */
 $tab-label-fg-color: $text-primary-color;
 $tab-label-active-fg-color: $text-primary-color;
 
-// Buttons
+/* Buttons */
 $button-primary-fg-color: #ffffff;
 $button-secondary-bg-color: transparent;
 $button-danger-fg-color: #ffffff;
 $button-danger-disabled-fg-color: #ffffff;
-$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
+$button-danger-disabled-bg-color: #f5b6bb; /* TODO: Verify color */
 
-// Toggle switch
+/* Toggle switch */
 $togglesw-off-color: $room-highlight-color;
 
 $progressbar-bg-color: #21262c;
@@ -179,31 +179,31 @@ $tooltip-timeline-fg-color: #ffffff;
 
 $breadcrumb-placeholder-bg-color: #272c35;
 
-// See non-legacy dark for variable information
+/* See non-legacy dark for variable information */
 $voice-record-stop-border-color: #6F7882;
 $voice-record-icon-color: #6F7882;
 
-// Appearance tab colors
+/* Appearance tab colors */
 $appearance-tab-border-color: $room-highlight-color;
 
 $composer-shadow-color: tranparent;
 
 $codeblock-background-color: #2a3039;
 
-// Bubble tiles
+/* Bubble tiles */
 $eventbubble-self-bg: #14322E;
 $eventbubble-others-bg: $event-selected-color;
 $eventbubble-bg-hover: #1C2026;
 $eventbubble-reply-color: #C1C6CD;
 
-// Location sharing
-// ********************
+/* Location sharing */
+/* ******************** */
 $location-marker-color: #ffffff;
 $location-live-color: #5c56f5;
 $location-live-secondary-color: #deddfd;
-// ********************
+/* ******************** */
 
-// ***** Mixins! *****
+/* ***** Mixins! ***** */
 
 @define-mixin mx_DialogButton {
     /* align images in buttons (eg spinners) */
@@ -228,7 +228,7 @@ $location-live-secondary-color: #deddfd;
 }
 
 @define-mixin mx_DialogButton_secondary {
-    // flip colours for the secondary ones
+    /* flip colours for the secondary ones */
     font-weight: 600;
     border: 1px solid $accent !important;
     color: $accent;
@@ -244,14 +244,14 @@ body {
     color-scheme: dark;
 }
 
-// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it
-// better match the theme.  Typically applied to dark grey 'off' buttons or
-// light grey 'on' buttons.
+/* Nasty hacks to apply a filter to arbitrary monochrome artwork to make it */
+/* better match the theme.  Typically applied to dark grey 'off' buttons or */
+/* light grey 'on' buttons. */
 .mx_filterFlipColor {
     filter: invert(1);
 }
 
-// markdown overrides:
+/* markdown overrides: */
 .mx_EventTile_content .markdown-body {
     table {
         tr {
@@ -264,7 +264,7 @@ body {
     }
 }
 
-// highlight.js overrides:
+/* highlight.js overrides: */
 .hljs-tag {
-    color: inherit; // Without this they'd be weirdly blue which doesn't match the theme
+    color: inherit; /* Without this they'd be weirdly blue which doesn't match the theme */
 }
diff --git a/res/themes/legacy-light/css/_fonts.pcss b/res/themes/legacy-light/css/_fonts.pcss
index 26d253504a..8aaf837cd6 100644
--- a/res/themes/legacy-light/css/_fonts.pcss
+++ b/res/themes/legacy-light/css/_fonts.pcss
@@ -12,11 +12,11 @@
  * and it's better to rely on the browser's built-in obliquing behaviour.
  */
 
-// Grab the other fonts from the current theme, so we can override to Inter
-// in custom fonts if needed.
+/* Grab the other fonts from the current theme, so we can override to Inter */
+/* in custom fonts if needed. */
 @import "../../light/css/_fonts.pcss";
 
-// Nunito as the default, for old time's sake on legacy themes.
+/* Nunito as the default, for old time's sake on legacy themes. */
 /* the 'src' links are relative to the bundle.css, which is in a subdirectory.
  */
 @font-face {
diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss
index 829786f9f0..4da7e8e123 100644
--- a/res/themes/legacy-light/css/_legacy-light.pcss
+++ b/res/themes/legacy-light/css/_legacy-light.pcss
@@ -14,24 +14,24 @@ $font-family: 'Nunito', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'STIXG
 
 $monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'STIXGeneral', 'Courier', monospace, 'Noto Color Emoji';
 
-// unified palette
-// try to use these colors when possible
+/* unified palette */
+/* try to use these colors when possible */
 $header-panel-bg-color: #f3f8fd;
 
-// typical text (dark-on-white in light skin)
+/* typical text (dark-on-white in light skin) */
 $primary-fg-color: #2e2f32;
 $secondary-fg-color: $primary-fg-color;
 $tertiary-fg-color: $primary-fg-color;
 $primary-bg-color: #ffffff;
-$muted-fg-color: #61708b; // Commonly used in headings and relevant alt text
+$muted-fg-color: #61708b; /* Commonly used in headings and relevant alt text */
 
-// used for dialog box text
+/* used for dialog box text */
 $light-fg-color: #747474;
 
-// used for focusing form controls
+/* used for focusing form controls */
 $focus-bg-color: #dddddd;
 
-// button UI (white-on-green in light skin)
+/* button UI (white-on-green in light skin) */
 $accent-fg-color: #ffffff;
 $accent-alt: #238cf5;
 
@@ -39,29 +39,29 @@ $selection-fg-color: $primary-bg-color;
 
 $focus-brightness: 105%;
 
-// informational plinth
+/* informational plinth */
 $info-plinth-bg-color: #f7f7f7;
 $info-plinth-fg-color: #888;
 
-// left-panel style muted accent color
+/* left-panel style muted accent color */
 $secondary-accent-color: #f2f5f8;
 
 $spacePanel-bg-color: #27303a;
 $inverted-bg-color: $spacePanel-bg-color;
 
-// used by RoomDropTarget
+/* used by RoomDropTarget */
 $droptarget-bg-color: rgba(255, 255, 255, 0.5);
 
-// used by Autocomplete
+/* used by Autocomplete */
 $selected-color: $secondary-accent-color;
 
-// selected for hoverover & selected event tiles
+/* selected for hoverover & selected event tiles */
 $event-selected-color: $header-panel-bg-color;
 
-// used for the hairline dividers in RoomView
+/* used for the hairline dividers in RoomView */
 $primary-hairline-color: #e5e5e5;
 
-// used for the border of input text fields
+/* used for the border of input text fields */
 $input-border-color: #e7e7e7;
 $input-darker-bg-color: #e3e8f0;
 $input-darker-fg-color: #9fa9ba;
@@ -71,15 +71,15 @@ $resend-button-divider-color: $input-darker-bg-color;
 
 $button-fg-color: white;
 
-// apart from login forms, which have stronger border
+/* apart from login forms, which have stronger border */
 $strong-input-border-color: #c7c7c7;
 
-// used for UserSettings EditableText
+/* used for UserSettings EditableText */
 $input-underline-color: rgba(151, 151, 151, 0.5);
 $input-fg-color: rgba(74, 74, 74, 0.9);
-// scrollbars
+/* scrollbars */
 $scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
-// context menus
+/* context menus */
 $menu-border-color: #e7e7e7;
 $menu-bg-color: #fff;
 $menu-box-shadow-color: rgba(118, 131, 156, 0.6);
@@ -129,7 +129,7 @@ $icon-button-color: #91a1c0;
 $roomtopic-color: #9e9e9e;
 $room-icon-unread-color: #737D8C;
 
-// ********************
+/* ******************** */
 
 $theme-button-bg-color: #e3e8f0;
 
@@ -140,7 +140,7 @@ $presence-away: #d9b072;
 $presence-offline: #e3e8f0;
 $presence-busy: #FF5B55;
 
-// Legacy theme backports
+/* Legacy theme backports */
 $accent: #0DBD8B;
 $alert: #FF5B55;
 $links: #0086e6;
@@ -150,19 +150,19 @@ $tertiary-content: $tertiary-fg-color;
 $quaternary-content: #6F7882;
 $quinary-content: $quaternary-content;
 $system: #F4F6FA;
-$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
+$system-transparent: rgba($system, 0.0); /* XXX: workaround for Safari 15.3 linear-gradient bug */
 $background: $primary-bg-color;
 $overlay-background: rgba($background, 0.85);
 
 $panels: rgba($system, 0.9);
-$panel-base: #8D97A5; // This color is not intended for use in the app
+$panel-base: #8D97A5; /* This color is not intended for use in the app */
 $panel-selected: rgba($tertiary-content, 0.3);
 $panel-hover: rgba($tertiary-content, 0.1);
 $panel-actions: $roomtile-selected-bg-color;
 $space-nav: rgba($tertiary-content, 0.15);
-// Legacy theme backports
+/* Legacy theme backports */
 
-// ********************
+/* ******************** */
 
 $roomlist-filter-active-bg-color: $panel-actions;
 $roomlist-bg-color: $header-panel-bg-color;
@@ -177,9 +177,9 @@ $call-view-button-off-foreground: $background;
 $call-view-button-off-background: $secondary-content;
 $call-view-content-background: #21262C;
 
-$video-feed-secondary-background: #394049; // XXX: Color from dark theme
+$video-feed-secondary-background: #394049; /* XXX: Color from dark theme */
 
-// All of these are from dark theme
+/* All of these are from dark theme */
 $video-lobby-system: #21262C;
 $video-lobby-background: #15191E;
 $video-lobby-primary-content: #FFFFFF;
@@ -193,27 +193,27 @@ $username-variant6-color: #2dc2c5;
 $username-variant7-color: #5c56f5;
 $username-variant8-color: #74d12c;
 
-// ********************
+/* ******************** */
 
 $widget-menu-bar-bg-color: $secondary-accent-color;
 $widget-body-bg-color: #fff;
 
-// ********************
+/* ******************** */
 
-// $event-highlight-bg-color shares this value,
-// so to not make their order dependent on who depends on who, have a shared value
-// defined before both
+/* $event-highlight-bg-color shares this value, */
+/* so to not make their order dependent on who depends on who, have a shared value */
+/* defined before both */
 $yellow-background: #fff8e3;
 
 $event-highlight-bg-color: $yellow-background;
 
-// event timestamp
+/* event timestamp */
 $event-timestamp-color: #acacac;
 
 $copy-button-url: "$(res)/img/element-icons/copy.svg";
 
-// e2e
-$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent
+/* e2e */
+$e2e-verified-color: #76cfa5; /* N.B. *NOT* the same as $accent */
 $e2e-unknown-color: #e8bf37;
 $e2e-unverified-color: #e8bf37;
 $e2e-warning-color: #ba6363;
@@ -223,24 +223,24 @@ $lightbox-bg-color: #454545;
 $lightbox-fg-color: #ffffff;
 $lightbox-border-color: #ffffff;
 
-// Tabbed views
+/* Tabbed views */
 $tab-label-fg-color: #45474a;
 $tab-label-active-fg-color: #ffffff;
 
-// Buttons
+/* Buttons */
 $button-primary-fg-color: #ffffff;
 $button-secondary-bg-color: $accent-fg-color;
 $button-danger-fg-color: #ffffff;
 $button-danger-disabled-fg-color: #ffffff;
-$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
+$button-danger-disabled-bg-color: #f5b6bb; /* TODO: Verify color */
 
 $visual-bell-bg-color: #faa;
 
-// Toggle switch
+/* Toggle switch */
 $togglesw-off-color: #c1c9d6;
 $togglesw-ball-color: #fff;
 
-// Slider
+/* Slider */
 $slider-background-color: #c1c9d6;
 
 $progressbar-bg-color: rgba(141, 151, 165, 0.2);
@@ -270,38 +270,38 @@ $tooltip-timeline-fg-color: #ffffff;
 
 $breadcrumb-placeholder-bg-color: #e8eef5;
 
-// See non-legacy _light for variable information
+/* See non-legacy _light for variable information */
 $voice-record-stop-symbol-color: #ff4b55;
 $voice-record-live-circle-color: #ff4b55;
 $voice-record-stop-border-color: #E3E8F0;
 $voice-record-icon-color: $tertiary-fg-color;
 
-// FontSlider colors
+/* FontSlider colors */
 $appearance-tab-border-color: $input-darker-bg-color;
 
 $composer-shadow-color: tranparent;
 
 $codeblock-background-color: $header-panel-bg-color;
 
-// Bubble tiles
+/* Bubble tiles */
 $eventbubble-self-bg: #F0FBF8;
 $eventbubble-others-bg: $system;
 $eventbubble-bg-hover: #FAFBFD;
 $eventbubble-reply-color: #C1C6CD;
 
-// pinned events indicator
+/* pinned events indicator */
 $pinned-color: $tertiary-content;
 
 $spacePanel-divider-color: $tertiary-content;
 
-// Location sharing
-// ********************
+/* Location sharing */
+/* ******************** */
 $location-marker-color: #ffffff;
 $location-live-color: #5c56f5;
 $location-live-secondary-color: #deddfd;
-// ********************
+/* ******************** */
 
-// ***** Mixins! *****
+/* ***** Mixins! ***** */
 
 @define-mixin mx_DialogButton {
     /* align images in buttons (eg spinners) */
@@ -335,7 +335,7 @@ $location-live-secondary-color: #deddfd;
 }
 
 @define-mixin mx_DialogButton_secondary {
-    // flip colours for the secondary ones
+    /* flip colours for the secondary ones */
     font-weight: 600;
     border: 1px solid $accent !important;
     color: $accent;
@@ -351,7 +351,7 @@ body {
     color-scheme: light;
 }
 
-// diff highlight colors
+/* diff highlight colors */
 .hljs-addition {
     background: #dfd;
 }
diff --git a/res/themes/legacy-light/css/_paths.pcss b/res/themes/legacy-light/css/_paths.pcss
index d56a074881..d35445dfd9 100644
--- a/res/themes/legacy-light/css/_paths.pcss
+++ b/res/themes/legacy-light/css/_paths.pcss
@@ -1,3 +1,3 @@
-// Path from root SCSS file (such as `light.pcss`) to `res` dir in the source tree
-// This value is overridden by external themes in `element-web`.
+/* Path from root SCSS file (such as `light.pcss`) to `res` dir in the source tree */
+/* This value is overridden by external themes in `element-web`. */
 $res: ../../..;
diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss
index ce030634b9..d761d0c3d1 100644
--- a/res/themes/light-custom/css/_custom.pcss
+++ b/res/themes/light-custom/css/_custom.pcss
@@ -17,7 +17,7 @@ limitations under the License.
 $font-family: var(--font-family, $font-family);
 $monospace-font-family: var(--font-family-monospace, $monospace-font-family);
 
-// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
+/* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */
 $accent: var(--accent, $accent);
 $alert: var(--alert, $alert);
 $links: var(--links, $links);
@@ -26,22 +26,21 @@ $secondary-content: var(--secondary-content, $secondary-content);
 $tertiary-content: var(--tertiary-content, $tertiary-content);
 $quaternary-content: var(--quaternary-content, $quaternary-content);
 $quinary-content: var(--quinary-content, $quinary-content);
-// XXX: workaround for Safari 15.3 linear-gradient bug https://github.com/vector-im/element-web/issues/21670
+/* XXX: workaround for Safari 15.3 linear-gradient bug https://github.com/vector-im/element-web/issues/21670 */
 $system-transparent: var(--system-transparent, rgba($system, 0.0));
 $system: var(--system, $system);
 $background: var(--background, $background);
 $panels: rgba($system, 0.9);
-$panel-base: var(--panel-base, $tertiary-content); // This color is not intended for use in the app
+$panel-base: var(--panel-base, $tertiary-content); /* This color is not intended for use in the app */
 $panel-selected: rgba($panel-base, 0.3);
 $panel-hover: rgba($panel-base, 0.1);
 $panel-actions: rgba($panel-base, 0.2);
 $space-nav: rgba($panel-base, 0.1);
 
-//
-// --accent-color
+/* --accent-color */
 $username-variant3-color: var(--accent-color);
-//
-// --timeline-background-color
+
+/* --timeline-background-color */
 $button-secondary-bg-color: var(--timeline-background-color);
 $lightbox-border-color: var(--timeline-background-color);
 $menu-bg-color: var(--timeline-background-color);
@@ -49,73 +48,72 @@ $message-action-bar-bg-color: var(--timeline-background-color);
 $background: var(--timeline-background-color);
 $togglesw-ball-color: var(--timeline-background-color);
 $togglesw-off-color: var(--togglesw-off-color);
-$droptarget-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .5
-$authpage-modal-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .59
+$droptarget-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .5 */
+$authpage-modal-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .59 */
 $roomheader-bg-color: var(--timeline-background-color);
-//
-// --roomlist-highlights-color
+
+/* --roomlist-highlights-color */
 $panel-actions: var(--roomlist-highlights-color);
-//
-// --sidebar-color
+
+/* --sidebar-color */
 $spacePanel-bg-color: var(--sidebar-color);
 $tooltip-timeline-bg-color: var(--sidebar-color);
 $dialog-backdrop-color: var(--sidebar-color-50pct);
-//
-// --roomlist-background-color
+
+/* --roomlist-background-color */
 $header-panel-bg-color: var(--roomlist-background-color);
 $panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color);
-// these were #f2f5f8 instead of #f3f8fd, but close enough
+/* these were #f2f5f8 instead of #f3f8fd, but close enough */
 $dark-panel-bg-color: var(--roomlist-background-color);
 $input-lighter-bg-color: var(--roomlist-background-color);
 $secondary-accent-color: var(--roomlist-background-color);
 $selected-color: var(--roomlist-background-color);
 $widget-menu-bar-bg-color: var(--roomlist-background-color);
 $roomlist-bg-color: var(--roomlist-background-color);
-//
-// --timeline-text-color
+
+/* --timeline-text-color */
 $message-action-bar-fg-color: var(--timeline-text-color);
 $primary-content: var(--timeline-text-color);
 $roomtopic-color: var(--timeline-text-color-50pct);
 $tab-label-fg-color: var(--timeline-text-color);
-// was #212121
+/* was #212121 */
 $topleftmenu-color: var(--timeline-text-color);
-// was #45474a
+/* was #45474a */
 $dialog-title-fg-color: var(--timeline-text-color);
 $tab-label-fg-color: var(--timeline-text-color);
-// was #4e5054
+/* was #4e5054 */
 $authpage-lang-color: var(--timeline-text-color);
-// was #232f32
+/* was #232f32 */
 $authpage-primary-color: var(--timeline-text-color);
-// --roomlist-text-secondary-color
+/* --roomlist-text-secondary-color */
 $roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color);
 
-//
-// --roomlist-separator-color
+/* --roomlist-separator-color */
 $input-darker-bg-color: var(--roomlist-separator-color);
-$primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough
-//
-// --timeline-text-secondary-color
+$primary-hairline-color: var(--roomlist-separator-color);/* originally #e5e5e5, but close enough */
+
+/* --timeline-text-secondary-color */
 $authpage-secondary-color: var(--timeline-text-secondary-color);
 $pinned-color: var(--timeline-text-secondary-color);
 $settings-subsection-fg-color: var(--timeline-text-secondary-color);
 $roomheader-addroom-bg-color: var(--timeline-text-secondary-color);
-// was #747474
+/* was #747474 */
 $light-fg-color: var(--timeline-text-secondary-color);
 $focus-bg-color: var(--focus-bg-color, $focus-bg-color);
 $room-highlight-color: var(--room-highlight-color);
 
 $rte-room-pill-color: $room-highlight-color;
 
-// was #888888
+/* was #888888 */
 $info-plinth-fg-color: var(--timeline-text-secondary-color);
-//
-// --primary-color
+
+/* --primary-color */
 $accent-alt: var(--primary-color);
-//
-// --warning-color
-$button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5
-//
-// --username colors (which use a 0-based index)
+
+/* --warning-color */
+$button-danger-disabled-bg-color: var(--warning-color-50pct); /* still needs alpha at 0.5 */
+
+/* --username colors (which use a 0-based index) */
 $username-variant1-color: var(--username-colors_0, $username-variant1-color);
 $username-variant2-color: var(--username-colors_1, $username-variant2-color);
 $username-variant3-color: var(--username-colors_2, $username-variant3-color);
@@ -124,21 +122,22 @@ $username-variant5-color: var(--username-colors_4, $username-variant5-color);
 $username-variant6-color: var(--username-colors_5, $username-variant6-color);
 $username-variant7-color: var(--username-colors_6, $username-variant7-color);
 $username-variant8-color: var(--username-colors_7, $username-variant8-color);
-//
-// --timeline-highlights-color
+
+/* --timeline-highlights-color */
 $event-selected-color: var(--timeline-highlights-color);
 $event-highlight-bg-color: var(--timeline-highlights-color);
-//
-// redirect some variables away from their hardcoded values in the light theme
+
+/* redirect some variables away from their hardcoded values in the light theme */
 $settings-grey-fg-color: $primary-content;
 
-// --eventbubble colors
+/* --eventbubble colors */
 $eventbubble-self-bg: var(--eventbubble-self-bg, $eventbubble-self-bg);
 $eventbubble-others-bg: var(--eventbubble-others-bg, $eventbubble-others-bg);
 $eventbubble-bg-hover: var(--eventbubble-bg-hover, $eventbubble-bg-hover);
 $eventbubble-reply-color: var(--eventbubble-reply-color, $eventbubble-reply-color);
 
-$reaction-row-button-selected-bg-color: var(--reaction-row-button-selected-bg-color, $reaction-row-button-selected-bg-color);
+$reaction-row-button-selected-bg-color:
+    var(--reaction-row-button-selected-bg-color, $reaction-row-button-selected-bg-color);
 
 $menu-selected-color: var(--menu-selected-color, $menu-selected-color);
 $pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color);
diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.pcss b/res/themes/light-high-contrast/css/_light-high-contrast.pcss
index 54b009109c..32eec6d8f1 100644
--- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss
+++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss
@@ -1,4 +1,4 @@
-//// Reference: https://www.figma.com/file/RnLKnv09glhxGIZtn8zfmh/UI-Themes-%26-Accessibility?node-id=321%3A65847
+/* Reference: https://www.figma.com/file/RnLKnv09glhxGIZtn8zfmh/UI-Themes-%26-Accessibility?node-id=321%3A65847 */
 $accent: #268075;
 $alert: #D62C25;
 $links: #0A6ECA;
@@ -39,7 +39,7 @@ $roomtopic-color: $secondary-content;
 }
 
 @define-mixin mx_DialogButton_secondary {
-    // flip colours for the secondary ones
+    /* flip colours for the secondary ones */
     font-weight: 600;
     border: 1px solid $accent !important;
     color: $accent;
@@ -51,22 +51,22 @@ $roomtopic-color: $secondary-content;
     text-decoration: none;
 }
 
-// Draw an outline on buttons with focus
+/* Draw an outline on buttons with focus */
 .mx_AccessibleButton:focus {
     outline: 2px solid $accent;
     outline-offset: 2px;
 }
 
-// Add padding (and remove margin to compensate), so the outline is not
-// chopped off on the left
+/* Add padding (and remove margin to compensate), so the outline is not */
+/* chopped off on the left */
 .mx_TabbedView_tabPanel {
-    margin-left: 236px !important;  // Remove 4 to allow 4 in mx_SettingsTab
+    margin-left: 236px !important;  /* Remove 4 to allow 4 in mx_SettingsTab */
 }
 .mx_SettingsTab {
     padding-left: 4px !important;
 }
 .mx_BaseCard {
-    padding-left: 4px !important;  // Remove 4 to allow 4 in mx_BaseCard_Group
+    padding-left: 4px !important;  /* Remove 4 to allow 4 in mx_BaseCard_Group */
 }
 .mx_BaseCard_Group {
     padding-left: 4px !important;
diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss
index 709f100e82..abde9cf52d 100644
--- a/res/themes/light/css/_light.pcss
+++ b/res/themes/light/css/_light.pcss
@@ -11,26 +11,26 @@
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
 $font-family: 'Inter',
-'Twemoji',
-'Apple Color Emoji',
-'Segoe UI Emoji',
-'STIXGeneral',
-'Arial',
-'Helvetica',
-sans-serif,
-'Noto Color Emoji';
+    'Twemoji',
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'STIXGeneral',
+    'Arial',
+    'Helvetica',
+    sans-serif,
+    'Noto Color Emoji';
 
 $monospace-font-family: 'Inconsolata',
-'Twemoji',
-'Apple Color Emoji',
-'Segoe UI Emoji',
-'STIXGeneral',
-'Courier',
-monospace,
-'Noto Color Emoji';
+    'Twemoji',
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'STIXGeneral',
+    'Courier',
+    monospace,
+    'Noto Color Emoji';
 
-// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120
-// ********************
+/* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */
+/* ******************** */
 $primary-content: #17191C;
 $secondary-content: #737D8C;
 $tertiary-content: #8D97A5;
@@ -38,7 +38,7 @@ $quaternary-content: #c1c6cd;
 $quinary-content: #E3E8F0;
 
 $system: #F4F6FA;
-$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
+$system-transparent: rgba($system, 0.0); /* XXX: workaround for Safari 15.3 linear-gradient bug */
 $background: #ffffff;
 $overlay-background: rgba($background, 0.85);
 
@@ -60,21 +60,21 @@ $username-variant5-color: #ff812d;
 $username-variant6-color: #2dc2c5;
 $username-variant7-color: #5c56f5;
 $username-variant8-color: #74d12c;
-// ********************
+/* ******************** */
 
-// Reused Figma non-compound colors
-// ********************
+/* Reused Figma non-compound colors */
+/* ******************** */
 $inverted-bg-color: #27303a;
 $header-panel-bg-color: #f3f8fd;
-// ********************
+/* ******************** */
 
-// Theme specific colors
-// ********************
+/* Theme specific colors */
+/* ******************** */
 $icon-button-color: $quaternary-content;
-// ********************
+/* ******************** */
 
-// Colors that aren't in Figma and are theme specific - we need to get rid of these
-// ********************
+/* Colors that aren't in Figma and are theme specific - we need to get rid of these */
+/* ******************** */
 $selection-fg-color: $background;
 $yellow-background: #fff8e3;
 $secondary-accent-color: #f2f5f8;
@@ -85,10 +85,10 @@ $preview-widget-bar-color: #dddddd;
 $accent-fg-color: $background;
 $accent-alt: #238CF5;
 $info-plinth-fg-color: #888;
-// ********************
+/* ******************** */
 
-// Colors that aren't in Figma - we need to get rid of these
-// ********************
+/* Colors that aren't in Figma - we need to get rid of these */
+/* ******************** */
 $dark-panel-bg-color: $secondary-accent-color;
 $muted-fg-color: #61708b;
 $light-fg-color: #747474;
@@ -99,199 +99,199 @@ $topleftmenu-color: #212121;
 $roomtopic-color: #9e9e9e;
 $spacePanel-bg-color: rgba(232, 232, 232, 0.77);
 $panel-gradient: rgba(242, 245, 248, 0),
-rgba(242, 245, 248, 1);
+    rgba(242, 245, 248, 1);
 $h3-color: #3d3b39;
 $event-highlight-bg-color: $yellow-background;
 $header-panel-text-primary-color: #91A1C0;
-// ********************
+/* ******************** */
 
-// Blockquote
-// ********************
+/* Blockquote */
+/* ******************** */
 $blockquote-bar-color: $focus-bg-color;
-// ********************
+/* ******************** */
 
-// Tooltip
-// ********************
+/* Tooltip */
+/* ******************** */
 $tooltip-timeline-bg-color: $inverted-bg-color;
 $tooltip-timeline-fg-color: $background;
-// ********************
+/* ******************** */
 
-// Widget
-// ********************
+/* Widget */
+/* ******************** */
 $widget-menu-bar-bg-color: $secondary-accent-color;
 $widget-body-bg-color: $background;
-// ********************
+/* ******************** */
 
-// Menu
-// ********************
+/* Menu */
+/* ******************** */
 $menu-border-color: #e7e7e7;
 $menu-bg-color: $background;
 $menu-box-shadow-color: rgba(118, 131, 156, 0.6);
 $menu-selected-color: #f5f8fa;
-// ********************
+/* ******************** */
 
-// Settings
-// ********************
+/* Settings */
+/* ******************** */
 $settings-grey-fg-color: #a2a2a2;
 $settings-subsection-fg-color: $muted-fg-color;
-// ********************
+/* ******************** */
 
-// Room
-// ********************
+/* Room */
+/* ******************** */
 $room-icon-unread-color: $secondary-content;
-// ********************
+/* ******************** */
 
-// RoomHeader
-// ********************
+/* RoomHeader */
+/* ******************** */
 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
 $roomheader-addroom-fg-color: #5c6470;
-// ********************
+/* ******************** */
 
-// Rich-text-editor
-// ********************
+/* Rich-text-editor */
+/* ******************** */
 $pill-bg-color: #aaa;
 $pill-hover-bg-color: #ccc;
 $rte-bg-color: #e9e9e9;
 $rte-code-bg-color: rgba(0, 0, 0, 0.04);
-// ********************
+/* ******************** */
 
-// Presence
-// ********************
+/* Presence */
+/* ******************** */
 $presence-away: #d9b072;
 $presence-offline: $quinary-content;
 $presence-busy: $alert;
-// ********************
+/* ******************** */
 
-// Inputs
-// ********************
+/* Inputs */
+/* ******************** */
 $input-border-color: $menu-border-color;
 $input-darker-bg-color: $quinary-content;
 $input-darker-fg-color: #9fa9ba;
 $input-lighter-bg-color: $secondary-accent-color;
 $input-underline-color: rgba(151, 151, 151, 0.5);
 $input-fg-color: rgba(74, 74, 74, 0.9);
-// ********************
+/* ******************** */
 
-// Dialog
-// ********************
+/* Dialog */
+/* ******************** */
 $dialog-title-fg-color: #45474a;
 $dialog-backdrop-color: rgba(46, 48, 51, 0.38);
 $dialog-close-fg-color: #c1c1c1;
 $dialog-close-external-color: $background;
 $dialog-shadow-color: rgba(0, 0, 0, 0.48);
-// ********************
+/* ******************** */
 
-// ImageBody
-// ********************
+/* ImageBody */
+/* ******************** */
 $imagebody-giflabel: rgba(0, 0, 0, 0.7);
 $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
 $imagebody-giflabel-color: $background;
-// ********************
+/* ******************** */
 
-// RoomList
-// ********************
+/* RoomList */
+/* ******************** */
 $roomlist-bg-color: rgba(245, 245, 245, 0.90);
 $roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%);
 $roomtile-default-badge-bg-color: $muted-fg-color;
-// ********************
+/* ******************** */
 
-// e2e
-// ********************
-$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent
+/* e2e */
+/* ******************** */
+$e2e-verified-color: #76cfa5; /* N.B. *NOT* the same as $accent */
 $e2e-unknown-color: #e8bf37;
 $e2e-unverified-color: #e8bf37;
 $e2e-warning-color: #ba6363;
-// ********************
+/* ******************** */
 
-// Tabbed views
-// ********************
+/* Tabbed views */
+/* ******************** */
 $tab-label-fg-color: $dialog-title-fg-color;
 $tab-label-active-fg-color: $background;
-// ********************
+/* ******************** */
 
-// Buttons
-// ********************
+/* Buttons */
+/* ******************** */
 $button-primary-fg-color: $background;
 $button-secondary-bg-color: $accent-fg-color;
 $button-danger-fg-color: $background;
 $button-danger-disabled-fg-color: $background;
-$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
-// ********************
+$button-danger-disabled-bg-color: #f5b6bb; /* TODO: Verify color */
+/* ******************** */
 
-// Toggle switch
-// ********************
+/* Toggle switch */
+/* ******************** */
 $togglesw-off-color: #c1c9d6;
 $togglesw-ball-color: $background;
-// ********************
+/* ******************** */
 
-// Authpage
-// ********************
+/* Authpage */
+/* ******************** */
 $authpage-primary-color: #232f32;
 $authpage-bg-color: #2e3649;
 $authpage-modal-bg-color: $roomlist-bg-color;
 $authpage-focus-bg-color: $focus-bg-color;
 $authpage-lang-color: #4e5054;
 $authpage-secondary-color: $muted-fg-color;
-// ********************
+/* ******************** */
 
-// Message action bar
-// ********************
+/* Message action bar */
+/* ******************** */
 $message-action-bar-bg-color: $background;
 $message-action-bar-fg-color: $primary-content;
 $message-action-bar-border-color: #e9edf1;
 $message-action-bar-hover-border-color: $focus-bg-color;
-// ********************
+/* ******************** */
 
-// Reaction row
-// ********************
+/* Reaction row */
+/* ******************** */
 $reaction-row-button-hover-border-color: $focus-bg-color;
 $reaction-row-button-selected-bg-color: #e9fff9;
-// ********************
+/* ******************** */
 
-// Voice messages
-// ********************
-// These two don't change between themes. They are the $alert, but we don't want
-// custom themes to affect them by accident.
+/* Voice messages */
+/* ******************** */
+/* These two don't change between themes. They are the $alert, but we don't want */
+/* custom themes to affect them by accident. */
 $voice-record-stop-symbol-color: #ff5b55;
 $voice-record-live-circle-color: #ff5b55;
 $voice-record-stop-border-color: $quinary-content;
 $voice-record-icon-color: $tertiary-content;
-// ********************
+/* ******************** */
 
-// Bubble tiles
-// ********************
+/* Bubble tiles */
+/* ******************** */
 $eventbubble-self-bg: #E7F8F3;
 $eventbubble-others-bg: #E8EDF4;
 $eventbubble-bg-hover: #F6F7F8;
 $eventbubble-reply-color: $quaternary-content;
-// ********************
+/* ******************** */
 
-// Lightbox
-// ********************
+/* Lightbox */
+/* ******************** */
 $lightbox-fg-color: $background;
 $lightbox-background-bg-color: #000;
 $lightbox-background-bg-opacity: 0.95;
-// ********************
+/* ******************** */
 
-// VoIP
-// ********************
+/* VoIP */
+/* ******************** */
 $call-view-button-on-foreground: $secondary-content;
 $call-view-button-on-background: $background;
 $call-view-button-off-foreground: $background;
 $call-view-button-off-background: $secondary-content;
 $call-view-content-background: #21262C;
 
-$video-feed-secondary-background: #394049; // XXX: Color from dark theme
+$video-feed-secondary-background: #394049; /* XXX: Color from dark theme */
 $voipcall-plinth-color: $system;
 
-// All of these are from dark theme
+/* All of these are from dark theme */
 $video-lobby-system: #21262C;
 $video-lobby-background: #15191E;
 $video-lobby-primary-content: #FFFFFF;
-// ********************
+/* ******************** */
 
-// One-off colors
-// ********************
+/* One-off colors */
+/* ******************** */
 $progressbar-bg-color: $panel-actions;
 $kbd-border-color: $message-action-bar-border-color;
 $visual-bell-bg-color: #faa;
@@ -305,38 +305,38 @@ $resend-button-divider-color: $input-darker-bg-color;
 $codeblock-background-color: $header-panel-bg-color;
 $scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
 $selected-color: $secondary-accent-color;
-// ********************
+/* ******************** */
 
-// One-off global colors - these apply to both themes
-// ********************
+/* One-off global colors - these apply to both themes */
+/* ******************** */
 $pinned-color: $tertiary-content;
 $avatar-initial-color: $background;
 $primary-hairline-color: transparent;
 $focus-brightness: 105%;
-// ********************
+/* ******************** */
 
-// blur amounts for left left panel (only for element theme)
-// ********************
+/* blur amounts for left left panel (only for element theme) */
+/* ******************** */
 :root {
     --lp-background-blur: 40px;
 }
 
-// ********************
+/* ******************** */
 
-// Icon URLs
-// ********************
+/* Icon URLs */
+/* ******************** */
 $copy-button-url: "$(res)/img/element-icons/copy.svg";
-// ********************
+/* ******************** */
 
-// Location sharing
-// ********************
+/* Location sharing */
+/* ******************** */
 $location-marker-color: #ffffff;
 $location-live-color: #5c56f5;
 $location-live-secondary-color: #deddfd;
-// ********************
+/* ******************** */
 
-// Mixins
-// ********************
+/* Mixins */
+/* ******************** */
 @define-mixin mx_DialogButton {
     /* align images in buttons (eg spinners) */
     vertical-align: middle;
@@ -368,7 +368,7 @@ $location-live-secondary-color: #deddfd;
 }
 
 @define-mixin mx_DialogButton_secondary {
-    // flip colours for the secondary ones
+    /* flip colours for the secondary ones */
     font-weight: 600;
     border: 1px solid $accent !important;
     color: $accent;
@@ -384,10 +384,10 @@ body {
     color-scheme: light;
 }
 
-// ********************
+/* ******************** */
 
-// diff highlight colors
-// ********************
+/* diff highlight colors */
+/* ******************** */
 .hljs-addition {
     background: #dfd;
 }
@@ -396,4 +396,4 @@ body {
     background: #fdd;
 }
 
-// ********************
+/* ******************** */
diff --git a/res/themes/light/css/_mods.pcss b/res/themes/light/css/_mods.pcss
index 15f6d4b0fe..357a8a11d1 100644
--- a/res/themes/light/css/_mods.pcss
+++ b/res/themes/light/css/_mods.pcss
@@ -1,8 +1,8 @@
-// sidebar blurred avatar background
+/* sidebar blurred avatar background */
 //
-// if backdrop-filter is supported,
-// set the user avatar (if any) as a background so
-// it can be blurred by the tag panel and room list
+/* if backdrop-filter is supported, */
+/* set the user avatar (if any) as a background so */
+/* it can be blurred by the tag panel and room list */
 
 .mx_RoomSublist_showNButton {
     background-color: transparent !important;
diff --git a/res/themes/light/css/_paths.pcss b/res/themes/light/css/_paths.pcss
index d56a074881..d35445dfd9 100644
--- a/res/themes/light/css/_paths.pcss
+++ b/res/themes/light/css/_paths.pcss
@@ -1,3 +1,3 @@
-// Path from root SCSS file (such as `light.pcss`) to `res` dir in the source tree
-// This value is overridden by external themes in `element-web`.
+/* Path from root SCSS file (such as `light.pcss`) to `res` dir in the source tree */
+/* This value is overridden by external themes in `element-web`. */
 $res: ../../..;