diff --git a/.stylelintrc.js b/.stylelintrc.js
index 19bbc999f0f51..5616533984ae3 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -1,8 +1,8 @@
 module.exports = {
-    extends: 'stylelint-config-standard-scss', // TODO: Enable separately, as the diff will be significant
-    // TODO: Enable separately, as the diff will be significant "plugins": ["stylelint-order"],
+    extends: ['stylelint-config-standard-scss', 'stylelint-config-recess-order'],
+    plugins: ['stylelint-order'],
     rules: {
-        'no-descending-specificity': null,
+        'no-descending-specificity': null, // TODO: Enable separately, as the diff will be significant
         'number-max-precision': 5,
         'value-keyword-case': [
             'lower',
@@ -43,7 +43,6 @@ module.exports = {
         'scss/operator-no-newline-after': null, // Doesn't always play well with prettier
         'scss/at-extend-no-missing-placeholder': null,
         'scss/comment-no-empty': null,
-        // "order/order": ["dollar-variables", "custom-properties", "declarations", "rules", "at-rules"],
-        // "order/properties-order": ["width", "height"],
+        'order/order': ['dollar-variables', 'custom-properties', 'declarations', 'rules', 'at-rules'],
     },
 }
diff --git a/frontend/src/exporter/ExportedInsight/ExportedInsight.scss b/frontend/src/exporter/ExportedInsight/ExportedInsight.scss
index bb643d8f0d3a9..4a76402ab3951 100644
--- a/frontend/src/exporter/ExportedInsight/ExportedInsight.scss
+++ b/frontend/src/exporter/ExportedInsight/ExportedInsight.scss
@@ -1,21 +1,21 @@
 .ExportedInsight {
     position: relative;
-    min-width: 0;
-    max-width: 100%;
-    border-radius: var(--radius);
-    border: 1px solid var(--border);
     z-index: 3;
-    background: var(--bg-light);
     display: flex;
+    flex: 1;
     flex-direction: column;
+    min-width: 0;
+    max-width: 100%;
     height: 100%;
-    flex: 1;
+    background: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
 
     .ExportedInsight__header {
-        padding: 1rem;
-        border-bottom: 1px solid var(--border);
         display: flex;
         justify-content: space-between;
+        padding: 1rem;
+        border-bottom: 1px solid var(--border);
 
         .ExportedInsight__header__title {
             font-size: 1rem;
@@ -24,16 +24,16 @@
     }
 
     .ExportedInsight__content {
-        flex: 1;
         position: relative;
         z-index: 1;
         display: flex;
+        flex: 1;
         flex-direction: column;
 
         .LemonTable {
+            background: none;
             border: none;
             border-radius: 0;
-            background: none;
         }
 
         .InsightCard__viz {
@@ -45,13 +45,13 @@
 
     .ExportedInsight__watermark {
         position: absolute;
-        right: 0;
         top: 0;
+        right: 0;
         z-index: 2;
 
         svg {
-            font-size: 0.75rem;
             margin: 0.25rem;
+            font-size: 0.75rem;
         }
     }
 }
diff --git a/frontend/src/exporter/Exporter.scss b/frontend/src/exporter/Exporter.scss
index f861f282a2926..0493c0f1eeb17 100644
--- a/frontend/src/exporter/Exporter.scss
+++ b/frontend/src/exporter/Exporter.scss
@@ -1,10 +1,10 @@
 @import '../styles/mixins';
 
 .Exporter {
-    padding: 1rem;
-    min-height: 100vh;
     display: flex;
     flex-direction: column;
+    min-height: 100vh;
+    padding: 1rem;
 
     &--recording {
         height: 100vh;
@@ -18,9 +18,9 @@
 
         @include screen($md) {
             display: flex;
-            justify-content: space-between;
-            align-items: center;
             gap: 1rem;
+            align-items: center;
+            justify-content: space-between;
 
             .SharedDashboard-header-title {
                 max-width: 50%;
@@ -52,7 +52,7 @@ html.export-type-embed {
     overflow-y: auto;
 
     .Exporter {
-        padding: 0;
         min-height: 100vh;
+        padding: 0;
     }
 }
diff --git a/frontend/src/layout/ErrorBoundary/ErrorBoundary.scss b/frontend/src/layout/ErrorBoundary/ErrorBoundary.scss
index be9ac8887a160..2027e62542aba 100644
--- a/frontend/src/layout/ErrorBoundary/ErrorBoundary.scss
+++ b/frontend/src/layout/ErrorBoundary/ErrorBoundary.scss
@@ -1,10 +1,10 @@
 .ErrorBoundary {
-    background: var(--danger-highlight);
-    border-radius: var(--radius);
-    margin: 1.5rem;
-    padding: 0.75rem 1rem 1rem;
     min-width: 0;
     height: fit-content;
+    padding: 0.75rem 1rem 1rem;
+    margin: 1.5rem;
+    background: var(--danger-highlight);
+    border-radius: var(--radius);
 
     .main-app-content > & {
         margin: 1.5rem 0;
@@ -12,15 +12,15 @@
 
     h2 {
         margin-bottom: 0.75rem;
-        color: var(--danger);
         font-weight: 600;
+        color: var(--danger);
     }
 
     pre {
+        padding: 0.75rem 1rem;
         margin-bottom: 0.75rem;
         background: var(--border-light);
         border-radius: var(--radius);
-        padding: 0.75rem 1rem;
     }
 
     .help-button {
diff --git a/frontend/src/layout/navigation-3000/Navigation.scss b/frontend/src/layout/navigation-3000/Navigation.scss
index 74236f4e9a7fc..4cb30d68b47d4 100644
--- a/frontend/src/layout/navigation-3000/Navigation.scss
+++ b/frontend/src/layout/navigation-3000/Navigation.scss
@@ -7,8 +7,8 @@
     display: flex;
     width: 100%;
     height: 100vh;
-    background: var(--bg-3000);
     overflow: hidden;
+    background: var(--bg-3000);
 
     > main {
         flex: 1;
@@ -17,17 +17,17 @@
     }
 
     .BridgePage {
-        background: none;
         height: 100%;
         overflow: visible;
+        background: none;
     }
 }
 
 .Navigation3000__scene {
     // `relative` is for positioning of the scene-level spinner
     position: relative;
-    margin: var(--scene-padding-y) var(--scene-padding-x);
     min-height: calc(100vh - var(--breadcrumbs-height-full) - var(--scene-padding-y) * 2);
+    margin: var(--scene-padding-y) var(--scene-padding-x);
 
     &.Navigation3000__scene--raw {
         --scene-padding-y: 0px;
@@ -47,14 +47,14 @@
     border-right-width: 1px;
 
     .Navbar3000__content {
-        flex: 1;
+        z-index: var(--z-main-nav);
         display: flex;
+        flex: 1;
         flex-direction: column;
         justify-content: space-between;
         padding: 0 0.375rem;
-        background: var(--accent-3000);
         overflow-y: auto;
-        z-index: var(--z-main-nav);
+        background: var(--accent-3000);
 
         .LemonButton {
             .LemonButton__chrome {
@@ -86,15 +86,15 @@
 
     &.NavbarButton--here {
         &::after {
-            content: '•';
             position: absolute;
+            right: 0;
             bottom: 0.25rem;
             left: 0;
-            right: 0;
-            text-align: center;
             font-size: 1.25rem;
             line-height: 0.5625rem;
             color: var(--default);
+            text-align: center;
+            content: '•';
         }
 
         .LemonButton__icon {
@@ -113,12 +113,12 @@
     --sidebar-background: var(--bg-3000);
 
     position: relative;
+    box-sizing: content-box;
+    flex: 0 0 var(--sidebar-width);
 
     // This border is just for sizing, the visible border is on the content and slider
     // Hidden when the sidebar is closed
     border-right: min(1px, var(--sidebar-width)) solid transparent;
-    flex: 0 0 var(--sidebar-width);
-    box-sizing: content-box;
 
     [theme='dark'] & {
         --sidebar-background: var(--accent-3000);
@@ -131,29 +131,29 @@
     h3,
     h4,
     h5 {
-        color: var(--default);
-        text-overflow: ellipsis;
-        overflow: hidden;
         margin: 0;
+        overflow: hidden;
         line-height: inherit;
+        color: var(--default);
+        text-overflow: ellipsis;
     }
 
     h3 {
+        font-size: 0.75rem;
         font-weight: 600;
         line-height: 2rem;
-        font-size: 0.75rem;
     }
 
     h4 {
+        flex-grow: 1;
+        font-size: 0.6875rem;
         font-weight: 600;
         line-height: 1.75rem;
-        font-size: 0.6875rem;
-        flex-grow: 1;
     }
 
     h5 {
-        font-weight: 400;
         font-size: 0.75rem;
+        font-weight: 400;
         text-transform: none;
         letter-spacing: normal;
     }
@@ -163,25 +163,25 @@
     }
 
     .LemonInput--type-search {
-        transition: none;
         max-width: none;
         border-color: transparent; // Only show border on focus here
         border-radius: 0;
+        transition: none;
     }
 }
 
 .Sidebar3000__content {
     position: fixed;
     top: 0;
+    box-sizing: content-box;
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    height: 100vh;
     width: var(--sidebar-width);
+    height: 100vh;
+    overflow: hidden;
     font-size: 0.6875rem;
-    box-sizing: content-box;
     white-space: nowrap;
-    overflow: hidden;
     background: var(--sidebar-background);
 
     // Extend the border into viewport overscroll
@@ -200,58 +200,59 @@
     position: relative; // For SpinnerOverlay
     display: flex;
     flex-direction: column;
-    align-items: stretch;
     flex-grow: 1;
+    align-items: stretch;
     overflow: hidden auto;
 }
 
 .Sidebar3000__hint {
     z-index: 1;
-    flex: 0 0 var(--sidebar-row-height);
     display: flex;
+    flex: 0 0 var(--sidebar-row-height);
     align-items: center;
     justify-content: space-between;
     padding: 0 var(--sidebar-horizontal-padding);
-    background: var(--bg-3000);
-    border-top-width: 1px;
     font-weight: 500;
     user-select: none;
+    background: var(--bg-3000);
+    border-top-width: 1px;
 }
 
 .Sidebar3000__slider {
     position: absolute;
     top: 0;
-    bottom: 0;
     right: calc(
         -1 * var(--sidebar-slider-padding) - min(1px, var(--sidebar-width))
     ); // Center around the original sidebar border
 
-    width: calc(2 * var(--sidebar-slider-padding) + 1px); // The interactive area is enlarged for easier interaction
-    cursor: col-resize;
-    user-select: none; // Fixes inadvertent selection of scene text when resizing
+    bottom: 0;
     z-index: var(
         --z-notifications-popover
     ); // A bit above navbar for a nicer slider experience when the sidebar is closed
+
+    width: calc(2 * var(--sidebar-slider-padding) + 1px); // The interactive area is enlarged for easier interaction
+    cursor: col-resize;
+    user-select: none; // Fixes inadvertent selection of scene text when resizing
     &::before,
     &::after {
-        content: '';
         position: absolute;
         top: 0;
         bottom: 0;
         left: var(--sidebar-slider-padding);
         width: 1px;
         pointer-events: none;
+        content: '';
     }
 
     &::before {
-        transition: 100ms ease transform;
         background: var(--border);
+        transition: 100ms ease transform;
     }
 
     &::after {
-        transition: 100ms ease transform;
         background: var(--text-3000);
         opacity: 0;
+        transition: 100ms ease transform;
     }
 
     &:hover::after,
@@ -270,9 +271,9 @@
 }
 
 .Sidebar3000__header {
+    display: flex;
     flex: 0 0 var(--sidebar-row-height);
     gap: 0.25rem;
-    display: flex;
     align-items: center;
     padding: 0 var(--sidebar-horizontal-padding);
 }
@@ -286,11 +287,11 @@
     --accordion-header-background: var(--accent-3000);
     --accordion-inset: 0rem;
 
-    min-height: var(--accordion-row-height);
-    flex-shrink: 0;
-    flex-basis: 0;
     display: flex;
+    flex-basis: 0;
     flex-direction: column;
+    flex-shrink: 0;
+    min-height: var(--accordion-row-height);
 
     [theme='dark'] & {
         --accordion-header-background: var(--bg-3000);
@@ -328,22 +329,22 @@
     z-index: 1;
     display: flex;
     align-items: center;
-    background: var(--accordion-header-background);
     height: var(--accordion-row-height);
     padding: 0 var(--sidebar-horizontal-padding);
-    border-bottom-width: 1px;
     cursor: pointer;
     user-select: none;
+    background: var(--accordion-header-background);
+    border-bottom-width: 1px;
 
     &:hover {
         background: var(--border-3000);
     }
 
     > .LemonIcon {
-        transition: 50ms ease transform;
-        font-size: var(--accordion-arrow-size);
         flex-shrink: 0;
         margin-right: calc(var(--accordion-inset-expandable) - var(--accordion-arrow-size));
+        font-size: var(--accordion-arrow-size);
+        transition: 50ms ease transform;
 
         .Accordion[aria-expanded='true'] & {
             transform: rotate(90deg);
@@ -358,19 +359,19 @@
     --sidebar-list-item-background: var(--sidebar-background);
 
     position: relative;
-    color: var(--muted);
     line-height: 1.125rem;
-    opacity: 0.9; // Make items slightly lower contrast when not hovered
+    color: var(--muted);
+    list-style: none;
     background: var(--sidebar-list-item-background);
     border-bottom-width: 1px;
-    list-style: none;
+    opacity: 0.9; // Make items slightly lower contrast when not hovered
 
     &:hover:not([aria-disabled='true']),
     &[aria-current='page'],
     &.SidebarListItem--is-renaming {
-        opacity: 1;
-
         --sidebar-list-item-background: var(--border-3000);
+
+        opacity: 1;
     }
 
     &:hover,
@@ -389,7 +390,6 @@
 
         &.SidebarListItem--has-menu.SidebarListItem--extended {
             &::after {
-                content: '';
                 position: absolute;
 
                 // Position 1px away so that the :focus-visible border isn't overlaid
@@ -397,6 +397,7 @@
                 right: 1px;
                 bottom: 1px;
                 width: 3.5rem;
+                content: '';
                 background: linear-gradient(
                     to left,
                     var(--sidebar-list-item-background) 0%,
@@ -410,12 +411,12 @@
     &.SidebarListItem--marker-fold,
     &.SidebarListItem--marker-ribbon {
         &::before {
-            content: '';
-            display: block;
             position: absolute;
             top: 0;
             left: 0;
             z-index: 1;
+            display: block;
+            content: '';
         }
     }
 
@@ -423,8 +424,8 @@
         &::before {
             width: 0;
             height: 0;
-            border-left: var(--sidebar-list-item-fold-size) solid var(--sidebar-list-item-status-color);
             border-bottom: var(--sidebar-list-item-fold-size) solid transparent;
+            border-left: var(--sidebar-list-item-fold-size) solid var(--sidebar-list-item-status-color);
         }
     }
 
@@ -470,11 +471,11 @@
     color: inherit;
 
     &:focus-visible::after {
-        content: '';
         position: absolute;
         inset: 0 0 -1px;
-        border: 1px solid var(--default);
         pointer-events: none;
+        content: '';
+        border: 1px solid var(--default);
     }
 }
 
@@ -492,21 +493,21 @@
     background: var(--bg-light);
 
     input {
-        outline: none;
-        height: 100%;
         width: 100%;
+        height: 100%;
+        padding: 0 calc(var(--sidebar-horizontal-padding) + 2.5rem) 0 var(--sidebar-list-item-inset);
         font-size: 0.75rem;
         color: var(--default);
-        padding: 0 calc(var(--sidebar-horizontal-padding) + 2.5rem) 0 var(--sidebar-list-item-inset);
         background: none;
+        outline: none;
     }
 
     &::after {
-        content: '';
         position: absolute;
         inset: 0 0 -1px;
-        border: 1px solid var(--default);
         pointer-events: none;
+        content: '';
+        border: 1px solid var(--default);
 
         .SidebarListItem[aria-invalid='true'] & {
             border-color: var(--danger);
@@ -518,30 +519,30 @@
     position: absolute;
     top: 2rem;
     left: 0;
-    line-height: 1.25rem;
-    padding: 0 0.25rem;
     z-index: 1;
-    background: var(--danger);
+    padding: 0 0.25rem;
+    line-height: 1.25rem;
     color: #fff;
     white-space: normal;
+    background: var(--danger);
 
     &::before {
-        display: block;
-        content: '';
         position: absolute;
         top: -0.5rem;
         left: 0;
+        display: block;
+        content: '';
         border: 0.25rem solid transparent;
-        border-left-color: var(--danger);
         border-bottom-color: var(--danger);
+        border-left-color: var(--danger);
     }
 }
 
 .SidebarListItem__actions {
-    z-index: 1; // Show above .SidebarListItem::after gradient
     position: absolute;
-    right: var(--sidebar-horizontal-padding);
     top: 50%;
-    transform: translateY(-50%);
+    right: var(--sidebar-horizontal-padding);
+    z-index: 1; // Show above .SidebarListItem::after gradient
     display: none; // Only show on hover/focus or for current page
+    transform: translateY(-50%);
 }
diff --git a/frontend/src/layout/navigation-3000/components/Breadcrumbs.scss b/frontend/src/layout/navigation-3000/components/Breadcrumbs.scss
index 51124686f5429..b4ddb5907086d 100644
--- a/frontend/src/layout/navigation-3000/components/Breadcrumbs.scss
+++ b/frontend/src/layout/navigation-3000/components/Breadcrumbs.scss
@@ -1,32 +1,32 @@
 .Breadcrumbs3000 {
     --breadcrumbs-compaction-rate: 0;
 
-    z-index: var(--z-main-nav);
     position: sticky;
     top: 0;
+    z-index: var(--z-main-nav);
     display: flex;
     align-items: start;
     height: var(--breadcrumbs-height-full);
-    pointer-events: none;
     white-space: nowrap;
+    pointer-events: none;
 }
 
 .Breadcrumbs3000__content {
-    backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     width: 100%;
-    padding: 0 1rem;
     height: calc(
         var(--breadcrumbs-height-full) - (var(--breadcrumbs-height-full) - var(--breadcrumbs-height-compact)) *
             var(--breadcrumbs-compaction-rate)
     );
-    background: var(--glass-bg-3000);
-    border-bottom: 1px solid var(--glass-border-3000);
+    padding: 0 1rem;
     font-size: calc(0.75rem + 0.0625rem * var(--breadcrumbs-compaction-rate));
-    line-height: 1rem;
     font-weight: 600;
+    line-height: 1rem;
     pointer-events: auto;
+    background: var(--glass-bg-3000);
+    backdrop-filter: blur(8px);
+    border-bottom: 1px solid var(--glass-border-3000);
 }
 
 .Breadcrumbs3000__trail {
@@ -36,25 +36,25 @@
 }
 
 .Breadcrumbs3000__crumbs {
-    height: 1rem;
-    margin-top: calc(0.25rem * (1 - var(--breadcrumbs-compaction-rate)));
     display: flex;
     align-items: center;
+    height: 1rem;
+    margin-top: calc(0.25rem * (1 - var(--breadcrumbs-compaction-rate)));
     overflow: visible;
 }
 
 .Breadcrumbs3000__here {
-    visibility: var(--breadcrumbs-title-large-visibility);
     position: relative;
-    line-height: 1.2;
-    margin: 0;
+    box-sizing: content-box;
+    height: calc(1.2em * (1 - var(--breadcrumbs-compaction-rate)));
     padding: calc(0.5rem * (1 - var(--breadcrumbs-compaction-rate))) 0 0;
-    font-size: 1rem;
-    font-weight: 700;
+    margin: 0;
     overflow: hidden;
-    height: calc(1.2em * (1 - var(--breadcrumbs-compaction-rate)));
-    box-sizing: content-box;
     font-family: var(--font-sans) !important;
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.2;
+    visibility: var(--breadcrumbs-title-large-visibility);
 
     > * {
         position: absolute;
@@ -64,21 +64,21 @@
 }
 
 .Breadcrumbs3000__breadcrumb {
-    flex-shrink: 0;
     display: flex;
+    flex-shrink: 0;
     align-items: center;
+    overflow: hidden;
+    color: var(--default);
     white-space: pre;
     cursor: default;
-    color: var(--default);
-    overflow: hidden;
 
     &.Link:hover {
         color: inherit;
     }
 
     &.Breadcrumbs3000__breadcrumb--here {
-        visibility: var(--breadcrumbs-title-small-visibility);
         cursor: default;
+        visibility: var(--breadcrumbs-title-small-visibility);
 
         > * {
             opacity: 1;
@@ -96,8 +96,8 @@
     }
 
     > span {
-        transition: opacity 200ms ease;
         opacity: 0.5;
+        transition: opacity 200ms ease;
     }
 
     > .Lettermark {
@@ -105,8 +105,8 @@
     }
 
     > .LemonIcon {
-        font-size: 1rem;
         margin-left: 0.125rem;
+        font-size: 1rem;
         opacity: 0.5;
     }
 }
@@ -126,10 +126,10 @@
 }
 
 .Breadcrumbs3000__actions {
-    flex-grow: 1;
     display: flex;
-    justify-content: flex-end;
+    flex-grow: 1;
+    gap: 0.5rem;
     align-items: center;
+    justify-content: flex-end;
     margin-left: 0.5rem;
-    gap: 0.5rem;
 }
diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss
index 1620ab43cb0ab..cd72b09008c8a 100644
--- a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss
+++ b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.scss
@@ -3,30 +3,30 @@
 }
 
 .KeyboardShortcut__key {
-    align-items: center;
-    background: var(--accent-3000);
-    border-radius: 0.125rem;
-    border-width: 1px;
-    color: var(--default);
     display: inline-flex;
-    height: 1.25rem;
+    align-items: center;
     justify-content: center;
     min-width: 1.25rem;
+    height: 1.25rem;
     padding: 0 0.1875rem;
+    color: var(--default);
     text-transform: capitalize;
+    background: var(--accent-3000);
+    border-width: 1px;
+    border-radius: 0.125rem;
 
     .posthog-3000 & {
-        border-bottom-width: 2px;
-        border-color: var(--secondary-3000-button-border-hover);
-        border-radius: 0.25rem;
-        font-size: 0.625rem;
         padding: 0.125rem 0.25rem;
+        font-size: 0.625rem;
         text-transform: uppercase;
+        border-color: var(--secondary-3000-button-border-hover);
+        border-bottom-width: 2px;
+        border-radius: 0.25rem;
     }
 
     .KeyboardShortcut--muted > & {
-        background: none;
         color: var(--muted);
+        background: none;
     }
 
     .ant-tooltip & {
diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
index 30c14c722c8d4..9bfc3610cb018 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
+++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
@@ -1,16 +1,19 @@
 .SidePanel3000 {
     position: relative;
-    flex-shrink: 0;
-    box-sizing: content-box;
     z-index: var(--z-main-nav);
-    width: 3rem;
+    box-sizing: content-box;
     display: flex;
+    flex-shrink: 0;
+    width: 3rem;
     background: var(--accent-3000);
 
     &--open {
         position: relative;
-        max-width: 60%;
+
+        // NOTE: This is only a default, as the resizer will override this
+        width: min(30%, 40rem);
         min-width: 30rem;
+        max-width: 60%;
 
         @media (max-width: 1200px) {
             position: fixed;
@@ -23,9 +26,6 @@
                 box-shadow: none;
             }
         }
-
-        // NOTE: This is only a default, as the resizer will override this
-        width: min(30%, 40rem);
     }
 
     &--resizing {
@@ -37,11 +37,11 @@
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        height: 100vh;
         width: 3rem;
-        border-left-width: 1px;
+        height: 100vh;
         overflow-y: auto;
         user-select: none;
+        border-left-width: 1px;
 
         .LemonButton {
             min-height: 2.25rem !important; // Reduce minimum height
diff --git a/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss b/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss
index 6141582fea852..d2b210f4c7e7d 100644
--- a/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss
+++ b/frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss
@@ -3,17 +3,17 @@
     align-items: center;
     width: 100%;
     margin-top: 1rem;
-    cursor: default;
     overflow-x: auto;
+    cursor: default;
 }
 
 .Breadcrumbs__breadcrumb {
     display: flex;
+    gap: 0.5rem;
     align-items: center;
     font-weight: var(--font-medium);
     white-space: pre;
     user-select: none;
-    gap: 0.5rem;
 
     &--current {
         color: var(--default);
@@ -21,8 +21,8 @@
     }
 
     &--actionable {
-        cursor: pointer;
         color: var(--primary-3000);
+        cursor: pointer;
     }
 }
 
diff --git a/frontend/src/layout/navigation/SideBar/SideBar.scss b/frontend/src/layout/navigation/SideBar/SideBar.scss
index 32576a7fb18db..2dc3f8c41972f 100644
--- a/frontend/src/layout/navigation/SideBar/SideBar.scss
+++ b/frontend/src/layout/navigation/SideBar/SideBar.scss
@@ -1,30 +1,30 @@
 @import '../../../styles/mixins';
 
 .SideBar {
-    display: flex;
-    overflow: hidden;
     position: relative;
+    display: flex;
     flex: 1;
+    overflow: hidden;
 }
 
 .SideBar__content {
     display: flex;
-    flex-direction: column;
     flex: 1;
+    flex-direction: column;
     overflow: auto;
 }
 
 .SideBar__slider {
-    transition: 200ms ease margin, 200ms ease transform;
     position: absolute;
     z-index: var(--z-lemon-sidebar);
+    display: flex;
+    flex-direction: column;
     flex-shrink: 0;
-    height: 100%;
     width: 15.5rem;
+    height: 100%;
     background: var(--side);
     border-right: 1px solid var(--border);
-    display: flex;
-    flex-direction: column;
+    transition: 200ms ease margin, 200ms ease transform;
 
     .SideBar--hidden & {
         // As an optimization we use transform instead of margin on mobile,
@@ -32,48 +32,48 @@
         transform: translateX(-15.5rem);
     }
 
-    @include screen($lg) {
-        height: initial;
-        position: relative;
-
-        .SideBar--hidden & {
-            margin-left: -15.5rem;
-        }
-    }
-
     .SideBar__slider__content {
-        flex: 1;
         display: flex;
+        flex: 1;
         flex-direction: column;
-        overflow: hidden;
         justify-content: space-between;
+        overflow: hidden;
 
         > ul {
-            overflow: auto;
             padding: 1rem 0.5rem;
+            overflow: auto;
 
             li {
                 margin-top: 1px;
             }
         }
     }
+
+    @include screen($lg) {
+        position: relative;
+        height: initial;
+
+        .SideBar--hidden & {
+            margin-left: -15.5rem;
+        }
+    }
 }
 
 .SideBar__overlay {
-    z-index: var(--z-mobile-nav-overlay);
-    transition: background-color var(--modal-transition-time) ease-out,
-        backdrop-filter var(--modal-transition-time) ease-out;
-    opacity: 1;
     position: absolute;
-    height: 100%;
+    z-index: var(--z-mobile-nav-overlay);
     width: 100%;
+    height: 100%;
     background-color: var(--modal-backdrop-color);
     backdrop-filter: blur(var(--modal-backdrop-blur));
+    opacity: 1;
+    transition: background-color var(--modal-transition-time) ease-out,
+        backdrop-filter var(--modal-transition-time) ease-out;
 
     .SideBar--hidden & {
+        pointer-events: none;
         background-color: transparent;
         backdrop-filter: blur(0);
-        pointer-events: none;
     }
 
     @include screen($lg) {
@@ -82,14 +82,14 @@
 }
 
 .SideBar__heading {
+    margin-top: 1rem;
     margin-left: 0.5rem;
-    color: var(--muted);
-    line-height: 1.5rem;
     font-size: 0.75rem;
     font-weight: 600;
+    line-height: 1.5rem;
+    color: var(--muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    margin-top: 1rem;
 
     &:first-of-type {
         margin-top: 0;
@@ -98,21 +98,21 @@
 
 .ProjectSwitcher__label {
     padding: 0 0.5rem;
-    color: var(--muted);
-    line-height: 1.5rem;
     font-size: 0.75rem;
     font-weight: 600;
+    line-height: 1.5rem;
+    color: var(--muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .SideBar__side-actions {
-    max-height: calc(100vh - 20rem);
     max-width: calc(100vw - 14rem);
+    max-height: calc(100vh - 20rem);
 
     .LaunchToolbarButton {
-        padding-left: 0.5em;
         padding-right: 0.5em;
+        padding-left: 0.5em;
 
         .LemonButton__content {
             display: block;
diff --git a/frontend/src/layout/navigation/TopBar/TopBar.scss b/frontend/src/layout/navigation/TopBar/TopBar.scss
index 79815df7875f5..13a39c578c893 100644
--- a/frontend/src/layout/navigation/TopBar/TopBar.scss
+++ b/frontend/src/layout/navigation/TopBar/TopBar.scss
@@ -1,17 +1,17 @@
 @import '../../../styles/mixins';
 
 .TopBar {
-    z-index: var(--z-main-nav);
     position: sticky;
     top: 0;
+    z-index: var(--z-main-nav);
     display: flex;
+    gap: 1rem;
     align-items: center;
     justify-content: space-between;
     height: 3.5rem;
     padding: 0.5rem;
     background: var(--bg-bridge);
     border-bottom: 1px solid var(--border);
-    gap: 1rem;
 
     @include screen($sm) {
         padding: 0.5rem 1rem;
@@ -45,20 +45,20 @@
 }
 
 .TopBar__logo {
+    flex-shrink: 0;
     width: 40px;
     overflow: hidden;
-    flex-shrink: 0;
 
     svg {
         vertical-align: middle;
     }
 
     @include screen($md) {
+        display: flex;
+        align-items: center;
         width: auto;
         overflow: hidden;
         font-size: 1rem;
-        display: flex;
-        align-items: center;
     }
 }
 
@@ -71,27 +71,23 @@
 }
 
 .Announcement {
-    transition: margin 200ms ease;
-    flex-shrink: 0;
     display: flex;
-    justify-content: center;
+    flex-shrink: 0;
     align-items: center;
-    background: #000;
-    font-size: 1rem;
-    color: white;
+    justify-content: center;
     height: 3rem;
     padding: 0 1rem 0 0.5rem; // padding is larger on the right to accommodate the close button
-    text-align: center;
+    font-size: 1rem;
     font-weight: 500;
+    color: white;
+    text-align: center;
+    background: #000;
+    transition: margin 200ms ease;
 
     &.Announcement--hidden {
         margin-top: -3rem;
     }
 
-    @include screen($sm) {
-        padding: 0 1rem;
-    }
-
     p {
         margin: 0;
     }
@@ -105,15 +101,19 @@
         color: var(--brand-red);
         text-decoration: underline;
     }
+
+    @include screen($sm) {
+        padding: 0 1rem;
+    }
 }
 
 .Announcement__close {
-    display: flex;
     position: absolute;
     right: 0.5rem;
-    cursor: pointer;
-    font-size: 1.25rem;
+    display: flex;
     padding: 0.125rem;
+    font-size: 1.25rem;
+    cursor: pointer;
 
     @include screen($sm) {
         right: 1rem;
@@ -121,8 +121,8 @@
 }
 
 .SitePopover {
-    max-width: 22rem;
     min-width: 16rem;
+    max-width: 22rem;
 }
 
 .SitePopover__main-info {
@@ -130,19 +130,19 @@
 }
 
 .SitePopover__side-link {
-    color: var(--primary-3000);
     margin-left: 0.5rem;
-    font-weight: 600;
     font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--primary-3000);
     text-align: right;
 }
 
 .SitePopover__crumb {
     display: flex;
     align-items: center;
+    height: 2.5rem;
     font-size: 1.5rem;
     color: var(--primary-alt);
-    height: 2.5rem;
     cursor: pointer;
 }
 
@@ -154,12 +154,12 @@
     position: absolute;
     top: -0.375rem;
     right: -0.375rem;
+    box-sizing: content-box;
+    font-size: 0.75rem;
     color: #fff;
     background: var(--danger);
-    font-size: 0.75rem;
-    box-sizing: content-box;
-    border-radius: 100%;
     border: 2px solid var(--bg-bridge);
+    border-radius: 100%;
 }
 
 .SitePopover__section {
@@ -190,7 +190,7 @@
 }
 
 .AccessLevelIndicator {
-    font-size: 0.625rem;
     margin-left: 0.5rem;
+    font-size: 0.625rem;
     text-transform: uppercase;
 }
diff --git a/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.scss b/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.scss
index 267ed27a7a08f..e4c2e54e02d40 100644
--- a/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.scss
+++ b/frontend/src/lib/components/ActivationSidebar/ActivationSidebar.scss
@@ -1,20 +1,20 @@
 @import '../../../styles/mixins';
 
 .ActivationSideBar {
-    z-index: var(--z-lemon-sidebar);
-    transition: 200ms ease margin, 200ms ease transform;
     position: absolute;
     right: 0;
+    z-index: var(--z-lemon-sidebar);
     flex-shrink: 0;
+    width: 25rem;
     height: 100%;
+    margin-left: -25rem;
     background: var(--side);
     border-left: 1px solid var(--border);
-    width: 25rem;
-    margin-left: -25rem;
+    transition: 200ms ease margin, 200ms ease transform;
 
     @include screen($lg) {
-        height: initial;
         position: relative;
+        height: initial;
     }
 }
 
@@ -26,10 +26,10 @@
     position: sticky;
     top: 3.5rem;
     right: 0;
-    width: 100%;
-    height: calc(100vh - 3.5rem);
     display: flex;
     flex-direction: column;
+    width: 100%;
+    height: calc(100vh - 3.5rem);
     overflow: scroll;
 
     > div > ul {
diff --git a/frontend/src/lib/components/ActivityLog/ActivityLog.scss b/frontend/src/lib/components/ActivityLog/ActivityLog.scss
index 28c9964def293..420d9bf8f2235 100644
--- a/frontend/src/lib/components/ActivityLog/ActivityLog.scss
+++ b/frontend/src/lib/components/ActivityLog/ActivityLog.scss
@@ -4,17 +4,17 @@
     }
 
     .summary-card {
-        border-radius: var(--radius);
-        border: 1px solid var(--border);
         padding: 1rem;
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
 
         .taxonomic-breakdown-filter.tag-pill {
-            font-size: 0.8125rem;
             padding: 0;
+            font-size: 0.8125rem;
+            vertical-align: unset;
+            background: none;
             border: none;
             border-radius: 0;
-            background: none;
-            vertical-align: unset;
         }
 
         section:not(:last-child) {
@@ -24,12 +24,12 @@
 
     .activity-log-row {
         display: flex;
+        gap: 0.5rem;
+        max-width: 50rem;
+        padding: 0.5rem;
         margin-top: 0.5rem;
         line-height: 24px;
-        max-width: 50rem;
         overflow-wrap: anywhere;
-        padding: 0.5rem;
-        gap: 0.5rem;
 
         &.unread {
             background-color: var(--primary-highlight);
@@ -47,8 +47,8 @@
             flex-grow: 1;
 
             .highlighted-activity {
-                background-color: var(--mark);
                 display: inline;
+                background-color: var(--mark);
 
                 & > .PersonDisplay {
                     min-width: 5.5rem;
diff --git a/frontend/src/lib/components/Animation/Animation.scss b/frontend/src/lib/components/Animation/Animation.scss
index f60434aba11bb..fe37305c24b67 100644
--- a/frontend/src/lib/components/Animation/Animation.scss
+++ b/frontend/src/lib/components/Animation/Animation.scss
@@ -1,4 +1,7 @@
 .Animation {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     max-width: 300px;
 
     // A correct aspect-ratio is be passed via a style prop. This is as a fallback.
@@ -6,9 +9,6 @@
     overflow: hidden;
     opacity: 1;
     transition: 400ms ease opacity;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
 
     &.Animation--hidden {
         opacity: 0;
diff --git a/frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.scss b/frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.scss
index 51423b115d892..ef9d5ae5e237b 100644
--- a/frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.scss
+++ b/frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.scss
@@ -9,17 +9,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    width: var(--annotations-overlay-tick-interval);
+    height: 3rem;
     margin-left: calc(
         var(--annotations-overlay-tick-interval) * var(--annotations-badge-index) -
             var(--annotations-overlay-chart-area-left) + var(--annotations-overlay-first-tick-left)
     );
-    height: 3rem;
-    width: var(--annotations-overlay-tick-interval);
-    border: none;
+    appearance: none !important;
+    cursor: pointer;
     background: none;
+    border: none;
     transform: translate(-50%, -50%);
-    cursor: pointer;
-    appearance: none !important;
 
     > .LemonBadge {
         transition: transform 200ms ease; // Same as LemonBadge's transition
@@ -32,15 +32,15 @@
 .AnnotationsPopover {
     --annotations-popover-width: 30rem;
 
-    transition: left 200ms ease, opacity 100ms ease, transform 100ms ease;
     z-index: var(--z-annotation-popover) !important;
+    transition: left 200ms ease, opacity 100ms ease, transform 100ms ease;
 
     .LemonModal {
-        margin: 0;
         min-width: var(--annotations-popover-width);
         max-width: var(--annotations-popover-width);
-        box-shadow: none;
+        margin: 0;
         border: none;
+        box-shadow: none;
     }
 
     .Popover__box {
diff --git a/frontend/src/lib/components/BridgePage/BridgePage.scss b/frontend/src/lib/components/BridgePage/BridgePage.scss
index fb780e9cfe9c4..a4f2196df895a 100644
--- a/frontend/src/lib/components/BridgePage/BridgePage.scss
+++ b/frontend/src/lib/components/BridgePage/BridgePage.scss
@@ -1,26 +1,25 @@
 @import '../../../styles/mixins';
 
 .BridgePage {
-    background-color: var(--bg-bridge);
     position: relative;
     display: flex;
-    flex-direction: column;
     flex: 1;
-    overflow: hidden;
-    min-height: 100vh;
+    flex-direction: column;
     height: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background-color: var(--bg-bridge);
+    -ms-overflow-style: none;
 
     &::-webkit-scrollbar {
         width: 0 !important;
     }
 
-    -ms-overflow-style: none;
-
     .BridgePage__main {
         display: flex;
-        justify-content: center;
-        align-items: center;
         flex: 1;
+        align-items: center;
+        justify-content: center;
         padding: 1rem;
     }
 
@@ -29,8 +28,8 @@
     }
 
     .BridgePage__left-wrapper {
-        margin-right: 60px;
         display: none;
+        margin-right: 60px;
 
         @include screen($md) {
             display: block;
@@ -40,11 +39,11 @@
 
     .BridgePage__content {
         position: relative;
-        box-shadow: var(--shadow-elevation);
         width: 100%;
         padding: 2rem;
         background-color: white;
         border-radius: var(--radius);
+        box-shadow: var(--shadow-elevation);
 
         h2 {
             font-weight: bold;
@@ -54,18 +53,18 @@
 
     .BridgePage__footer {
         display: flex;
-        justify-content: center;
         gap: 10%;
+        justify-content: center;
+        width: 100%;
         margin: 1rem 0;
-        color: var(--muted);
         font-weight: 500;
-        width: 100%;
+        color: var(--muted);
     }
 
     .BridgePage__left {
         position: relative;
-        visibility: none;
         display: none;
+        visibility: none;
 
         img {
             height: 300px;
@@ -77,15 +76,17 @@
 
         .BridgePage__left__message {
             position: absolute;
-            left: 265px;
             bottom: 220px;
+            left: 265px;
             max-width: 150px;
-            background-color: var(--default);
-            border-radius: 0.75rem;
             padding: 0.5rem 0.75rem;
-            color: #fff;
             font-size: 0.8em;
             font-weight: 600;
+            color: #fff;
+            background-color: var(--default);
+            border-radius: 0.75rem;
+            opacity: 0;
+            transition-timing-function: cubic-bezier(0.455, 0.03, 0.31, 1.585);
 
             &::after {
                 position: absolute;
@@ -97,9 +98,6 @@
                 border-left-color: var(--default);
             }
 
-            opacity: 0;
-            transition-timing-function: cubic-bezier(0.455, 0.03, 0.31, 1.585);
-
             &.BridgePage__left__message--enter {
                 opacity: 0;
                 transform: translateY(50px) rotate(0deg) scale(0.5);
@@ -108,8 +106,8 @@
             &.BridgePage__left__message--enter-active,
             &.BridgePage__left__message--enter-done {
                 opacity: 1;
-                transform: translateY(0) rotate(5deg) scale(1);
                 transition: 200ms opacity, 200ms transform;
+                transform: translateY(0) rotate(5deg) scale(1);
             }
 
             @media (prefers-reduced-motion) {
@@ -149,8 +147,8 @@
     &.BridgePage--fixed-width {
         @include screen($md) {
             .BridgePage__content {
-                max-width: 400px;
                 width: 400px;
+                max-width: 400px;
             }
         }
     }
diff --git a/frontend/src/lib/components/Cards/CardMeta.scss b/frontend/src/lib/components/Cards/CardMeta.scss
index 2272b7acb2f78..faa0c643ba202 100644
--- a/frontend/src/lib/components/Cards/CardMeta.scss
+++ b/frontend/src/lib/components/Cards/CardMeta.scss
@@ -1,14 +1,14 @@
 .TextCard,
 .InsightCard {
     .handle {
+        position: absolute;
+        z-index: var(--z-raised);
         display: flex;
         align-items: flex-end;
         justify-content: center;
-        position: absolute;
         width: 100%;
         height: 100%;
         pointer-events: none;
-        z-index: var(--z-raised);
 
         &.horizontal {
             svg {
@@ -35,14 +35,14 @@
 }
 
 .CardMeta {
-    display: flex;
     position: relative;
-    flex-shrink: 0;
+    z-index: 101; // Elevate above viz
+    display: flex;
     flex-direction: column;
+    flex-shrink: 0;
     width: 100%;
     max-height: calc(100% - 2rem);
     background: var(--bg-light);
-    z-index: 101; // Elevate above viz
     border-radius: var(--radius);
 
     &--with-details {
@@ -53,19 +53,19 @@
     }
 
     h5 {
-        color: var(--muted);
-        line-height: 1.5rem;
         margin-bottom: 0;
+        line-height: 1.5rem;
+        color: var(--muted);
     }
 
     h4 {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
         height: 1.5em;
+        margin-bottom: 0.125rem;
+        overflow: hidden;
         font-size: 1rem;
         font-weight: 600;
-        margin-bottom: 0.125rem;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .CardMeta__primary {
@@ -75,8 +75,8 @@
     }
 
     .CardMeta__divider {
-        margin: 0 1rem;
         height: 1px;
+        margin: 0 1rem;
         background: var(--border);
         opacity: 0;
         transition: opacity 200ms ease;
@@ -84,30 +84,30 @@
 
     .CardMeta__details {
         position: absolute;
-        left: 0;
-        right: 0;
         top: 100%;
+        right: 0;
+        left: 0;
         max-height: 18rem;
         margin-top: -1px; // To cause overlap with the divider when closed
-        border-bottom-width: 1px;
+        overflow-y: auto;
         background: var(--bg-light);
+        border-bottom-width: 1px;
         transition: box-shadow 200ms ease, height 200ms ease, margin 200ms ease;
-        overflow-y: auto;
 
         .CardMeta__details__content {
-            pointer-events: none;
             overflow-y: auto;
+            pointer-events: none;
         }
     }
 
     &.CardMeta--details-shown {
         .CardMeta__details {
-            box-shadow: var(--shadow-elevation);
             margin-top: 0;
+            box-shadow: var(--shadow-elevation);
 
             .CardMeta__details__content {
-                opacity: 1;
                 pointer-events: all;
+                opacity: 1;
             }
         }
 
@@ -121,8 +121,9 @@
     align-self: stretch;
     width: 0.375rem;
     margin: 0 0.75rem 0 -0.25rem;
-    border-radius: var(--radius);
     background: var(--muted); // Just a fallback value in case there's some unrecognized value
+    border-radius: var(--radius);
+
     &.blue {
         background: var(--blue);
     }
@@ -154,9 +155,9 @@
 }
 
 .CardMeta__top {
-    align-self: stretch;
     display: flex;
     align-items: center;
+    align-self: stretch;
     justify-content: space-between;
     height: 2rem;
 
@@ -167,6 +168,6 @@
 
 .CardMeta__controls {
     display: flex;
-    align-items: center;
     gap: 0.25rem;
+    align-items: center;
 }
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss b/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
index b0f5f5a471e2c..810766197333c 100644
--- a/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
+++ b/frontend/src/lib/components/Cards/InsightCard/InsightCard.scss
@@ -1,15 +1,15 @@
 .InsightCard {
-    transition: border 200ms ease;
     position: relative;
-    height: 30rem;
-    min-width: 0;
-    max-width: 100%;
-    border-radius: var(--radius);
-    border: 1px solid var(--border);
     z-index: 3;
-    background: var(--bg-light);
     display: flex;
     flex-direction: column;
+    min-width: 0;
+    max-width: 100%;
+    height: 30rem;
+    background: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    transition: border 200ms ease;
 
     &--highlighted {
         border-color: var(--primary-3000);
@@ -17,16 +17,16 @@
     }
 
     .ant-alert {
-        margin: 1rem;
         width: 100%;
+        margin: 1rem;
         overflow: auto;
     }
 }
 
 .InsightCard__viz {
     position: relative;
-    flex: 1;
     display: flex;
+    flex: 1;
     flex-direction: column;
     width: 100%;
     overflow: auto;
@@ -38,15 +38,15 @@
 
     .insight-empty-state {
         height: 100%; // Fix wonkiness when SpinnerOverlay is shown
-        font-size: 0.875rem; // Reduce font size
         padding-top: 0;
         padding-bottom: 0;
+        font-size: 0.875rem; // Reduce font size
     }
 
     .LemonTable {
+        background: none;
         border: none;
         border-radius: 0;
-        background: none;
     }
 }
 
@@ -69,21 +69,21 @@
 }
 
 .InsightDetails__query {
-    margin-top: 0.25rem;
     padding: 0.5rem;
-    border-radius: var(--radius);
+    margin-top: 0.25rem;
     background: var(--side);
+    border-radius: var(--radius);
 
     .LemonRow {
-        padding-left: 0;
         padding-right: 0;
+        padding-left: 0;
     }
 }
 
 .InsightDetails__formula {
     code {
-        font-weight: 600;
         margin-left: 0.375rem;
+        font-weight: 600;
     }
 }
 
@@ -104,9 +104,9 @@
     margin-bottom: 0.5rem;
 
     .breakdown-tag {
+        padding: 0.375rem 0.75rem;
         font-size: 0.8125rem;
         line-height: 0.8125rem;
-        padding: 0.375rem 0.75rem;
     }
 }
 
@@ -124,12 +124,12 @@
     }
 
     .taxonomic-breakdown-filter.tag-pill {
-        font-size: 0.8125rem;
         padding: 0;
+        font-size: 0.8125rem;
+        vertical-align: unset;
+        background: none;
         border: none;
         border-radius: 0;
-        background: none;
-        vertical-align: unset;
     }
 }
 
@@ -142,12 +142,12 @@
     align-items: center;
     padding: 0.125rem 0.25rem;
     margin: 0 0.25rem;
-    background: var(--primary-bg-hover);
-    border-radius: var(--radius);
-    color: var(--primary-alt);
     font-size: 0.6875rem;
     font-weight: 600;
     line-height: 1rem;
+    color: var(--primary-alt);
+    background: var(--primary-bg-hover);
+    border-radius: var(--radius);
 
     &.SeriesDisplay__raw-name--action,
     &.SeriesDisplay__raw-name--event {
@@ -156,15 +156,15 @@
         &::before {
             display: inline-block;
             flex-shrink: 0;
-            text-align: center;
             width: 1rem;
-            border-radius: 0.25rem;
             margin-right: 0.25rem;
-            background: var(--primary-3000);
-            color: var(--bg-light);
-            line-height: 1rem;
             font-size: 0.625rem;
             font-weight: 700;
+            line-height: 1rem;
+            color: var(--bg-light);
+            text-align: center;
+            background: var(--primary-3000);
+            border-radius: 0.25rem;
         }
     }
 
@@ -184,6 +184,6 @@
 .SeriesDisplay__arrow {
     flex-shrink: 0;
     margin-right: 0.25rem;
-    color: var(--border-bold);
     font-size: 1.25rem;
+    color: var(--border-bold);
 }
diff --git a/frontend/src/lib/components/Cards/TextCard/TextCard.scss b/frontend/src/lib/components/Cards/TextCard/TextCard.scss
index c927ce873d37b..3c9d15a4ed4cb 100644
--- a/frontend/src/lib/components/Cards/TextCard/TextCard.scss
+++ b/frontend/src/lib/components/Cards/TextCard/TextCard.scss
@@ -7,13 +7,13 @@
     overflow-y: auto;
 
     ul {
-        list-style-type: disc;
         list-style-position: inside;
+        list-style-type: disc;
     }
 
     ol {
-        list-style-type: numeric;
         list-style-position: inside;
+        list-style-type: numeric;
     }
 
     img {
diff --git a/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss b/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss
index 4fb411ba56520..a9caf36b783da 100644
--- a/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss
+++ b/frontend/src/lib/components/CodeSnippet/CodeSnippet.scss
@@ -13,9 +13,9 @@
 
     .CodeSnippet__actions {
         position: absolute;
-        display: flex;
         top: 0.25rem;
         right: 0.25rem;
+        display: flex;
         gap: 0.5rem;
 
         .LemonButton .LemonIcon {
diff --git a/frontend/src/lib/components/CommandBar/index.scss b/frontend/src/lib/components/CommandBar/index.scss
index c8a200a7f5740..765089691b6a8 100644
--- a/frontend/src/lib/components/CommandBar/index.scss
+++ b/frontend/src/lib/components/CommandBar/index.scss
@@ -1,9 +1,9 @@
 .CommandBar__input {
-    border-color: transparent !important;
-    border-radius: 0;
     height: 2.75rem;
-    padding-left: 0.75rem;
     padding-right: 0.375rem;
+    padding-left: 0.75rem;
+    border-color: transparent !important;
+    border-radius: 0;
 }
 
 .SearchBarTab {
diff --git a/frontend/src/lib/components/CommandPalette/CommandPalette.scss b/frontend/src/lib/components/CommandPalette/CommandPalette.scss
index 55079ad3ac496..58eee64c36fb5 100644
--- a/frontend/src/lib/components/CommandPalette/CommandPalette.scss
+++ b/frontend/src/lib/components/CommandPalette/CommandPalette.scss
@@ -1,17 +1,16 @@
 .palette__overlay {
-    z-index: var(--z-command-palette);
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    z-index: var(--z-command-palette);
     display: flex;
     flex-direction: column;
     align-items: center;
+    width: 100%;
+    height: 100%;
 }
 
 .palette__box {
-    box-shadow: var(--shadow-elevation);
     position: absolute;
     top: 30%;
     display: flex;
@@ -19,29 +18,30 @@
     width: 36rem;
     max-width: 100%;
     max-height: 60%;
+    overflow: hidden;
     color: #fff;
-    border-radius: var(--radius);
     background-color: var(--bg-3000-dark);
-    overflow: hidden;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-elevation);
 
     @media (max-width: 500px) {
         top: 10%;
-        max-height: 80%;
         width: 100%;
+        max-height: 80%;
     }
 
     @media (max-height: 500px) {
         top: 0%;
-        max-height: 100%;
         max-width: 90%;
+        max-height: 100%;
     }
 }
 
 .palette__row {
     display: flex;
     align-items: center;
-    height: 4rem;
     width: 100%;
+    height: 4rem;
     padding: 0 1.875rem;
     font-size: 1rem;
     line-height: 4rem;
@@ -49,10 +49,10 @@
 
 .palette__row--small {
     height: 1.5rem;
-    line-height: 1.5rem;
     font-size: 0.75rem;
-    text-transform: uppercase;
     font-weight: bold;
+    line-height: 1.5rem;
+    text-transform: uppercase;
 }
 
 .palette__display {
@@ -62,11 +62,11 @@
 
 .palette__input {
     flex-grow: 1;
+    overflow-y: auto;
+    color: #fff;
+    background: transparent;
     border: none;
     outline: none;
-    background: transparent;
-    color: #fff;
-    overflow-y: auto;
 }
 
 .palette__results {
@@ -74,13 +74,13 @@
 }
 
 .palette__result {
-    height: 4rem;
-    width: 100%;
-    padding: 0 1.875rem;
+    position: relative;
     display: flex;
     align-items: center;
+    width: 100%;
+    height: 4rem;
+    padding: 0 1.875rem;
     font-size: 1rem;
-    position: relative;
 }
 
 .palette__result--focused {
@@ -88,12 +88,12 @@
 
     &::before,
     &::after {
-        content: '';
         position: absolute;
-        left: 0;
         top: 0;
         bottom: 0;
+        left: 0;
         width: 0.375rem;
+        content: '';
     }
 
     &::before {
@@ -114,8 +114,8 @@
 }
 
 .palette__scope {
-    background-color: rgb(255 255 255 / 10%);
     color: rgb(255 255 255 / 80%);
+    background-color: rgb(255 255 255 / 10%);
 }
 
 .palette__icon {
diff --git a/frontend/src/lib/components/CompactList/CompactList.scss b/frontend/src/lib/components/CompactList/CompactList.scss
index 6d8877a087898..a3ac6d831653c 100644
--- a/frontend/src/lib/components/CompactList/CompactList.scss
+++ b/frontend/src/lib/components/CompactList/CompactList.scss
@@ -1,31 +1,31 @@
 .CompactList {
-    border-radius: var(--radius);
-    border: 1px solid var(--border);
-    background: var(--bg-light);
     box-sizing: content-box;
     display: flex;
-    flex-direction: column;
     flex: 1;
+    flex-direction: column;
     overflow: hidden;
+    background: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
 
     .CompactList__header {
-        padding: 0.5rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
+        padding: 0.5rem;
 
         h3 {
             margin-bottom: 0;
-            font-weight: 600;
             font-size: 0.9rem;
+            font-weight: 600;
             line-height: 1.4;
         }
     }
 
     .CompactList__content {
-        overflow-y: auto;
         height: 16rem;
         padding: 0.5rem;
+        overflow-y: auto;
     }
 
     .LemonButton {
diff --git a/frontend/src/lib/components/DateDisplay/DateDisplay.scss b/frontend/src/lib/components/DateDisplay/DateDisplay.scss
index 8eca620583e94..9abaab047f9a3 100644
--- a/frontend/src/lib/components/DateDisplay/DateDisplay.scss
+++ b/frontend/src/lib/components/DateDisplay/DateDisplay.scss
@@ -1,11 +1,11 @@
 .dated-highlight {
-    color: var(--muted);
-    margin-right: 4px;
     padding: 0.125rem 0.25rem;
-    border: 1px solid var(--border-light);
+    margin-right: 4px;
+    color: var(--muted);
+    white-space: nowrap;
     background-color: var(--bg-light);
+    border: 1px solid var(--border-light);
     border-radius: var(--radius);
-    white-space: nowrap;
 }
 
 .date-display-dates {
@@ -13,7 +13,7 @@
 
     .secondary-date {
         margin-left: 2px;
-        color: var(--muted-alt);
         font-weight: normal;
+        color: var(--muted-alt);
     }
 }
diff --git a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
index 3d18b2e5b2d96..f67c035ec65e8 100644
--- a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
+++ b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
@@ -1,13 +1,13 @@
 .RollingDateRangeFilter {
     display: flex;
-    min-height: 2rem;
+    align-items: center;
     height: 2rem;
+    min-height: 2rem;
     padding: 1.25rem 0.5rem;
-    align-items: center;
-    color: var(--default);
-    font-weight: normal;
     font-size: 0.875rem;
+    font-weight: normal;
     line-height: 1.375em;
+    color: var(--default);
     cursor: pointer;
     transition: background 0.3s ease;
 
@@ -17,8 +17,8 @@
 
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
-        appearance: none;
         margin: 0;
+        appearance: none;
     }
 
     /* Firefox */
@@ -33,17 +33,17 @@
 }
 
 .RollingDateRangeFilter__counter {
+    box-sizing: border-box;
     display: flex;
-    margin: 0;
+    align-items: center;
     height: 2rem;
-    border: 1px solid var(--border);
-    border-radius: 0.25rem;
-    background-color: var(--bg-light);
-    box-sizing: border-box;
+    margin: 0;
     margin-right: 0.25rem;
     margin-left: 0.25rem;
     line-height: 1.25rem;
-    align-items: center;
+    background-color: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: 0.25rem;
 
     .LemonInput {
         width: 3rem;
@@ -57,9 +57,9 @@
     }
 
     .RollingDateRangeFilter__counter__step {
+        padding: 0.25rem;
         margin: 0 0.25rem;
         border-radius: var(--radius);
-        padding: 0.25rem;
 
         &:hover {
             background-color: var(--primary-highlight);
diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
index 4f9297fe9261b..f458e5ef69dc7 100644
--- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
+++ b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
@@ -16,9 +16,9 @@
             .definition-popover-header-row-title {
                 font-size: 0.6875rem;
                 font-weight: 600;
-                letter-spacing: 0.05em;
-                text-transform: uppercase;
                 color: var(--muted);
+                text-transform: uppercase;
+                letter-spacing: 0.05em;
             }
 
             .definition-popover-header-row-buttons {
@@ -27,8 +27,8 @@
                 font-size: 0.8125rem;
 
                 a {
-                    user-select: none;
                     margin-left: 1rem;
+                    user-select: none;
                 }
 
                 .definition-popover-disabled-button {
@@ -41,17 +41,17 @@
         .definition-popover-title {
             display: flex;
             align-items: center;
-            font-weight: 600;
-            font-size: 1.25rem;
             min-height: 1.5rem;
             margin-bottom: 0.25rem;
-            white-space: normal;
+            font-size: 1.25rem;
+            font-weight: 600;
             line-height: 1.2;
+            white-space: normal;
 
             svg.taxonomy-icon {
-                font-size: 1.5rem;
-                margin-right: 0.75rem;
                 flex-shrink: 0;
+                margin-right: 0.75rem;
+                font-size: 1.5rem;
 
                 &.taxonomy-icon-muted {
                     color: var(--muted-alt);
@@ -73,8 +73,8 @@
     }
 
     .definition-popover-description {
-        font-weight: 400;
         margin: 0.5rem 0;
+        font-weight: 400;
         overflow-wrap: break-word;
 
         &.empty {
@@ -101,12 +101,12 @@
     }
 
     .definition-popover-divider {
+        align-items: flex-start;
         width: 100%;
         margin-top: 1rem;
         margin-bottom: 1rem;
-        align-items: flex-start;
-        text-transform: uppercase;
         font-size: 0.6875rem;
+        text-transform: uppercase;
     }
 
     .definition-popover-grid {
@@ -120,9 +120,9 @@
             .definition-popover-grid-card-title {
                 font-size: 0.6875rem;
                 font-weight: 600;
-                letter-spacing: 0.05em;
-                text-transform: uppercase;
                 color: var(--muted);
+                text-transform: uppercase;
+                letter-spacing: 0.05em;
             }
 
             .definition-popover-grid-card-content {
@@ -136,8 +136,8 @@
         flex-direction: column;
 
         .label-text {
-            font-weight: 600;
             margin-right: 0.25rem;
+            font-weight: 600;
         }
 
         .definition-popover-edit-form-label {
diff --git a/frontend/src/lib/components/EditableField/EditableField.scss b/frontend/src/lib/components/EditableField/EditableField.scss
index 3bd0610a9ff90..430d422e56e70 100644
--- a/frontend/src/lib/components/EditableField/EditableField.scss
+++ b/frontend/src/lib/components/EditableField/EditableField.scss
@@ -12,9 +12,9 @@
     }
 
     .EditableField__notice {
+        margin-left: 0.5rem;
         font-size: 1.5rem;
         color: var(--muted);
-        margin-left: 0.5rem;
     }
 
     .EditableField__highlight {
@@ -25,8 +25,8 @@
         max-width: calc(100% + 0.5rem);
         padding: 0.25rem; // Some padding to give the focus outline more breathing space
         margin: -0.25rem;
-        white-space: pre-wrap;
         overflow: auto;
+        white-space: pre-wrap;
     }
 
     &.EditableField--editing .EditableField__highlight {
@@ -34,8 +34,8 @@
         align-items: flex-end;
         width: auto;
         max-width: calc(100% + 0.5rem);
-        outline: 1px solid var(--border);
         border-radius: var(--radius);
+        outline: 1px solid var(--border);
     }
 
     &.EditableField--underlined {
@@ -64,29 +64,29 @@
         position: absolute;
         top: 0;
         left: 0;
-        visibility: hidden;
         height: 0;
         overflow: scroll;
         white-space: pre;
+        visibility: hidden;
     }
 
     .EditableField__actions {
-        flex-shrink: 0;
         display: flex;
-        align-items: center;
+        flex-shrink: 0;
         gap: 0.5rem;
+        align-items: center;
         margin-left: 0.5rem;
     }
 
     input,
     textarea {
         max-width: 100%;
-        border: none;
-        background: transparent;
+        padding: 0;
         font: inherit;
         color: var(--default);
+        background: transparent;
+        border: none;
         outline: none;
-        padding: 0;
     }
 
     textarea {
diff --git a/frontend/src/lib/components/EmptyMessage/EmptyMessage.scss b/frontend/src/lib/components/EmptyMessage/EmptyMessage.scss
index beebb4188566a..0593e813b75fb 100644
--- a/frontend/src/lib/components/EmptyMessage/EmptyMessage.scss
+++ b/frontend/src/lib/components/EmptyMessage/EmptyMessage.scss
@@ -1,9 +1,9 @@
 .empty-message {
     display: flex;
     flex-direction: column;
-    height: 100%;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    height: 100%;
 
     .title {
         text-align: center;
diff --git a/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss b/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss
index c0264a96288f6..5c2ea1c991ac0 100644
--- a/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss
+++ b/frontend/src/lib/components/HTMLElementsDisplay/SelectableElement.scss
@@ -1,7 +1,7 @@
 .SelectableElement {
-    transition: background-color 200ms ease, color 200ms ease, border 200ms ease;
     border: 1px solid transparent;
     border-radius: 4px;
+    transition: background-color 200ms ease, color 200ms ease, border 200ms ease;
 
     &.SelectableElement--selected {
         background: var(--primary-3000);
diff --git a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.scss b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.scss
index a16ea6a598aae..29a642d2f7c8a 100644
--- a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.scss
+++ b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.scss
@@ -1,16 +1,16 @@
 .HedgehogBuddy {
-    z-index: var(--z-hedgehog-buddy);
     position: fixed;
-    cursor: pointer;
+    z-index: var(--z-hedgehog-buddy);
     margin: 0;
+    cursor: pointer;
 
     &::after {
         // Hack for preloading images
         position: absolute;
+        z-index: -1; // hide images
         width: 0;
         height: 0;
         overflow: hidden;
-        z-index: -1; // hide images
         content: attr(data-content);
     }
 }
diff --git a/frontend/src/lib/components/HelpButton/HelpButton.scss b/frontend/src/lib/components/HelpButton/HelpButton.scss
index 58422a1f1b48d..d2801dde9e517 100644
--- a/frontend/src/lib/components/HelpButton/HelpButton.scss
+++ b/frontend/src/lib/components/HelpButton/HelpButton.scss
@@ -1,10 +1,10 @@
 .help-button {
+    display: flex;
     align-items: center;
     height: 2.5rem;
-    cursor: pointer;
-    display: flex;
     font-size: 1.5rem;
     color: var(--primary-alt);
+    cursor: pointer;
 
     &.inline {
         display: inline-flex;
diff --git a/frontend/src/lib/components/InsightLabel/InsightLabel.scss b/frontend/src/lib/components/InsightLabel/InsightLabel.scss
index 811e8e1456c8e..3021375c9a4b7 100644
--- a/frontend/src/lib/components/InsightLabel/InsightLabel.scss
+++ b/frontend/src/lib/components/InsightLabel/InsightLabel.scss
@@ -2,17 +2,17 @@
     max-width: 100%;
 
     .value {
+        padding-right: 4px;
         margin-left: 0.3rem;
         font-size: 1.176em;
         font-weight: bold;
-        padding-right: 4px;
     }
 
     .ant-tag {
         margin-right: 0;
+        color: var(--primary-alt);
         background-color: var(--border-light);
         border: 0;
-        color: var(--primary-alt);
     }
 
     .graph-series-glyph {
@@ -22,10 +22,10 @@
     }
 
     .color-icon {
-        border-radius: 50%;
-        margin-left: 2px;
+        box-sizing: border-box;
         margin-right: 6px;
+        margin-left: 2px;
         border: 2px solid #fff;
-        box-sizing: border-box;
+        border-radius: 50%;
     }
 }
diff --git a/frontend/src/lib/components/InsightLegend/InsightLegend.scss b/frontend/src/lib/components/InsightLegend/InsightLegend.scss
index 30aab2ee059eb..977e383c4ebd7 100644
--- a/frontend/src/lib/components/InsightLegend/InsightLegend.scss
+++ b/frontend/src/lib/components/InsightLegend/InsightLegend.scss
@@ -1,7 +1,7 @@
 .InsightLegendMenu {
-    box-shadow: none !important;
-    background-color: var(--bg-light);
     max-height: 100%;
+    background-color: var(--bg-light);
+    box-shadow: none !important;
 
     &.InsightLegendMenu--in-card-view {
         max-width: 40%;
diff --git a/frontend/src/lib/components/Map/Maplibre.scss b/frontend/src/lib/components/Map/Maplibre.scss
index 2a7688a3f23af..d5e468c3860fc 100644
--- a/frontend/src/lib/components/Map/Maplibre.scss
+++ b/frontend/src/lib/components/Map/Maplibre.scss
@@ -5,8 +5,8 @@
 
 @media screen {
     .maplibregl-ctrl-attrib.maplibregl-compact {
-        background-color: var(--bg-light);
         color: var(--muted-3000);
+        background-color: var(--bg-light);
     }
 
     .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button {
diff --git a/frontend/src/lib/components/NotFound/NotFound.scss b/frontend/src/lib/components/NotFound/NotFound.scss
index 1d8d678a36110..c4cc46aadb951 100644
--- a/frontend/src/lib/components/NotFound/NotFound.scss
+++ b/frontend/src/lib/components/NotFound/NotFound.scss
@@ -1,23 +1,23 @@
 .NotFoundComponent {
-    text-align: center;
-    margin: 6rem auto;
     max-width: 600px;
+    margin: 6rem auto;
+    text-align: center;
 
     .NotFoundComponent__graphic {
-        background: url('../../../../public/not-found-astrohog.png') no-repeat center center;
-        height: 270px;
         width: 100%;
+        height: 270px;
+        background: url('../../../../public/not-found-astrohog.png') no-repeat center center;
     }
 
     .NotebookNode & {
-        background-color: var(--danger-highlight);
-        margin: 0;
-        max-width: 100%;
-        padding: 2rem;
-        flex: 1;
         display: flex;
+        flex: 1;
         flex-direction: column;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
+        max-width: 100%;
+        padding: 2rem;
+        margin: 0;
+        background-color: var(--danger-highlight);
     }
 }
diff --git a/frontend/src/lib/components/PayGateMini/PayGateMini.scss b/frontend/src/lib/components/PayGateMini/PayGateMini.scss
index a9096bd882c7e..b0a82aaa1ef90 100644
--- a/frontend/src/lib/components/PayGateMini/PayGateMini.scss
+++ b/frontend/src/lib/components/PayGateMini/PayGateMini.scss
@@ -2,18 +2,18 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: 0.75rem;
+    font-size: 0.875rem;
     text-align: center;
     background: var(--side);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 0.75rem;
-    font-size: 0.875rem;
 }
 
 .PayGateMini__icon {
     display: flex;
-    color: var(--warning);
     font-size: 2rem;
+    color: var(--warning);
 }
 
 .PayGateMini__description {
diff --git a/frontend/src/lib/components/PayGatePage/PayGatePage.scss b/frontend/src/lib/components/PayGatePage/PayGatePage.scss
index 044923eea3bbb..0df48ad4f5daf 100644
--- a/frontend/src/lib/components/PayGatePage/PayGatePage.scss
+++ b/frontend/src/lib/components/PayGatePage/PayGatePage.scss
@@ -2,13 +2,13 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    text-align: center;
     margin-top: 1rem;
+    text-align: center;
 
     h2 {
+        margin-bottom: 8px;
         font-size: 32px;
         font-weight: 600;
-        margin-bottom: 8px;
 
         .highlight {
             font-weight: bold;
@@ -21,8 +21,8 @@
     }
 
     .pay-buttons {
-        margin-top: 1rem;
         width: 320px;
         max-width: 90%;
+        margin-top: 1rem;
     }
 }
diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.scss b/frontend/src/lib/components/PropertiesTable/PropertiesTable.scss
index f530132d670a6..bdaa54eb24684 100644
--- a/frontend/src/lib/components/PropertiesTable/PropertiesTable.scss
+++ b/frontend/src/lib/components/PropertiesTable/PropertiesTable.scss
@@ -1,34 +1,34 @@
 .properties-table-key {
+    display: flex;
     min-width: 8rem;
     max-width: 24rem;
-    display: flex;
 }
 
 .property-value-type {
-    align-items: center;
-    background: var(--mid);
-    border-radius: var(--radius);
-    border: 1px solid var(--border-light);
-    color: var(--muted-alt);
-    cursor: default;
     display: flex;
-    font-size: 0.625rem;
-    font-weight: 500;
+    align-items: center;
+    width: fit-content;
     height: 1.25rem;
-    letter-spacing: 0.25px;
     padding: 0.125rem 0.25rem;
+    font-size: 0.625rem;
+    font-weight: 500;
+    color: var(--muted-alt);
     text-transform: uppercase;
+    letter-spacing: 0.25px;
     white-space: nowrap;
-    width: fit-content;
+    cursor: default;
+    background: var(--mid);
+    border: 1px solid var(--border-light);
+    border-radius: var(--radius);
 
     .posthog-3000 & {
+        padding: 0.075rem 0.25rem;
+        font-family: var(--font-mono);
+        font-size: 0.688rem;
         background: none;
-        border-radius: calc(var(--radius) * 0.75);
         border-style: solid;
         border-width: 1px;
-        font-family: var(--font-mono);
-        font-size: 0.688rem;
-        padding: 0.075rem 0.25rem;
+        border-radius: calc(var(--radius) * 0.75);
     }
 
     &:not(:first-child) {
@@ -37,10 +37,10 @@
 }
 
 .properties-table-value {
-    align-items: center;
     display: flex;
-    max-width: fit-content;
+    align-items: center;
     min-width: 12rem;
+    max-width: fit-content;
 
     .value-link {
         > * {
@@ -59,11 +59,11 @@
         cursor: pointer;
 
         .posthog-3000 & {
-            border: 1px solid transparent;
-            border-radius: calc(var(--radius) * 0.75);
-            margin-left: -0.25rem;
             padding: 0.125rem 0.25rem;
+            margin-left: -0.25rem;
             text-decoration: none;
+            border: 1px solid transparent;
+            border-radius: calc(var(--radius) * 0.75);
 
             &:hover {
                 background: var(--bg-light);
diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss b/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss
index 51a33cfeeec3e..aebb946866446 100644
--- a/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss
+++ b/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss
@@ -3,27 +3,27 @@
     gap: 0.5rem;
 
     .PropertyFilters__content {
-        flex: 1;
         display: flex;
+        flex: 1;
         flex-wrap: wrap;
         gap: 0.5rem;
         overflow: hidden;
     }
 
     .PropertyFilters__prefix {
-        color: #c4c4c4;
+        padding: 0 5px;
         font-size: 18px;
+        color: #c4c4c4;
         user-select: none;
-        padding: 0 5px;
     }
 
     .logical-row-divider {
-        font-weight: 600;
-        font-size: 12px;
-        text-transform: uppercase;
         align-items: flex-start;
         margin-top: 0.5rem;
         margin-bottom: 0;
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
 
         &::before,
         &::after {
diff --git a/frontend/src/lib/components/PropertyFilters/components/FilterRow.scss b/frontend/src/lib/components/PropertyFilters/components/FilterRow.scss
index 9de06d30018bd..8b07ffb8b56b2 100644
--- a/frontend/src/lib/components/PropertyFilters/components/FilterRow.scss
+++ b/frontend/src/lib/components/PropertyFilters/components/FilterRow.scss
@@ -4,8 +4,8 @@
 }
 
 .property-filter-row {
-    overflow: hidden;
     flex-basis: 100%;
+    overflow: hidden;
 
     &.wrap-filters {
         flex-basis: auto;
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
index 97aaa8014eee1..f4760971ff52d 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
@@ -1,22 +1,21 @@
 .PropertyFilterButton {
+    display: inline-flex;
+    gap: 0.5rem;
+    align-items: center;
     overflow: hidden;
-    border-color: transparent;
+    text-shadow: none;
     background: var(--border);
-    display: inline-flex;
+    border-color: transparent;
+    box-shadow: none;
     transition-duration: 200ms; // Shorten from Ant's 300ms
 
     &:hover,
     &:focus {
-        border-color: var(--border);
-        background: var(--border);
         color: var(--text-default);
+        background: var(--border);
+        border-color: var(--border);
     }
 
-    text-shadow: none;
-    box-shadow: none;
-    align-items: center;
-    gap: 0.5rem;
-
     > :not(.PropertyFilterButton-content) {
         flex-shrink: 0;
     }
diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyValue.scss b/frontend/src/lib/components/PropertyFilters/components/PropertyValue.scss
index 0a33bc26c1aae..6bb87aa7f7ec7 100644
--- a/frontend/src/lib/components/PropertyFilters/components/PropertyValue.scss
+++ b/frontend/src/lib/components/PropertyFilters/components/PropertyValue.scss
@@ -1,9 +1,9 @@
 .property-filters-property-value {
     min-width: 150px;
     min-height: 40px;
+    background-color: var(--bg-light);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    background-color: var(--bg-light);
 
     .ant-select-selection-search,
     .ant-select-selection-placeholder {
@@ -14,19 +14,19 @@
 
     &.ant-select-single {
         .ant-select-selector {
-            min-height: 38px !important;
             height: unset;
-            border: none !important;
+            min-height: 38px !important;
             background-color: inherit;
+            border: none !important;
         }
     }
 
     &.ant-select-multiple {
         .ant-select-selector {
             height: 100% !important;
-            border: none !important;
             padding: 5px 40px 5px 11px;
             background-color: inherit;
+            border: none !important;
 
             .ant-select-selection-search {
                 padding-left: 0 !important;
diff --git a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.scss b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.scss
index 14434cda6f019..301f2dd2fbd29 100644
--- a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.scss
+++ b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.scss
@@ -4,8 +4,8 @@
 
     &--in-dropdown {
         width: 900px;
-        max-width: 100%;
         min-width: 300px;
+        max-width: 100%;
         background: var(--bg-light);
 
         .TaxonomicPropertyFilter__row__items {
@@ -21,33 +21,33 @@
         overflow: hidden;
 
         .TaxonomicPropertyFilter__row__operator {
-            flex-shrink: 0;
-            width: 4.5rem;
             display: flex;
-            justify-content: flex-end;
+            flex-shrink: 0;
             align-items: center;
+            justify-content: flex-end;
+            width: 4.5rem;
             height: 40px; // Matches typical row height
 
             .arrow {
-                color: #c4c4c4;
+                position: relative;
                 font-size: 18px;
                 font-weight: bold;
-                position: relative;
+                color: #c4c4c4;
                 user-select: none;
             }
         }
 
         .TaxonomicPropertyFilter__row__items {
-            flex: 1;
             display: flex;
+            flex: 1;
             flex-wrap: wrap;
-            align-items: flex-start;
             gap: 0.5rem;
+            align-items: flex-start;
             overflow: hidden;
 
             > * {
-                overflow: hidden;
                 max-width: 100%;
+                overflow: hidden;
             }
         }
 
diff --git a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss
index fa5bdc421a424..e842e4aab936c 100644
--- a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss
+++ b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss
@@ -1,43 +1,43 @@
 .property-group-filters {
     .property-group {
-        background-color: var(--side);
         padding: 0.5rem;
+        background-color: var(--side);
         border-radius: 4px;
     }
 
     .property-group-and-or-separator {
-        color: var(--primary-alt);
+        position: relative;
         padding: 0.5rem 0;
         font-size: 12px;
         font-weight: 600;
-        position: relative;
+        color: var(--primary-alt);
 
         &::before {
             position: absolute;
-            left: 17px;
             top: 0;
+            left: 17px;
             width: 2px;
             height: 100%;
-            background-color: var(--border-light);
             content: ' ';
+            background-color: var(--border-light);
         }
 
         > span {
             position: relative;
-            display: inline-block;
             z-index: 1;
-            background-color: var(--bg-light);
-            padding: 0.25rem;
+            display: inline-block;
             width: 35px;
+            padding: 0.25rem;
             text-align: center;
+            background-color: var(--bg-light);
         }
     }
 }
 
 .property-group-title {
     margin-bottom: 0;
-    font-weight: 600;
     font-size: 12px;
+    font-weight: 600;
     color: black;
 }
 
@@ -50,29 +50,29 @@
     padding-bottom: 0.5rem;
 
     .condition-text {
-        font-weight: 700;
         display: flex;
+        align-items: center;
+        justify-content: center;
         width: 40px;
         height: 40px;
         margin-right: 12px;
-        justify-content: center;
-        align-items: center;
-        border-radius: 4px;
-        background-color: var(--mid);
-        color: var(--primary-alt);
         font-size: 12px;
+        font-weight: 700;
+        color: var(--primary-alt);
+        background-color: var(--mid);
+        border-radius: 4px;
 
         &.selected {
-            background-color: var(--primary-3000);
             color: #fff;
+            background-color: var(--primary-3000);
         }
     }
 
     .condition-option {
-        background-color: var(--bg-light);
         padding: 0.5rem;
-        margin-left: 0.5rem;
         margin-right: 0.5rem;
+        margin-left: 0.5rem;
+        background-color: var(--bg-light);
         border-radius: 4px;
     }
 
diff --git a/frontend/src/lib/components/PropertyKeyInfo.scss b/frontend/src/lib/components/PropertyKeyInfo.scss
index 693cc701c17ea..80872d69b5e4c 100644
--- a/frontend/src/lib/components/PropertyKeyInfo.scss
+++ b/frontend/src/lib/components/PropertyKeyInfo.scss
@@ -3,9 +3,9 @@
     display: inline-flex;
     gap: 0.25rem;
     align-items: center;
-    vertical-align: bottom;
-    overflow: hidden;
     max-width: 100%;
+    overflow: hidden;
+    vertical-align: bottom;
 }
 
 .PropertyKeyInfo__header {
@@ -14,19 +14,19 @@
 
 .PropertyKeyInfo__text {
     &.PropertyKeyInfo__text--ellipsis {
-        white-space: nowrap;
-        text-overflow: ellipsis;
         overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 }
 
 .PropertyKeyInfo__logo {
     display: inline-block;
-    height: 1rem;
+    flex-shrink: 0;
     width: 1rem;
+    height: 1rem;
     background-image: url('../../../public/posthog-icon.svg');
     background-size: cover;
-    flex-shrink: 0;
 }
 
 .PropertyKeyInfo__overlay {
diff --git a/frontend/src/lib/components/Resizer/Resizer.scss b/frontend/src/lib/components/Resizer/Resizer.scss
index 52df99380745f..25fe3fdae5d2c 100644
--- a/frontend/src/lib/components/Resizer/Resizer.scss
+++ b/frontend/src/lib/components/Resizer/Resizer.scss
@@ -4,43 +4,44 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    width: var(--resizer-width);
-    cursor: col-resize;
-    user-select: none; // Fixes inadvertent selection of scene text when resizing
     z-index: var(
         --z-notifications-popover
     ); // A bit above navbar for a nicer slider experience when the sidebar is closed
 
+    width: var(--resizer-width);
+    cursor: col-resize;
+    user-select: none; // Fixes inadvertent selection of scene text when resizing
+
     .Resizer[aria-hidden='true'] & {
         cursor: e-resize;
     }
 
     .Resizer__handle {
         position: absolute;
-        left: calc(var(--resizer-width) / 2);
         top: 0;
         bottom: 0;
+        left: calc(var(--resizer-width) / 2);
         width: 1px;
 
         &::before,
         &::after {
-            content: '';
             position: absolute;
             top: 0;
             bottom: 0;
-            width: 1px;
             box-sizing: content-box;
+            width: 1px;
+            content: '';
         }
 
         &::before {
-            transition: 100ms ease transform;
             background: var(--border);
+            transition: 100ms ease transform;
         }
 
         &::after {
-            transition: 100ms ease transform;
             background: var(--text-3000);
             opacity: 0;
+            transition: 100ms ease transform;
         }
     }
 
diff --git a/frontend/src/lib/components/SelectGradientOverflow.scss b/frontend/src/lib/components/SelectGradientOverflow.scss
index c583519744598..344855c6dd49d 100644
--- a/frontend/src/lib/components/SelectGradientOverflow.scss
+++ b/frontend/src/lib/components/SelectGradientOverflow.scss
@@ -2,11 +2,11 @@
 
 .ant-select-dropdown {
     .scrollable-above::after {
-        @extend %mixin-gradient-overlay;
-
-        background: linear-gradient(to bottom, rgb(255 255 255 / 100%), rgb(255 255 255 / 0%));
-        bottom: unset;
         top: 0;
+        bottom: unset;
+        background: linear-gradient(to bottom, rgb(255 255 255 / 100%), rgb(255 255 255 / 0%));
+
+        @extend %mixin-gradient-overlay;
     }
 
     .scrollable-below::after {
@@ -16,17 +16,17 @@
 
 .ant-select-selection-overflow-item {
     .ant-tag {
-        margin: 1px 4px 1px 0;
         display: flex;
-        align-items: center;
         flex: 0 0 auto;
-        overflow: hidden;
+        align-items: center;
         padding: 0 4px 0 8px;
+        margin: 1px 4px 1px 0;
+        overflow: hidden;
         font-size: inherit;
         line-height: inherit;
+        user-select: none;
         background: #f5f5f5;
         border: 1px solid #f0f0f0;
-        user-select: none;
 
         .label {
             overflow: hidden;
@@ -34,8 +34,8 @@
         }
 
         .btn-close {
-            font-size: 10px;
             margin-left: 4px;
+            font-size: 10px;
 
             .anticon-close {
                 color: rgb(0 0 0 / 45%);
diff --git a/frontend/src/lib/components/Sharing/SharingModal.scss b/frontend/src/lib/components/Sharing/SharingModal.scss
index 67fd85b547634..fc7ad30d53ae9 100644
--- a/frontend/src/lib/components/Sharing/SharingModal.scss
+++ b/frontend/src/lib/components/Sharing/SharingModal.scss
@@ -1,4 +1,4 @@
 .SharingPreview {
-    background-color: var(--mid);
     padding: 0.5rem;
+    background-color: var(--mid);
 }
diff --git a/frontend/src/lib/components/StickyView/StickyView.scss b/frontend/src/lib/components/StickyView/StickyView.scss
index 5161d360b186b..22d93acb82ee9 100644
--- a/frontend/src/lib/components/StickyView/StickyView.scss
+++ b/frontend/src/lib/components/StickyView/StickyView.scss
@@ -3,7 +3,7 @@
 
     .StickyView__sticker {
         display: flex;
-        flex-direction: column;
         flex: 1;
+        flex-direction: column;
     }
 }
diff --git a/frontend/src/lib/components/TZLabel/index.scss b/frontend/src/lib/components/TZLabel/index.scss
index cdfb2645b50d6..a864a13755ba4 100644
--- a/frontend/src/lib/components/TZLabel/index.scss
+++ b/frontend/src/lib/components/TZLabel/index.scss
@@ -4,16 +4,16 @@
         margin-top: 0.5rem;
 
         > :nth-child(1) {
+            margin-right: 6px;
             font-weight: bold;
             color: var(--primary-alt);
-            margin-right: 6px;
         }
 
         > :nth-child(2) {
-            color: var(--muted);
-            margin-right: 16px;
             flex-grow: 1;
+            margin-right: 16px;
             font-style: italic;
+            color: var(--muted);
         }
 
         > :nth-child(3) {
diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss
index 97c2e739162ac..5c4d5c0d5fedc 100644
--- a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss
+++ b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.scss
@@ -1,12 +1,12 @@
 .taxonomic-infinite-list {
-    min-height: 200px;
     flex-grow: 1;
+    min-height: 200px;
 
     &.empty-infinite-list {
-        width: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
+        width: 100%;
 
         .no-infinite-results {
             color: #666;
@@ -17,8 +17,8 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        color: var(--default);
         padding: 4px 12px;
+        color: var(--default);
         cursor: pointer;
         border: none;
 
@@ -28,16 +28,16 @@
             user-select: none;
 
             .taxonomic-list-row-contents-icon {
-                min-width: 30px;
                 display: flex;
-                font-size: 1.25rem;
                 justify-content: center;
+                min-width: 30px;
                 margin-right: 4px;
                 margin-left: -4px;
+                font-size: 1.25rem;
 
                 svg.taxonomy-icon {
-                    vertical-align: middle;
                     flex-shrink: 0;
+                    vertical-align: middle;
 
                     &.taxonomy-icon-muted {
                         color: var(--muted-alt);
@@ -59,9 +59,9 @@
 
             & > span {
                 max-width: 100%;
-                white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
+                white-space: nowrap;
             }
         }
 
diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss
index 108cbcb552950..447c4aa54e5ac 100644
--- a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss
+++ b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.scss
@@ -1,9 +1,9 @@
 .taxonomic-filter {
+    display: flex;
+    flex-direction: column;
     width: 550px;
     max-width: calc(100vw - 40px);
     background: var(--bg-light);
-    display: flex;
-    flex-direction: column;
 
     &.force-minimum-width {
         min-width: 300px;
@@ -17,15 +17,15 @@
 
     .taxonomic-group-title {
         display: flex;
-        width: 100%;
         align-items: stretch;
-        color: var(--muted);
-        text-transform: uppercase;
-        font-size: 12px;
-        line-height: 12px;
+        width: 100%;
         padding-top: 10px;
         padding-left: 10px;
+        font-size: 12px;
         font-weight: 600;
+        line-height: 12px;
+        color: var(--muted);
+        text-transform: uppercase;
 
         &.with-border {
             border-top: 1px solid var(--border-light);
@@ -33,22 +33,22 @@
     }
 
     .taxonomic-pills {
+        padding-left: 10px;
         margin-top: 8px;
         margin-bottom: 8px;
-        padding-left: 10px;
 
         .ant-tag {
-            transition: none;
             margin-right: 2px;
             margin-bottom: 2px;
-            cursor: pointer;
             color: var(--link);
+            cursor: pointer;
             background: var(--side);
             border-color: var(--side);
+            transition: none;
 
             .posthog-3000 & {
-                color: var(--default);
                 font-weight: 500;
+                color: var(--default);
 
                 &:not(.taxonomic-pill-active) {
                     opacity: 0.7;
diff --git a/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss b/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss
index 80a1630463217..d78733b237d4a 100644
--- a/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss
+++ b/frontend/src/lib/components/TimelineSeekbar/TimelineSeekbar.scss
@@ -8,8 +8,8 @@
 
 .TimelineSeekbar__meta {
     display: flex;
-    justify-content: space-between;
     gap: 0.5rem;
+    justify-content: space-between;
 }
 
 .TimelineSeekbar__note {
@@ -22,12 +22,12 @@
 .TimelineSeekbar__current {
     width: fit-content;
     padding: 0 0.25rem;
-    border-radius: var(--radius);
-    background: var(--primary-3000);
-    color: var(--bg-light);
-    line-height: 1.25rem;
     font-size: 0.75rem;
     font-weight: 500;
+    line-height: 1.25rem;
+    color: var(--bg-light);
+    background: var(--primary-3000);
+    border-radius: var(--radius);
 
     &::selection {
         background: var(--primary-3000-hover); // Default selection background is invisible on primary
@@ -45,25 +45,26 @@
 }
 
 .TimelineSeekbar__points {
-    display: flex;
-    height: 100%;
     position: relative;
     top: 0;
     left: calc(var(--timeline-seekbar-thickness) * 2);
+    display: flex;
     width: calc(100% - var(--timeline-seekbar-arrow-width) - var(--timeline-seekbar-thickness) * 3 - 1.25rem);
+    height: 100%;
 
     .LemonBadge:not(.LemonBadge--active) {
+        background-clip: padding-box;
+
         // Connect each badge to the line rightward to signal the direction in which the badge is applicable
         border-right-color: transparent;
-        background-clip: padding-box;
     }
 }
 
 .TimelineSeekbar__section {
     position: absolute;
-    cursor: pointer;
     left: calc(var(--timeline-seekbar-section-progress-current) - var(--timeline-seekbar-thickness));
     width: var(--timeline-seekbar-section-progress-next);
+    cursor: pointer;
     border-left: var(--timeline-seekbar-thickness) solid var(--bg-light);
 
     &:last-child {
@@ -75,8 +76,8 @@
     position: absolute;
     top: calc(50% - var(--timeline-seekbar-thickness) / 2);
     left: 0;
-    height: var(--timeline-seekbar-thickness);
     width: calc(100% - var(--timeline-seekbar-arrow-width));
+    height: var(--timeline-seekbar-thickness);
     background: var(--primary-3000);
 }
 
@@ -87,10 +88,10 @@
     height: 1.25rem;
 
     &::before {
-        content: '';
         display: block;
-        margin: calc(var(--timeline-seekbar-thickness) + 0.125rem) 0;
         height: var(--timeline-seekbar-arrow-height);
+        margin: calc(var(--timeline-seekbar-thickness) + 0.125rem) 0;
+        content: '';
         background: var(--primary-3000);
     }
 }
diff --git a/frontend/src/lib/components/UniversalSearch/UniversalSearch.scss b/frontend/src/lib/components/UniversalSearch/UniversalSearch.scss
index 64f84a90265df..f327ff82c96be 100644
--- a/frontend/src/lib/components/UniversalSearch/UniversalSearch.scss
+++ b/frontend/src/lib/components/UniversalSearch/UniversalSearch.scss
@@ -17,9 +17,9 @@
 }
 
 .universal-search-popover {
-    background: var(--bg-light);
     display: flex;
     flex-direction: column;
+    background: var(--bg-light);
 
     &.force-minimum-width {
         min-width: 300px;
diff --git a/frontend/src/lib/components/UserActivityIndicator/UserActivityIndicator.scss b/frontend/src/lib/components/UserActivityIndicator/UserActivityIndicator.scss
index c1882261dd97c..4eed076f46ca4 100644
--- a/frontend/src/lib/components/UserActivityIndicator/UserActivityIndicator.scss
+++ b/frontend/src/lib/components/UserActivityIndicator/UserActivityIndicator.scss
@@ -1,7 +1,7 @@
 .UserActivityIndicator {
     display: flex;
     align-items: center;
+    overflow-x: auto;
     font-size: 0.8125rem;
     white-space: nowrap;
-    overflow-x: auto;
 }
diff --git a/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss b/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss
index b01a0c24d3f18..2d846d456cc08 100644
--- a/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss
+++ b/frontend/src/lib/lemon-ui/LemonActionableTooltip/LemonActionableTooltip.scss
@@ -22,11 +22,11 @@
     }
 
     .LemonActionableTooltip__icon {
-        color: var(--primary-3000);
         display: flex;
         align-items: center;
         width: 1.5rem;
         height: 1.5rem;
+        color: var(--primary-3000);
 
         > svg {
             width: 100%;
@@ -48,8 +48,8 @@
 
     .LemonActionableTooltip__url-buttons {
         display: flex;
-        width: 100%;
         flex-direction: column;
+        width: 100%;
 
         > * + * {
             margin-top: 0.25rem;
@@ -58,8 +58,8 @@
 
     .LemonActionableTooltip__action-buttons {
         display: flex;
-        width: 100%;
         flex-direction: column;
+        width: 100%;
 
         > * + * {
             margin-top: 0.25rem;
@@ -67,9 +67,9 @@
     }
 
     .LemonActionableTooltip__navigation {
-        color: var(--muted);
         display: flex;
         align-items: center;
+        color: var(--muted);
 
         > * + * {
             margin-left: 0.25rem;
diff --git a/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss b/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss
index adc91cce935f8..84e4908b06cc7 100644
--- a/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss
+++ b/frontend/src/lib/lemon-ui/LemonBadge/LemonBadge.scss
@@ -5,27 +5,27 @@
     --lemon-badge-position-offset: 0.5rem;
     --lemon-badge-border-width: 0.125rem;
 
-    flex-shrink: 0;
+    position: absolute;
+    z-index: 1; // Make sure it is at least in front of non-absolute items
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    color: var(--bg-light);
-    border: var(--lemon-badge-border-width) solid var(--bg-light);
-    background: var(--lemon-badge-color);
     width: fit-content;
     min-width: var(--lemon-badge-size); // This is a minimum to accomodate multiple digits
     height: var(--lemon-badge-size);
-    font-size: var(--lemon-badge-font-size);
-    line-height: var(--lemon-badge-size);
 
     // Just enough so the overall size is unaffected with a single digit (i.e. badge stays round)
     padding: calc(var(--lemon-badge-size) / 8);
-    border-radius: calc(var(--lemon-badge-size) / 2);
-    user-select: none;
-    pointer-events: none;
-    position: absolute;
+    font-size: var(--lemon-badge-font-size);
     font-weight: 700;
-    z-index: 1; // Make sure it is at least in front of non-absolute items
+    line-height: var(--lemon-badge-size);
+    color: var(--bg-light);
+    pointer-events: none;
+    user-select: none;
+    background: var(--lemon-badge-color);
+    border: var(--lemon-badge-border-width) solid var(--bg-light);
+    border-radius: calc(var(--lemon-badge-size) / 2);
 
     > * {
         // For non-text content, make sure that content fills up the whole badge, and that the badge stays round
@@ -70,8 +70,8 @@
     }
 
     &.LemonBadge--position-bottom-right {
-        bottom: calc(var(--lemon-badge-position-offset) * -1);
         right: calc(var(--lemon-badge-position-offset) * -1);
+        bottom: calc(var(--lemon-badge-position-offset) * -1);
     }
 
     &.LemonBadge--small {
@@ -85,19 +85,19 @@
     }
 
     &.LemonBadge--dot {
-        min-width: 0;
         width: calc(var(--lemon-badge-size) * 0.5 + var(--lemon-badge-border-width));
+        min-width: 0;
         height: calc(var(--lemon-badge-size) * 0.5 + var(--lemon-badge-border-width));
     }
 
     &.LemonBadge--active {
-        outline: calc(var(--lemon-badge-font-size) / 5) solid var(--lemon-badge-color);
         z-index: var(--z-raised); // In croweded badge situation, show active ones above the rest
+        outline: calc(var(--lemon-badge-font-size) / 5) solid var(--lemon-badge-color);
     }
 
     .posthog-3000 & {
-        border-color: var(--accent-3000);
         background: var(--muted);
+        border-color: var(--accent-3000);
 
         &.LemonBadge--small {
             --lemon-badge-size: 1.125rem;
@@ -105,24 +105,24 @@
     }
 
     &.LemonBadge--enter {
-        transform: scale(0.5);
         opacity: 0;
+        transform: scale(0.5);
     }
 
     &.LemonBadge--enter-active {
-        transform: scale(1);
         opacity: 1;
         transition: all 200ms ease-out;
+        transform: scale(1);
     }
 
     &.LemonBadge--exit {
-        transform: scale(1);
         opacity: 1;
+        transform: scale(1);
     }
 
     &.LemonBadge--exit-active {
-        transform: scale(0.5);
         opacity: 0;
         transition: all 200ms ease-in;
+        transform: scale(0.5);
     }
 }
diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
index 9a948c4f24dd3..b57eca87452ef 100644
--- a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
+++ b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
@@ -1,32 +1,32 @@
 .LemonBanner {
-    align-items: center;
-    border-radius: var(--radius);
-    border: solid 1px var(--border-3000);
-    color: var(--primary-alt);
     display: flex;
-    font-weight: 500;
     gap: 0.5rem;
+    align-items: center;
     min-height: 3rem;
     padding: 0.5rem 0.75rem;
+    font-weight: 500;
+    color: var(--primary-alt);
     text-align: left;
+    border: solid 1px var(--border-3000);
+    border-radius: var(--radius);
 
     &.LemonBanner--info {
         background-color: var(--primary-alt-highlight);
     }
 
     &.LemonBanner--warning {
-        background-color: var(--warning-highlight);
         color: var(--warning-dark);
+        background-color: var(--warning-highlight);
     }
 
     &.LemonBanner--error {
-        background-color: var(--danger-highlight);
         color: var(--danger);
+        background-color: var(--danger-highlight);
     }
 
     &.LemonBanner--success {
-        background-color: var(--success-highlight);
         color: var(--success-dark);
+        background-color: var(--success-highlight);
     }
 
     p {
@@ -34,8 +34,8 @@
     }
 
     > .LemonIcon {
-        line-height: 0;
         flex-shrink: 0;
         font-size: 1.5rem;
+        line-height: 0;
     }
 }
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
index 2a23964cfc0f9..22c4440b2f516 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss
@@ -1,31 +1,31 @@
 .LemonButton,
 .Link.LemonButton {
-    // Make sure we override .Link's styles where needed, e.g. padding
-    align-items: center;
-    appearance: none !important; // Important as this gets overridden by Ant styles...
-    background: none;
-    border-radius: var(--radius);
-    border: none;
-    cursor: pointer;
+    position: relative;
     display: flex;
     flex-direction: row;
-
-    .posthog-3000 & {
-        font-family: var(--font-title);
-    }
-
     flex-shrink: 0;
-    font-size: 0.875rem;
-    font-weight: 500;
     gap: 0.5rem;
+
+    // Make sure we override .Link's styles where needed, e.g. padding
+    align-items: center;
     justify-content: flex-start;
-    line-height: 1.5rem;
     padding: 0.25rem 0.75rem;
-    position: relative;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.5rem;
     text-align: left;
+    appearance: none !important; // Important as this gets overridden by Ant styles...
+    cursor: pointer;
+    user-select: none;
+    background: none;
+    border: none;
+    border-radius: var(--radius);
     transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease,
         transform 100ms ease;
-    user-select: none;
+
+    .posthog-3000 & {
+        font-family: var(--font-title);
+    }
 
     .font-normal {
         font-family: var(--font-sans);
@@ -38,20 +38,19 @@
     }
 
     .LemonButton__content {
-        flex: 1;
-        line-height: initial;
         display: flex;
+        flex: 1;
         align-items: center;
+        line-height: initial;
     }
 
     &[aria-disabled='true']:not(.LemonButton--loading) {
         cursor: not-allowed;
+        opacity: var(--opacity-disabled);
 
         > span {
             cursor: not-allowed;
         }
-
-        opacity: var(--opacity-disabled);
     }
 
     &.LemonButton--loading {
@@ -60,8 +59,8 @@
 
     &.LemonButton--full-width {
         width: 100%;
-        padding-left: 0.5rem;
         padding-right: 0.5rem;
+        padding-left: 0.5rem;
 
         > span,
         .LemonButton__content {
@@ -85,8 +84,8 @@
     }
 
     &.LemonButton--no-content {
-        padding-left: 0.5rem;
         padding-right: 0.5rem;
+        padding-left: 0.5rem;
     }
 
     &.LemonButton--xsmall {
@@ -127,9 +126,9 @@
     }
 
     &.LemonButton--no-padding {
-        min-height: 0;
-        height: auto;
         width: auto;
+        height: auto;
+        min-height: 0;
         padding: 0;
 
         &.LemonButton--full-width {
@@ -139,10 +138,25 @@
 
     .LemonButton__icon {
         display: flex;
-        font-size: 1.5rem;
         flex-shrink: 0;
-        transition: color 200ms ease;
         place-items: center center;
+        font-size: 1.5rem;
+        transition: color 200ms ease;
+    }
+
+    .ant-tooltip & {
+        // Buttons have an overriden style in tooltips, as they are always dark
+        &:hover {
+            background: rgb(255 255 255 / 15%) !important;
+        }
+
+        &:active {
+            background: rgb(255 255 255 / 20%) !important;
+        }
+
+        .LemonButton__icon {
+            color: #fff !important;
+        }
     }
 
     @each $status in ('primary', 'danger', 'primary-alt', 'muted') {
@@ -163,21 +177,6 @@
             }
         }
     }
-
-    .ant-tooltip & {
-        // Buttons have an overriden style in tooltips, as they are always dark
-        &:hover {
-            background: rgb(255 255 255 / 15%) !important;
-        }
-
-        &:active {
-            background: rgb(255 255 255 / 20%) !important;
-        }
-
-        .LemonButton__icon {
-            color: #fff !important;
-        }
-    }
 }
 
 .LemonButtonWithSideAction {
@@ -196,8 +195,8 @@
     position: absolute;
     top: 50%;
     right: 0.5rem;
-    transform: translateY(-50%);
     background: none;
+    transform: translateY(-50%);
 
     .LemonButtonWithSideAction--small & {
         right: 0.375rem;
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss
index 70fa6ad667194..763d96d78e5ae 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButton3000.scss
@@ -3,37 +3,37 @@
     --transition: opacity 200ms ease, transform 200ms ease;
 
     .LemonButton {
-        border-width: 0;
-        border-style: solid;
-        border-color: transparent;
+        position: relative;
         min-height: 2.125rem;
         padding: 0;
-        position: relative;
+        cursor: pointer;
+        border-color: transparent;
+        border-style: solid;
+        border-width: 0;
+        border-radius: 6px;
         outline: none;
         transition: var(--transition);
-        border-radius: 6px;
-        cursor: pointer;
 
         .LemonButton__chrome {
-            border-radius: 6px;
-            font-size: 0.875rem;
+            position: relative;
             display: flex;
             flex-direction: row;
             flex-shrink: 0;
+            gap: 0.5rem;
             align-items: center;
             justify-content: flex-start;
-            background: none;
-            border-style: solid;
-            border-color: transparent;
+            width: 100%;
+            min-height: 2.125rem;
+            padding: 0.25rem 0.75rem;
+            font-size: 0.875rem;
             font-weight: 500;
-            gap: 0.5rem;
             line-height: 1.5rem;
-            min-height: 2.125rem;
-            position: relative;
             text-align: left;
+            background: none;
+            border-color: transparent;
+            border-style: solid;
+            border-radius: 6px;
             transition: var(--transition);
-            padding: 0.25rem 0.75rem;
-            width: 100%;
 
             .LemonButton__icon {
                 opacity: 0.5;
@@ -42,8 +42,8 @@
 
         &.LemonButton--full-width {
             .LemonButton__chrome {
-                padding-left: 0.5rem;
                 padding-right: 0.5rem;
+                padding-left: 0.5rem;
             }
         }
 
@@ -119,23 +119,23 @@
         }
 
         &.LemonButton--no-padding {
-            padding: 0;
             min-height: 0;
+            padding: 0;
 
             .LemonButton__chrome {
-                padding: 0;
                 min-height: 0;
+                padding: 0;
             }
         }
 
         &:not(.LemonButton--tertiary) {
-            border-width: 1px;
             padding-bottom: 1px;
+            border-width: 1px;
 
             .LemonButton__chrome {
-                border-width: 1px;
-                margin: 0 -1px;
                 top: -1px;
+                margin: 0 -1px;
+                border-width: 1px;
             }
 
             &:not([aria-disabled='true']):hover,
@@ -157,10 +157,10 @@
             border-color: var(--primary-3000-frame-border);
 
             .LemonButton__chrome {
+                font-weight: 600;
+                color: #111;
                 background: var(--primary-3000-button-bg);
                 border-color: var(--primary-3000-button-border);
-                color: #111;
-                font-weight: 600;
 
                 &:not([aria-disabled='true']):hover,
                 &.LemonButton--active {
@@ -204,9 +204,9 @@
                 border-color: transparent;
 
                 .LemonButton__chrome {
+                    color: var(--muted);
                     background-color: transparent;
                     border-color: transparent;
-                    color: var(--muted);
                 }
             }
         }
@@ -226,13 +226,13 @@
     }
 
     .LemonButtonWithSideAction__spacer {
-        color: var(--muted);
-        height: 1.25rem;
         width: 1.25rem;
+        height: 1.25rem;
+        color: var(--muted);
 
         &.LemonButtonWithSideAction__spacer--divider {
-            margin-left: 0.25rem;
             padding: 0;
+            margin-left: 0.25rem;
         }
     }
 
@@ -242,21 +242,21 @@
         right: 1px;
         bottom: 4px;
         width: 1.625rem;
-        transform: none;
         border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
+        transform: none;
 
         .LemonButton {
-            background: none !important;
-            border: none !important;
+            height: 100%;
             padding-bottom: 0 !important;
             margin: 0 auto !important;
-            height: 100%;
+            background: none !important;
+            border: none !important;
         }
 
         .LemonButton__chrome {
-            margin: auto !important;
             top: 0 !important;
+            margin: auto !important;
             background: none !important;
             border: none !important;
         }
diff --git a/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss b/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss
index abe0e6cc3e802..1e1cbf14a643b 100644
--- a/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss
+++ b/frontend/src/lib/lemon-ui/LemonButton/LemonButtonLegacy.scss
@@ -9,10 +9,10 @@ body:not(.posthog-3000) {
         }
 
         &.LemonButton--xsmall {
-            padding: 0.125rem 0.375rem;
-
             --lemon-button-height: 1.5rem;
 
+            padding: 0.125rem 0.375rem;
+
             &.LemonButton--has-icon:not(.LemonButton--no-padding),
             &.LemonButton--no-content:not(.LemonButton--no-padding) {
                 padding-left: 0.25rem;
@@ -62,12 +62,12 @@ body:not(.posthog-3000) {
         }
 
         &.LemonButton--no-padding {
-            min-height: 0;
-            height: auto;
             width: auto;
+            height: auto;
+            min-height: 0;
             padding: 0;
-            padding-left: 0;
             padding-right: 0;
+            padding-left: 0;
 
             &.LemonButton--full-width {
                 width: 100%;
@@ -81,8 +81,8 @@ body:not(.posthog-3000) {
 
             &:not([aria-disabled='true']):hover,
             &.LemonButton--active {
-                background: var(--primary-highlight);
                 color: inherit; // Avoid links being colored on hover
+                background: var(--primary-highlight);
             }
 
             &.LemonButton--active {
@@ -119,13 +119,13 @@ body:not(.posthog-3000) {
 
         @each $status in ('primary', 'danger', 'primary-alt', 'muted') {
             &.LemonButton--status-#{$status} {
+                color: var(--#{$status}-3000, var(--#{$status}, var(--primary)));
+
                 &:not([aria-disabled='true']):hover,
                 &.LemonButton--active {
                     background: var(--#{$status}-highlight, var(--primary-highlight));
                 }
 
-                color: var(--#{$status}-3000, var(--#{$status}, var(--primary)));
-
                 .LemonButton__icon {
                     color: var(--#{$status}-3000, var(--#{$status}));
                 }
@@ -186,12 +186,12 @@ body:not(.posthog-3000) {
     }
 
     .LemonButtonWithSideAction__spacer {
-        height: 1.5rem;
         width: 1.5rem;
+        height: 1.5rem;
 
         &.LemonButtonWithSideAction__spacer--divider {
-            opacity: 0.17;
             padding-left: 0.375rem;
+            opacity: 0.17;
         }
 
         .LemonButton--small & {
diff --git a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss
index 8df6f4fc1166c..0780aadb3a745 100644
--- a/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss
+++ b/frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss
@@ -38,11 +38,11 @@
                 position: absolute;
                 bottom: 5px;
                 left: calc(50% - var(--lemon-calendar-today-radius));
-                content: '';
-                border-radius: 100%;
                 width: calc(var(--lemon-calendar-today-radius) * 2);
                 height: calc(var(--lemon-calendar-today-radius) * 2);
+                content: '';
                 background: currentColor;
+                border-radius: 100%;
             }
         }
     }
diff --git a/frontend/src/lib/lemon-ui/LemonCard/LemonCard.scss b/frontend/src/lib/lemon-ui/LemonCard/LemonCard.scss
index f5fd7cf2493a4..93536a63df521 100644
--- a/frontend/src/lib/lemon-ui/LemonCard/LemonCard.scss
+++ b/frontend/src/lib/lemon-ui/LemonCard/LemonCard.scss
@@ -3,8 +3,8 @@
 
     &.LemonCard--hoverEffect {
         &:hover {
-            transform: scale(1.01);
             box-shadow: var(--shadow-elevation);
+            transform: scale(1.01);
         }
     }
 }
diff --git a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
index 135c3c2a43e24..fd673586aecf1 100644
--- a/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
+++ b/frontend/src/lib/lemon-ui/LemonCheckbox/LemonCheckbox.scss
@@ -1,51 +1,51 @@
 .LemonCheckbox {
     display: flex;
+    align-items: center;
     width: fit-content;
     font-weight: 500;
-    align-items: center;
     line-height: 1.5rem;
 
     .LemonCheckbox__input {
-        appearance: none !important;
         width: 0 !important; // Some ant-form styles override this so we mark as important
         height: 0 !important;
+        appearance: none !important;
     }
 
     label {
         --tick-length: 12.73; // Approximation of tick length, which is (3 + 6) * sqrt(2)
         --box-color: var(--primary);
 
-        .posthog-3000 & {
-            --box-color: var(--primary-3000);
-        }
-
         display: flex;
-        align-items: center;
-        cursor: pointer;
         gap: 0.5rem;
+        align-items: center;
         min-height: 1.5rem;
+        cursor: pointer;
+
+        .posthog-3000 & {
+            --box-color: var(--primary-3000);
+        }
 
         > .LemonCheckbox__box {
+            flex-shrink: 0;
             width: 1rem;
             height: 1rem;
-            transition: border 200ms ease, background 200ms ease;
             background: var(--bg-light);
             border: 1.5px solid var(--border-bold);
             border-radius: 3px; // Intentionally a bit smaller than --radius
-            flex-shrink: 0;
+            transition: border 200ms ease, background 200ms ease;
 
             path {
-                transition: stroke-dashoffset 200ms ease;
                 stroke: var(--bg-light);
                 stroke-dasharray: var(--tick-length);
                 stroke-dashoffset: var(--tick-length);
+                transition: stroke-dashoffset 200ms ease;
             }
         }
     }
 
     &.LemonCheckbox--disabled label {
-        cursor: not-allowed;
         color: var(--muted);
+        cursor: not-allowed;
     }
 
     &.LemonCheckbox--full-width {
@@ -90,17 +90,17 @@
 
     &.LemonCheckbox--bordered {
         label {
+            min-height: 2.5rem;
             padding: 0 0.75rem;
-            border-radius: var(--radius);
-            border: 1px solid var(--border);
             background: var(--bg-light);
-            min-height: 2.5rem;
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
         }
 
         &.LemonCheckbox--small {
             label {
-                padding: 0 0.5rem;
                 min-height: 2rem;
+                padding: 0 0.5rem;
             }
         }
 
diff --git a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss
index 6dd509e146f97..72c00bb67513a 100644
--- a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss
+++ b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss
@@ -2,10 +2,10 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
+    overflow: hidden;
+    background: var(--bg-light);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    background: var(--bg-light);
-    overflow: hidden;
 }
 
 .LemonCollapsePanel {
@@ -20,9 +20,9 @@
 
 .LemonCollapsePanel__header {
     min-height: 2.875rem !important;
-    border-radius: 0 !important;
     padding: 0.5rem 0.75rem !important; // Override reduced side padding
     font-weight: 500 !important; // Override status="stealth"'s font-weight
+    border-radius: 0 !important;
 
     .posthog-3000 &.LemonButton:active {
         transform: inherit;
@@ -30,10 +30,10 @@
 }
 
 .LemonCollapsePanel__body {
-    border-top-width: 1px;
     box-sizing: content-box;
     height: 0;
     overflow: hidden;
+    border-top-width: 1px;
     transition: height 200ms ease;
 
     .posthog-3000 & {
diff --git a/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.scss b/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.scss
index 112206bf755bd..ac30964542867 100644
--- a/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.scss
+++ b/frontend/src/lib/lemon-ui/LemonDivider/LemonDivider.scss
@@ -1,8 +1,8 @@
 .LemonDivider {
+    flex-shrink: 0;
     width: 100%;
     height: 1px;
     background: var(--border);
-    flex-shrink: 0;
 
     &--dashed {
         background: repeating-linear-gradient(
@@ -19,9 +19,9 @@
     }
 
     &--vertical {
+        align-self: stretch;
         width: 1px;
         height: auto;
-        align-self: stretch;
 
         &.LemonDivider--thick {
             width: 3px;
diff --git a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss
index 731f84ed06b90..d15c0fb3813d7 100644
--- a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss
+++ b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.scss
@@ -5,12 +5,12 @@
 .FileDropTarget--active::after {
     --file-drop-target-padding: 0.5rem;
 
-    content: '';
     position: absolute;
     top: calc(-1 * var(--file-drop-target-padding));
     left: calc(-1 * var(--file-drop-target-padding));
-    height: calc(100% + var(--file-drop-target-padding) * 2);
     width: calc(100% + var(--file-drop-target-padding) * 2);
+    height: calc(100% + var(--file-drop-target-padding) * 2);
+    content: '';
     border: 3px dashed var(--primary-3000);
     border-radius: var(--radius);
 }
diff --git a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
index a5f81f7376b58..52597bea291dc 100644
--- a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
+++ b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.scss
@@ -1,19 +1,19 @@
 .LemonInput {
-    align-items: center;
-    background: none;
-    border-radius: var(--radius);
-    border: 1px solid var(--border);
-    color: var(--default);
-    cursor: text;
     display: flex;
-    font-size: 0.875rem;
     gap: 0.25rem;
+    align-items: center;
     justify-content: center;
-    line-height: 1.25rem;
     min-height: 2.5rem;
     padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: var(--default);
     text-align: left;
+    cursor: text;
+    background: none;
     background-color: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
 
     &:hover:not([aria-disabled='true']) {
         border-color: var(--primary-3000-hover);
@@ -41,26 +41,26 @@
     }
 
     .LemonInput__input {
-        border: none;
-        outline: none;
-        background: none;
-        width: 100%;
         align-self: stretch; // Improves selectability
+        width: 100%;
         text-overflow: ellipsis;
+        background: none;
+        border: none;
+        outline: none;
 
         &:disabled {
-            opacity: var(--opacity-disabled);
             cursor: not-allowed;
+            opacity: var(--opacity-disabled);
         }
     }
 
     .LemonIcon {
+        flex-shrink: 0;
         width: 1em;
         height: 1em;
-        transition: color 200ms ease;
         font-size: 1.5rem;
         color: var(--muted-alt);
-        flex-shrink: 0;
+        transition: color 200ms ease;
     }
 
     &.LemonInput--small {
diff --git a/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.scss b/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.scss
index 16762d83a23ac..b2ef9faca7fd0 100644
--- a/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.scss
+++ b/frontend/src/lib/lemon-ui/LemonLabel/LemonLabel.scss
@@ -1,8 +1,8 @@
 .LemonLabel {
     display: inline-flex;
-    align-items: center;
     flex-wrap: wrap;
     column-gap: 0.25rem;
+    align-items: center;
     font-weight: 600;
     line-height: 1.5rem;
 
diff --git a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss
index 50506eac65e68..6b1325a852945 100644
--- a/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss
+++ b/frontend/src/lib/lemon-ui/LemonModal/LemonModal.scss
@@ -1,12 +1,12 @@
 .LemonModal__overlay {
     position: fixed;
     inset: 0;
-    transition: background-color var(--modal-transition-time) ease-out,
-        backdrop-filter var(--modal-transition-time) ease-out;
     z-index: var(--z-modal);
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: background-color var(--modal-transition-time) ease-out,
+        backdrop-filter var(--modal-transition-time) ease-out;
 
     &.LemonModal__overlay--force-modal-above-popovers {
         z-index: var(--z-force-modal-above-popovers);
@@ -25,37 +25,37 @@
 
 .LemonModal {
     position: relative;
-    max-width: 90%;
+    display: flex;
+    flex-direction: column;
     width: fit-content;
     min-width: min(28rem, 100%);
+    max-width: 90%;
     max-height: 90%;
     margin: 1rem auto;
-    border-radius: var(--radius);
     background-color: var(--bg-light);
     border: 1px solid var(--border-3000);
+    border-radius: var(--radius);
     box-shadow: var(--shadow-elevation);
+    opacity: 0;
     transition: opacity var(--modal-transition-time) ease-out, transform var(--modal-transition-time) ease-out;
-    display: flex;
-    flex-direction: column;
+    transform: scale(0.85);
 
     // Transition properties
     will-change: transform;
-    transform: scale(0.85);
-    opacity: 0;
 
     &.LemonModal--fullscreen {
-        max-width: 100%;
-        max-height: 100%;
         width: 100%;
+        max-width: 100%;
         height: 100%;
-        border-radius: 0;
-        border: none;
+        max-height: 100%;
         margin: 0;
+        border: none;
+        border-radius: 0;
     }
 
     &.ReactModal__Content--after-open:not(.ReactModal__Content--before-close) {
-        transform: scale(1);
         opacity: 1;
+        transform: scale(1);
     }
 
     .LemonModal__close {
@@ -72,9 +72,9 @@
     // We nest the content in layout so that "simple" modal implementations can use this class as well
     .LemonModal__layout {
         display: flex;
+        flex: 1;
         flex-direction: column;
         overflow-y: hidden;
-        flex: 1;
     }
 
     .LemonModal__content {
@@ -94,17 +94,17 @@
 }
 
 .LemonModal__header {
+    padding-bottom: 1.25rem;
     margin: 1.5rem;
     margin-bottom: 0;
-    padding-bottom: 1.25rem;
     border-bottom: 1px solid var(--border);
 
     h3 {
-        margin-bottom: 0;
         margin-right: 1.5rem;
+        margin-bottom: 0;
         font-size: 1.125rem;
-        line-height: 1.5rem;
         font-weight: 700;
+        line-height: 1.5rem;
     }
 
     p {
@@ -115,14 +115,14 @@
 .LemonModal__footer {
     display: flex;
     flex-wrap: wrap;
-    justify-content: flex-end;
     gap: 0.5rem;
-    border-top: 1px solid var(--border);
+    align-items: center;
+    justify-content: flex-end;
+    padding-top: 1.5rem;
     margin: 1.5rem;
     margin-top: 0;
-    padding-top: 1.5rem;
     white-space: nowrap;
-    align-items: center;
+    border-top: 1px solid var(--border);
 }
 
 .LemonModal__header + .LemonModal__footer {
diff --git a/frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.scss b/frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.scss
index 24d0850cff5dc..3b30f7309fa9d 100644
--- a/frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.scss
+++ b/frontend/src/lib/lemon-ui/LemonProgressCircle/LemonProgressCircle.scss
@@ -1,6 +1,6 @@
 .LemonProgressCircle {
-    display: inline-block;
     position: relative;
+    display: inline-block;
     vertical-align: text-bottom;
 
     circle {
diff --git a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
index cdec3b871b333..1f77ad21481df 100644
--- a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
+++ b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
@@ -1,5 +1,4 @@
 .LemonRow {
-    transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease;
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
@@ -7,17 +6,18 @@
     justify-content: center;
     min-height: 2.5rem;
     padding: 0.25rem 1rem;
-    background: none;
-    border-radius: var(--radius);
-    border: none;
     font-size: 0.875rem;
-    text-align: left;
     line-height: 1.25rem;
+    text-align: left;
+    background: none;
+    border: none;
+    border-radius: var(--radius);
+    transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease;
 
     &.LemonRow--status-highlighted {
-        background: var(--primary-bg-hover);
-        color: var(--default);
         font-weight: 600;
+        color: var(--default);
+        background: var(--primary-bg-hover);
 
         .LemonRow__icon {
             color: var(--primary-3000);
@@ -52,19 +52,19 @@
 }
 
 .LemonRow__main-area {
-    width: 100%;
-    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 100%;
+    height: 100%;
 }
 
 .LemonRow__extended-area {
     display: flex;
     flex-direction: column;
-    font-size: 0.8125rem;
-    margin-left: 2rem;
     padding-bottom: 0.125rem;
+    margin-left: 2rem;
+    font-size: 0.8125rem;
 }
 
 .LemonRow--outlined {
@@ -73,8 +73,8 @@
 
 .LemonRow--full-width {
     width: 100%;
-    padding-left: 0.5rem;
     padding-right: 0.5rem;
+    padding-left: 0.5rem;
 
     .LemonRow__icon:not(:first-child):last-child {
         margin-right: 0;
@@ -97,9 +97,9 @@
 
 .LemonRow--symbolic {
     display: block;
-    min-height: 0;
-    height: 1.5rem;
     width: 1.5rem;
+    height: 1.5rem;
+    min-height: 0;
     padding: 0;
 }
 
@@ -108,21 +108,21 @@
     padding: 0.5rem 1rem;
 
     &.LemonRow--symbolic {
-        min-height: 0;
-        height: 1.75rem;
         width: 1.75rem;
+        height: 1.75rem;
+        min-height: 0;
         padding: 0;
     }
 }
 
 .LemonRow--large {
-    @extend .LemonRow--tall;
-
     font-size: 1rem;
 
     .LemonRow__icon {
         font-size: 1.75rem;
     }
+
+    @extend .LemonRow--tall;
 }
 
 .LemonRow--small {
@@ -130,9 +130,9 @@
     padding: 0.125rem 0.5rem;
 
     &.LemonRow--symbolic {
-        min-height: 0;
-        height: 1.25rem;
         width: 1.25rem;
+        height: 1.25rem;
+        min-height: 0;
         padding: 0;
     }
 
@@ -142,18 +142,18 @@
 }
 
 .LemonRow__icon {
-    transition: background-color 200ms ease, color 200ms ease;
     display: flex;
     flex-shrink: 0;
     font-size: 1.5rem;
     color: var(--muted-alt);
+    transition: background-color 200ms ease, color 200ms ease;
 }
 
 .LemonRow__content {
-    flex-grow: 1;
-    min-width: 0;
     display: flex;
+    flex-grow: 1;
     align-items: center;
+    min-width: 0;
 }
 
 .LemonRow__content,
diff --git a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss
index fd66747c15565..079db3fcd31bd 100644
--- a/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss
+++ b/frontend/src/lib/lemon-ui/LemonSegmentedButton/LemonSegmentedButton.scss
@@ -6,9 +6,9 @@
 
     > ul {
         z-index: 1; // Place above slider
-        list-style: none;
         display: flex;
         align-items: stretch;
+        list-style: none;
     }
 
     &.LemonSegmentedButton--full-width {
@@ -32,17 +32,18 @@ body:not(.posthog-3000) {
     }
 
     .LemonSegmentedButton__slider {
-        // This is a real element and not ::after to avoid initial transition from 0 width
-        transition: width 200ms ease, transform 200ms ease, border-radius 200ms ease;
-        will-change: width, transform, border-radius;
         position: absolute;
         top: -1px; // 1px of border
         left: -1px; // 1px of border
-        height: calc(100% + 2px); // 1px of border (top + bottom)
         width: calc(var(--lemon-segmented-button-slider-width) + 2px); // 1px of border (left + right)
-        transform: translateX(var(--lemon-segmented-button-slider-offset));
+        height: calc(100% + 2px); // 1px of border (top + bottom)
         background: var(--primary);
 
+        // This is a real element and not ::after to avoid initial transition from 0 width
+        transition: width 200ms ease, transform 200ms ease, border-radius 200ms ease;
+        transform: translateX(var(--lemon-segmented-button-slider-offset));
+        will-change: width, transform, border-radius;
+
         &.LemonSegmentedButton__slider--first {
             border-top-left-radius: var(--radius);
             border-bottom-left-radius: var(--radius);
@@ -56,12 +57,13 @@ body:not(.posthog-3000) {
 
     .LemonSegmentedButton__option {
         .LemonButton {
+            min-height: calc(var(--lemon-button-height) - 2px);
+            border-radius: 0;
+            outline: 1px solid transparent;
+
             // Original transition with outline added
             transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease,
                 outline 200ms ease;
-            outline: 1px solid transparent;
-            border-radius: 0;
-            min-height: calc(var(--lemon-button-height) - 2px);
 
             &:hover {
                 > span {
diff --git a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss
index 59b8e3bd4d44a..e35aa7ab4b76a 100644
--- a/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss
+++ b/frontend/src/lib/lemon-ui/LemonSelectMultiple/LemonSelectMultiple.scss
@@ -6,12 +6,12 @@
         &.ant-select-single .ant-select-selector {
             min-height: 40px;
             padding: 0.25rem;
-            border-radius: var(--radius);
             font-size: 0.875rem;
-            text-align: left;
             line-height: 1.25rem;
-            border: 1px solid var(--border);
+            text-align: left;
             background: var(--bg-light);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
 
             .ant-select-selection-overflow {
                 gap: 0.25rem;
@@ -40,8 +40,8 @@
 
         &.ant-select-single {
             .ant-select-selector {
-                height: 40px;
                 box-sizing: border-box;
+                height: 40px;
 
                 .ant-select-selection-search-input {
                     height: 38px;
@@ -64,11 +64,11 @@
 }
 
 .LemonSelectMultipleDropdown {
+    padding: 0.5rem;
+    margin: -4px 0; // Counteract antd wrapper
     background: var(--bg-light);
-    border-radius: var(--radius);
     border: 1px solid var(--primary);
-    margin: -4px 0; // Counteract antd wrapper
-    padding: 0.5rem;
+    border-radius: var(--radius);
 
     .posthog-3000 & {
         border: 1px solid var(--primary-3000);
@@ -76,14 +76,14 @@
 
     .ant-select-item {
         padding: 0;
-        background: none;
         padding-bottom: 0.2rem;
+        background: none;
 
         .ant-select-item-option-content {
             height: 40px;
+            padding: 0.25rem 0.5rem;
             cursor: pointer;
             border-radius: var(--radius);
-            padding: 0.25rem 0.5rem;
         }
 
         &.ant-select-item-option-active {
@@ -114,8 +114,8 @@
 
     .LemonSelectMultipleDropdown__skeleton {
         display: flex;
-        align-items: center;
         gap: 0.5rem;
+        align-items: center;
         height: 40px;
         padding: 0 0.25rem;
     }
diff --git a/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.scss b/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.scss
index 29095c2aac936..f17f363a260ae 100644
--- a/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.scss
+++ b/frontend/src/lib/lemon-ui/LemonSkeleton/LemonSkeleton.scss
@@ -11,10 +11,6 @@
     background-size: 400% 100%;
     animation: LemonSkeleton__shimmer 2s ease infinite;
 
-    @media (prefers-reduced-motion) {
-        animation: none;
-    }
-
     &.LemonSkeleton--static {
         animation: none;
     }
@@ -23,11 +19,15 @@
     // See https://adrianroselli.com/2020/11/more-accessible-skeletons.html
     > span {
         display: block;
-        overflow: hidden;
         width: 1px;
         height: 1px;
+        overflow: hidden;
         white-space: nowrap;
     }
+
+    @media (prefers-reduced-motion) {
+        animation: none;
+    }
 }
 
 @keyframes LemonSkeleton__shimmer {
diff --git a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
index 7996b4ce72bd2..1904b9a5e2072 100644
--- a/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
+++ b/frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.scss
@@ -2,12 +2,12 @@
     --lemon-switch-height: 1.25rem;
     --lemon-switch-width: 2.25rem;
 
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
     width: fit-content;
     font-weight: 500;
     line-height: 1.5rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
 
     label[for] {
         cursor: pointer; // A label with for=* also toggles the switch, so it shouldn't have the text select cursor
@@ -23,16 +23,16 @@
     }
 
     &.LemonSwitch--bordered {
+        min-height: 2.5rem;
         padding: 0 0.75rem;
-        border-radius: var(--radius);
-        border: 1px solid var(--border);
         background: var(--bg-light);
-        min-height: 2.5rem;
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
 
         &.LemonSwitch--small {
-            padding: 0 0.5rem;
             gap: 0.5rem;
             min-height: 2rem;
+            padding: 0 0.5rem;
         }
     }
 
@@ -60,12 +60,12 @@
     position: relative;
     display: inline-block;
     flex-shrink: 0;
-    padding: 0;
     width: var(--lemon-switch-width);
     height: var(--lemon-switch-height);
+    padding: 0;
+    cursor: pointer;
     background: none;
     border: none;
-    cursor: pointer;
 
     .LemonSwitch--disabled & {
         cursor: not-allowed;
@@ -74,22 +74,22 @@
 
 .LemonSwitch__slider {
     position: absolute;
-    left: 0;
     top: 5px;
+    left: 0;
     display: inline-block;
     width: 2.25rem;
     height: 0.625rem;
-    border-radius: 0.625rem;
     background-color: var(--border);
+    border-radius: 0.625rem;
     transition: background-color 100ms ease;
 
     .posthog-3000 & {
-        border-radius: var(--lemon-switch-height);
-        height: 100%;
-        width: 100%;
         top: 0;
+        width: 100%;
+        height: 100%;
         pointer-events: none;
         background-color: var(--border-bold);
+        border-radius: var(--lemon-switch-height);
     }
 
     .LemonSwitch--checked & {
@@ -105,16 +105,16 @@
     position: absolute;
     top: 0;
     left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 1.25rem;
     height: 1.25rem;
-    border-radius: 0.625rem;
+    cursor: inherit;
     background-color: #fff;
     border: 2px solid var(--border);
+    border-radius: 0.625rem;
     transition: background-color 100ms ease, transform 100ms ease, width 100ms ease, border-color 100ms ease;
-    cursor: inherit;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 
     .posthog-3000 & {
         --lemon-switch-handle-ratio: calc(3 / 4); // Same proportion as in IconToggle
@@ -128,9 +128,9 @@
         left: var(--lemon-switch-handle-gutter);
         width: var(--lemon-switch-handle-width);
         height: calc(var(--lemon-switch-height) * var(--lemon-switch-handle-ratio));
-        border: none;
         pointer-events: none;
         background-color: #fff;
+        border: none;
     }
 
     .LemonSwitch--checked & {
@@ -139,8 +139,8 @@
         transform: translateX(1rem);
 
         .posthog-3000 & {
-            transform: var(--lemon-switch-active-translate);
             background-color: #fff;
+            transform: var(--lemon-switch-active-translate);
         }
     }
 
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
index 4bffbac72b20e..8c0a45163d1d8 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
@@ -1,13 +1,14 @@
 .LemonTable {
+    --row-base-height: 3rem;
+    --row-horizontal-padding: 1rem;
+
     position: relative;
+    flex: 1;
     width: 100%;
+    overflow: hidden;
     background: var(--bg-table);
-    border-radius: var(--radius);
     border: 1px solid var(--border);
-    overflow: hidden;
-    flex: 1;
-
-    --row-base-height: 3rem;
+    border-radius: var(--radius);
 
     .posthog-3000 & {
         --row-base-height: auto;
@@ -15,8 +16,6 @@
         font-size: 13px;
     }
 
-    --row-horizontal-padding: 1rem;
-
     &.LemonTable--with-ribbon {
         --row-ribbon-width: 0.25rem;
 
@@ -24,12 +23,12 @@
             position: relative;
 
             &::after {
-                content: '';
                 position: absolute;
                 top: 0;
                 left: 0;
                 width: var(--row-ribbon-width);
                 height: 100%;
+                content: '';
                 background: var(--row-ribbon-color);
             }
         }
@@ -49,9 +48,9 @@
     }
 
     &--embedded {
+        background: none;
         border: none;
         border-radius: 0;
-        background: none;
     }
 
     &--borderless-rows {
@@ -61,9 +60,9 @@
     }
 
     &--stealth {
+        background: none;
         border: none;
         border-radius: 0;
-        background: none;
 
         .LemonTable__content > table > thead {
             background: none;
@@ -111,16 +110,16 @@
 
 .LemonTable__content > table {
     width: 100%;
-    border-collapse: collapse;
     border-spacing: 0;
+    border-collapse: collapse;
 
     > thead {
         position: relative;
-        border-bottom: 1px solid var(--border);
-        background: var(--mid);
         font-size: 0.75rem;
-        letter-spacing: 0.03125rem;
         text-transform: uppercase;
+        letter-spacing: 0.03125rem;
+        background: var(--mid);
+        border-bottom: 1px solid var(--border);
 
         .posthog-3000 & {
             background: none;
@@ -162,15 +161,15 @@
             }
 
             &.LemonTable__row--status-highlighted {
-                background: var(--primary-bg-hover);
-                color: var(--default);
                 font-weight: 600;
+                color: var(--default);
+                background: var(--primary-bg-hover);
             }
 
             > td {
-                color: var(--text-secondary);
                 padding-top: 0.5rem;
                 padding-bottom: 0.5rem;
+                color: var(--text-secondary);
 
                 .posthog-3000 & {
                     padding-top: 0.3125rem;
@@ -223,9 +222,10 @@
                 }
 
                 &[colspan='0'] {
+                    padding-right: 0 !important;
+
                     // Hidden cells should not affect the width of the table
                     padding-left: 0 !important;
-                    padding-right: 0 !important;
                 }
             }
         }
@@ -237,20 +237,20 @@
 }
 
 .LemonTable__overlay {
-    transition: opacity 200ms ease;
     position: absolute;
     top: 0;
     left: 0;
+    z-index: 2;
     width: 100%;
     height: 100%;
+    pointer-events: none;
     background: var(--bg-light);
     opacity: 0;
-    pointer-events: none;
-    z-index: 2;
+    transition: opacity 200ms ease;
 
     .LemonTable--loading & {
-        opacity: 0.5;
         pointer-events: auto;
+        opacity: 0.5;
     }
 }
 
@@ -290,8 +290,8 @@
 }
 
 .LemonTable__footer {
-    border-top: 1px solid var(--border);
     cursor: default;
+    border-top: 1px solid var(--border);
 }
 
 // Stickiness is disabled in snapshots due to flakiness
@@ -305,16 +305,16 @@ body:not(.storybook-test-runner) {
 
         // Replicate .scrollable style for sticky cells
         &::before {
-            transition: box-shadow 200ms ease;
-            content: '';
             position: absolute;
             top: 0;
             left: 0;
+            z-index: -1; // Place below cell content
             width: 100%;
             height: 100%;
-            z-index: -1; // Place below cell content
             clip-path: inset(0 -16px 0 0);
+            content: '';
             box-shadow: -16px 0 16px 16px transparent;
+            transition: box-shadow 200ms ease;
         }
     }
 
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
index 2f0d22e9fd1e8..43300913c301f 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTableLoader.scss
@@ -1,25 +1,25 @@
 .LemonTableLoader {
-    background: var(--primary-bg-active);
-    border: none !important;
+    position: absolute;
     bottom: -1px;
-    height: 0;
     left: 0;
-    overflow: hidden;
+    z-index: 10;
+    width: 100%;
+    height: 0;
     padding: 0.05rem !important;
-    position: absolute;
+    overflow: hidden;
+    background: var(--primary-bg-active);
+    border: none !important;
     transition: height 200ms ease, top 200ms ease;
-    width: 100%;
-    z-index: 10;
 
     &::after {
-        content: '';
         position: absolute;
-        left: 0;
         top: 0;
+        left: 0;
         width: 50%;
         height: 100%;
-        animation: LemonTableLoader__swooping 1.5s linear infinite;
+        content: '';
         background: var(--primary);
+        animation: LemonTableLoader__swooping 1.5s linear infinite;
 
         .posthog-3000 & {
             background: var(--primary-3000);
diff --git a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
index 967a0add69417..371bb05d23964 100644
--- a/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
+++ b/frontend/src/lib/lemon-ui/LemonTabs/LemonTabs.scss
@@ -12,35 +12,37 @@
 
 .LemonTabs__bar {
     position: relative;
-    flex-shrink: 0;
-    margin-bottom: 1rem;
-    list-style: none;
     display: flex;
     flex-direction: row;
+    flex-shrink: 0;
     align-items: stretch;
+    margin-bottom: 1rem;
     overflow-x: auto;
+    list-style: none;
 
     &::before {
-        // The bottom border
-        content: '';
         position: absolute;
-        left: 0;
         bottom: 0;
-        height: 1px;
+        left: 0;
         width: 100%;
+        height: 1px;
+
+        // The bottom border
+        content: '';
         background: var(--border);
     }
 
     &::after {
-        // The active tab slider
-        content: '';
         position: absolute;
         bottom: 0;
         left: 0;
-        height: 0.125rem;
         width: var(--lemon-tabs-slider-width);
-        transform: translateX(var(--lemon-tabs-slider-offset));
+        height: 0.125rem;
+
+        // The active tab slider
+        content: '';
         background: var(--link);
+        transform: translateX(var(--lemon-tabs-slider-offset));
 
         .LemonTabs--transitioning & {
             transition: width 200ms ease, transform 200ms ease;
@@ -71,17 +73,18 @@
     }
 
     a {
+        color: inherit;
+
         // Make tab labels that are links the same colors as regular tab labels
         text-decoration: none;
-        color: inherit;
         transition: none;
     }
 }
 
 .LemonTabs__tab-content {
-    align-items: center;
-    cursor: pointer;
     display: flex;
+    align-items: center;
     padding: 0.75rem 0;
     white-space: nowrap;
+    cursor: pointer;
 }
diff --git a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
index 348d596a1cec3..9ea66c893078c 100644
--- a/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
+++ b/frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss
@@ -1,98 +1,98 @@
 .LemonTag {
-    align-items: center;
-    background: var(--border);
-    border-radius: var(--radius);
-    color: var(--default);
     display: inline-flex;
+    align-items: center;
+    padding: 0.125rem 0.25rem;
     font-size: 0.75rem;
     font-weight: var(--font-medium);
     line-height: 1rem;
-    padding: 0.125rem 0.25rem;
+    color: var(--default);
     white-space: nowrap;
+    background: var(--border);
+    border-radius: var(--radius);
 
     .posthog-3000 & {
+        padding: 0.075rem 0.25rem;
+        font-size: 0.688rem;
         background: none;
-        border-radius: calc(var(--radius) * 0.75);
         border-style: solid;
         border-width: 1px;
-        font-size: 0.688rem;
-        padding: 0.075rem 0.25rem;
+        border-radius: calc(var(--radius) * 0.75);
     }
 
     &.primary {
-        background-color: var(--primary-3000);
         color: #fff;
+        background-color: var(--primary-3000);
 
         .posthog-3000 & {
+            color: var(--primary-3000);
             background: none;
             border-color: var(--primary-3000);
-            color: var(--primary-3000);
         }
     }
 
     &.highlight {
-        background-color: var(--mark);
         color: var(--bg-charcoal);
+        background-color: var(--mark);
 
         .posthog-3000 & {
+            color: var(--mark);
             background: none;
             border-color: var(--mark);
-            color: var(--mark);
         }
     }
 
     &.warning {
-        background-color: var(--warning);
         color: var(--bg-charcoal);
+        background-color: var(--warning);
 
         .posthog-3000 & {
+            color: var(--warning);
             background: none;
             border-color: var(--warning);
-            color: var(--warning);
         }
     }
 
     &.danger {
-        background-color: var(--danger);
         color: #fff;
+        background-color: var(--danger);
 
         .posthog-3000 & {
+            color: var(--danger);
             background: none;
             border-color: var(--danger);
-            color: var(--danger);
         }
     }
 
     &.success {
-        background-color: var(--success);
         color: #fff;
+        background-color: var(--success);
 
         .posthog-3000 & {
+            color: var(--success);
             background: none;
             border-color: var(--success);
-            color: var(--success);
         }
     }
 
     &.completion {
-        background-color: var(--purple-light);
         color: var(--bg-charcoal);
+        background-color: var(--purple-light);
 
         .posthog-3000 & {
+            color: var(--purple-light);
             background: none;
             border-color: var(--purple-light);
-            color: var(--purple-light);
         }
     }
 
     &.caution {
-        background-color: var(--danger-lighter);
         color: var(--bg-charcoal);
+        background-color: var(--danger-lighter);
 
         .posthog-3000 & {
+            color: var(--danger-lighter);
             background: none;
             border-color: var(--danger-lighter);
-            color: var(--danger-lighter);
         }
     }
 
@@ -101,19 +101,19 @@
     }
 
     &.LemonTag--size-small {
-        font-size: 0.625rem;
         padding: 0.0625rem 0.1875rem;
+        font-size: 0.625rem;
     }
 
     .LemonTag__icon {
-        font-size: 0.875rem;
-        margin-right: 0.125rem;
         display: flex;
+        margin-right: 0.125rem;
+        font-size: 0.875rem;
     }
 
     .LemonTag__right-button {
-        margin-left: 0.25rem;
         min-height: 1.5rem !important;
         padding: 0.125rem !important;
+        margin-left: 0.25rem;
     }
 }
diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss
index ccc45dc5f36a2..728dc4ccaab79 100644
--- a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss
+++ b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.scss
@@ -1,29 +1,28 @@
 .LemonTextArea {
-    transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease;
+    display: block;
+    width: 100%;
     min-height: 2.5rem;
     padding: 0.5rem;
-    background: none;
-    border-radius: var(--radius);
     font-size: 0.875rem;
-    text-align: left;
     line-height: 1.25rem;
-    cursor: text;
     color: var(--default);
-    border: 1px solid var(--border);
+    text-align: left;
+    text-overflow: ellipsis;
+    cursor: text;
+    background: none;
     background-color: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
     outline: none;
-    display: block;
+    transition: background-color 200ms ease, color 200ms ease, border 200ms ease, opacity 200ms ease;
 
     &:not(:disabled):hover {
         border: 1px solid var(--primary-3000-hover);
     }
 
-    width: 100%;
-    text-overflow: ellipsis;
-
     &:disabled {
-        opacity: var(--opacity-disabled);
         cursor: not-allowed;
+        opacity: var(--opacity-disabled);
     }
 
     &:focus:not(:disabled) {
@@ -37,12 +36,12 @@
 
 .LemonTextArea--preview {
     ul {
-        list-style-type: disc;
         list-style-position: inside;
+        list-style-type: disc;
     }
 
     ol {
-        list-style-type: decimal;
         list-style-position: inside;
+        list-style-type: decimal;
     }
 }
diff --git a/frontend/src/lib/lemon-ui/LemonWidget/LemonWidget.scss b/frontend/src/lib/lemon-ui/LemonWidget/LemonWidget.scss
index 9382a90fd4e4b..5bbc6dd0ed5aa 100644
--- a/frontend/src/lib/lemon-ui/LemonWidget/LemonWidget.scss
+++ b/frontend/src/lib/lemon-ui/LemonWidget/LemonWidget.scss
@@ -1,15 +1,15 @@
 .LemonWidget {
     background: var(--bg-light);
-    border-radius: var(--radius);
     border: 1px solid var(--border);
+    border-radius: var(--radius);
 
     .LemonWidget__header {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        font-weight: 500;
         padding: 0.25rem;
-        color: var(--muted-alt-3000, var(--primary));
         font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--muted-alt-3000, var(--primary));
     }
 }
diff --git a/frontend/src/lib/lemon-ui/Lettermark/Lettermark.scss b/frontend/src/lib/lemon-ui/Lettermark/Lettermark.scss
index 87067e7e6df31..96209c98e0c3f 100644
--- a/frontend/src/lib/lemon-ui/Lettermark/Lettermark.scss
+++ b/frontend/src/lib/lemon-ui/Lettermark/Lettermark.scss
@@ -3,28 +3,28 @@
     flex-shrink: 0;
     width: 1.5rem;
     height: 1.5rem;
-    border-radius: var(--radius);
     font-size: 0.75rem;
     font-weight: 600;
     line-height: 1.5rem;
-    text-align: center;
     color: var(--lettermark-1-text);
-    background: var(--lettermark-1-bg);
+    text-align: center;
     user-select: none;
+    background: var(--lettermark-1-bg);
+    border-radius: var(--radius);
 
     &.Lettermark--rounded {
         border-radius: 1.5rem;
     }
 
+    &.Lettermark--variant-gray {
+        color: var(--default);
+        background: var(--border-light);
+    }
+
     @each $variant in (1, 2, 3, 4, 5, 6, 7, 8) {
         &.Lettermark--variant-#{$variant} {
             color: var(--lettermark-#{$variant}-text);
             background: var(--lettermark-#{$variant}-bg);
         }
     }
-
-    &.Lettermark--variant-gray {
-        color: var(--default);
-        background: var(--border-light);
-    }
 }
diff --git a/frontend/src/lib/lemon-ui/Link/Link.scss b/frontend/src/lib/lemon-ui/Link/Link.scss
index a2f4fa91f71b0..13969c9df18b1 100644
--- a/frontend/src/lib/lemon-ui/Link/Link.scss
+++ b/frontend/src/lib/lemon-ui/Link/Link.scss
@@ -1,11 +1,11 @@
 .Link {
-    background: none;
-    border: none;
+    padding: 0;
+    line-height: inherit;
     color: var(--link);
     cursor: pointer;
-    line-height: inherit;
+    background: none;
+    border: none;
     outline: none;
-    padding: 0;
     transition: none;
 
     &:not(:disabled) {
@@ -19,8 +19,8 @@
     }
 
     &:disabled {
-        opacity: var(--opacity-disabled);
         cursor: not-allowed;
+        opacity: var(--opacity-disabled);
     }
 
     > .LemonIcon {
diff --git a/frontend/src/lib/lemon-ui/PaginationControl/PaginationControl.scss b/frontend/src/lib/lemon-ui/PaginationControl/PaginationControl.scss
index 723f62436c8ce..5458d75e8428f 100644
--- a/frontend/src/lib/lemon-ui/PaginationControl/PaginationControl.scss
+++ b/frontend/src/lib/lemon-ui/PaginationControl/PaginationControl.scss
@@ -1,7 +1,7 @@
 .PaginationControl {
-    align-self: flex-end;
     display: flex;
     align-items: center;
+    align-self: flex-end;
     justify-content: flex-end;
 
     > span {
diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.scss b/frontend/src/lib/lemon-ui/Popover/Popover.scss
index 5dbb894d99043..01779d797acdd 100644
--- a/frontend/src/lib/lemon-ui/Popover/Popover.scss
+++ b/frontend/src/lib/lemon-ui/Popover/Popover.scss
@@ -26,16 +26,16 @@
 
 .Popover__box {
     position: relative; // For arrow
-    transition: opacity 50ms ease, transform 50ms ease;
-    transform-origin: top;
-    box-shadow: var(--shadow-elevation);
-    background: var(--bg-light);
     flex-grow: 1;
     max-width: 100%;
     padding: 0.5rem;
-    border-radius: var(--radius);
+    background: var(--bg-light);
     border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-elevation);
     opacity: 0;
+    transition: opacity 50ms ease, transform 50ms ease;
+    transform-origin: top;
 
     .Popover--actionable & {
         border-color: var(--primary-3000);
@@ -45,9 +45,9 @@
     // the reference and the floating element. This makes hover-based popovers possible
 
     .Popover[data-placement^='bottom'] & {
-        transform-origin: top;
         margin-top: 0.25rem;
         transform: rotateX(-6deg);
+        transform-origin: top;
     }
 
     .Popover[data-placement^='bottom'].Popover--with-arrow & {
@@ -55,9 +55,9 @@
     }
 
     .Popover[data-placement^='top'] & {
-        transform-origin: bottom;
         margin-bottom: 0.25rem;
         transform: rotateX(6deg);
+        transform-origin: bottom;
     }
 
     .Popover[data-placement^='top'].Popover--with-arrow & {
@@ -65,9 +65,9 @@
     }
 
     .Popover[data-placement^='left'] & {
-        transform-origin: right;
         margin-right: 0.25rem;
         transform: rotateY(-6deg);
+        transform-origin: right;
     }
 
     .Popover[data-placement^='left'].Popover--with-arrow & {
@@ -75,9 +75,9 @@
     }
 
     .Popover[data-placement^='right'] & {
-        transform-origin: left;
         margin-left: 0.25rem;
         transform: rotateY(6deg);
+        transform-origin: left;
     }
 
     .Popover[data-placement^='right'].Popover--with-arrow & {
@@ -95,8 +95,8 @@
     }
 
     .posthog-3000 & {
-        background: var(--bg-light);
         padding: 0.25rem;
+        background: var(--bg-light);
     }
 
     .posthog-3000 .Popover--actionable & {
@@ -108,8 +108,8 @@
     position: absolute;
     width: 0.5rem;
     height: 0.5rem;
-    transform: rotate(45deg);
     background: var(--bg-3000);
+    transform: rotate(45deg);
 
     [data-placement^='bottom'] & {
         top: -0.25rem;
@@ -119,8 +119,8 @@
 
     [data-placement^='top'] & {
         bottom: -0.25rem;
-        border-bottom: 1px solid var(--border);
         border-right: 1px solid var(--border);
+        border-bottom: 1px solid var(--border);
     }
 
     [data-placement^='left'] & {
@@ -141,6 +141,6 @@
 }
 
 .Popover__content {
-    overflow-y: auto;
     max-height: 100%;
+    overflow-y: auto;
 }
diff --git a/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss b/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss
index d3f5896baebca..0027be79f6ed8 100644
--- a/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss
+++ b/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss
@@ -13,63 +13,63 @@
 }
 
 .ProfilePicture {
-    flex-shrink: 0;
-    border-radius: 50%;
-    background-color: var(--lettermark-6-text);
-    color: #5f1903;
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     font-weight: 600;
+    color: #5f1903;
     user-select: none;
+    background-color: var(--lettermark-6-text);
+    border-radius: 50%;
 
     &.xxl {
         width: 48px;
         height: 48px;
-        line-height: 48px;
         font-size: 20px;
+        line-height: 48px;
     }
 
     &.xl {
         width: 40px;
         height: 40px;
-        line-height: 40px;
         font-size: 20px;
+        line-height: 40px;
     }
 
     &.lg {
         width: 32px;
         height: 32px;
-        line-height: 32px;
         font-size: 18px; // 2/3 of width/height in the smallest size, 1/2 in the biggest, interpolated in between
+        line-height: 32px;
     }
 
     &.md {
         width: 24px;
         height: 24px;
-        line-height: 24px;
         font-size: 14px;
+        line-height: 24px;
     }
 
     &.sm {
         width: 18px;
         height: 18px;
-        line-height: 18px;
         font-size: 12px;
+        line-height: 18px;
     }
 
     &.xs {
         width: 16px;
         height: 16px;
-        line-height: 16px;
         font-size: 11px;
+        line-height: 16px;
     }
 
     .Lettermark {
         width: inherit;
         height: inherit;
-        line-height: inherit;
         font-size: inherit;
+        line-height: inherit;
     }
 }
 
@@ -90,13 +90,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 1.5rem;
     width: 1.5rem;
-    border-radius: 50%;
-    background: var(--primary-3000);
-    color: #fff;
+    height: 1.5rem;
     font-size: 0.625rem;
     font-weight: 600;
+    color: #fff;
     letter-spacing: -0.05em;
     user-select: none;
+    background: var(--primary-3000);
+    border-radius: 50%;
 }
diff --git a/frontend/src/lib/lemon-ui/Spinner/Spinner.scss b/frontend/src/lib/lemon-ui/Spinner/Spinner.scss
index ec8d8e41a33c2..e5ddf2a3cb175 100644
--- a/frontend/src/lib/lemon-ui/Spinner/Spinner.scss
+++ b/frontend/src/lib/lemon-ui/Spinner/Spinner.scss
@@ -1,11 +1,11 @@
 .Spinner {
+    --spinner-color: var(--primary-3000);
+
     display: inline-block; // Same as .LemonIcon
-    vertical-align: -0.15em; // Same as .LemonIcon
+    flex-shrink: 0;
     width: 1em;
     height: 1em;
-    flex-shrink: 0;
-
-    --spinner-color: var(--primary-3000);
+    vertical-align: -0.15em; // Same as .LemonIcon
 
     &.Spinner--textColored {
         --spinner-color: currentColor;
@@ -18,10 +18,10 @@
     > circle {
         display: block;
         fill: transparent;
-        stroke-width: 8px;
-        transform-origin: center;
         stroke: var(--spinner-color);
         stroke-linecap: round;
+        stroke-width: 8px;
+        transform-origin: center;
     }
 
     &:nth-child(1) {
@@ -40,36 +40,36 @@
 @keyframes Spinner__writhe {
     0%,
     100% {
-        stroke-dashoffset: -60;
         stroke-dasharray: 70;
+        stroke-dashoffset: -60;
     }
 
     50% {
-        stroke-dashoffset: -30;
         stroke-dasharray: 70;
+        stroke-dashoffset: -30;
     }
 }
 
 .SpinnerOverlay {
-    transition: opacity 0.2s ease;
     position: absolute;
     inset: 0;
-    text-align: center;
-    min-height: 6rem;
     z-index: var(--z-content-overlay);
     display: flex;
     align-items: center;
     justify-content: center;
+    min-height: 6rem;
+    text-align: center;
+    transition: opacity 0.2s ease;
 
     &[aria-hidden='true'] {
-        opacity: 0;
         pointer-events: none;
+        opacity: 0;
     }
 
     &::before {
-        content: '';
         position: absolute;
         inset: 0;
+        content: '';
         background: var(--bg-light);
         opacity: 0.5;
     }
diff --git a/frontend/src/lib/lemon-ui/icons/icons.scss b/frontend/src/lib/lemon-ui/icons/icons.scss
index 2615626e1d155..d7990daa765cc 100644
--- a/frontend/src/lib/lemon-ui/icons/icons.scss
+++ b/frontend/src/lib/lemon-ui/icons/icons.scss
@@ -1,5 +1,5 @@
 .LemonIcon {
     display: inline-block;
-    vertical-align: -0.15em; // -0.15em ensures vertical centering in inline contexts
     width: 1em;
+    vertical-align: -0.15em; // -0.15em ensures vertical centering in inline contexts
 }
diff --git a/frontend/src/lib/logic/newPrompt/prompt.scss b/frontend/src/lib/logic/newPrompt/prompt.scss
index 355cb23c9af2e..86a2aad37d1cc 100644
--- a/frontend/src/lib/logic/newPrompt/prompt.scss
+++ b/frontend/src/lib/logic/newPrompt/prompt.scss
@@ -1,14 +1,14 @@
 .PromptPopup {
     position: fixed;
-    bottom: 10px;
     right: 10px;
+    bottom: 10px;
     z-index: 2000;
     flex-direction: column;
-    background: white;
-    border-radius: 8px;
-    padding-top: 5px;
     min-width: 300px;
     min-height: 100px;
-    box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);
+    padding-top: 5px;
+    background: white;
     border: 1px solid #f0f0f0;
+    border-radius: 8px;
+    box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);
 }
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index 7da9a39b575fb..4bc8241d88bd1 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -33,7 +33,17 @@ export const defaultMocks: Mocks = {
         '/api/projects/:team_id/event_definitions/': EMPTY_PAGINATED_RESPONSE,
         '/api/projects/:team_id/cohorts/': toPaginatedResponse([MOCK_DEFAULT_COHORT]),
         '/api/projects/:team_id/dashboards/': EMPTY_PAGINATED_RESPONSE,
-        '/api/projects/@current/dashboard_templates/repository/': [],
+        '/api/projects/:team_id/dashboard_templates/repository/': [],
+        '/api/projects/:team_id/notebooks': () => {
+            // this was matching on `?contains=query` but that made MSW unhappy and seems unnecessary
+            return [
+                200,
+                {
+                    count: 0,
+                    results: [],
+                },
+            ]
+        },
         '/api/projects/:team_id/groups/': EMPTY_PAGINATED_RESPONSE,
         '/api/projects/:team_id/groups_types/': [],
         '/api/projects/:team_id/insights/': EMPTY_PAGINATED_RESPONSE,
@@ -44,7 +54,7 @@ export const defaultMocks: Mocks = {
         } as SharingConfigurationType,
         '/api/projects/:team_id/property_definitions/': EMPTY_PAGINATED_RESPONSE,
         '/api/projects/:team_id/feature_flags/': EMPTY_PAGINATED_RESPONSE,
-        'api/projects/:team_id/feature_flags/:feature_flag_id/role_access': EMPTY_PAGINATED_RESPONSE,
+        '/api/projects/:team_id/feature_flags/:feature_flag_id/role_access': EMPTY_PAGINATED_RESPONSE,
         '/api/projects/:team_id/experiments/': EMPTY_PAGINATED_RESPONSE,
         '/api/projects/:team_id/explicit_members/': [],
         '/api/organizations/@current/': (): MockSignature => [
diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
index bc1db304a1058..78e48683ea698 100644
--- a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
+++ b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
@@ -1,17 +1,16 @@
 .ColumnConfiguratorModal {
     .Columns {
-        width: 700px;
         display: flex;
         column-gap: 1rem;
+        width: 700px;
+        padding: 0.5rem;
+        background-color: var(--side);
+        border-radius: 0.25rem;
 
         @media (max-width: 960px) {
             display: block;
             width: auto;
         }
-
-        background-color: var(--side);
-        border-radius: 0.25rem;
-        padding: 0.5rem;
     }
 
     .HalfColumn {
@@ -27,10 +26,10 @@
         align-items: center;
         justify-content: flex-start;
         padding: 0 0.5rem;
-        overflow: hidden;
-        border-radius: var(--radius);
         margin: calc(var(--radius) / 2) 0;
+        overflow: hidden;
         background-color: var(--primary-bg-hover);
+        border-radius: var(--radius);
     }
 
     .selected-column-col {
@@ -39,10 +38,10 @@
     }
 
     .drag-handle {
-        cursor: move;
-        color: var(--default);
-        font-size: 1.2em;
         padding-right: 0.25rem;
+        font-size: 1.2em;
+        color: var(--default);
+        cursor: move;
 
         svg {
             transform: rotate(90deg);
diff --git a/frontend/src/queries/nodes/DataTable/DataTable.scss b/frontend/src/queries/nodes/DataTable/DataTable.scss
index ea5d0bf3de23e..ae0f574e2a5f1 100644
--- a/frontend/src/queries/nodes/DataTable/DataTable.scss
+++ b/frontend/src/queries/nodes/DataTable/DataTable.scss
@@ -3,6 +3,19 @@
         max-width: 20rem;
     }
 
+    .DataTable__row--highlight_once {
+        animation: DataTable__highlight 2000ms ease-out;
+    }
+
+    .DataTable__row--category_row {
+        height: 2rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: var(--muted);
+        text-align: center;
+        background-color: var(--mid);
+    }
+
     @keyframes DataTable__highlight {
         0% {
             background-color: var(--mark);
@@ -12,17 +25,4 @@
             background-color: initial;
         }
     }
-
-    .DataTable__row--highlight_once {
-        animation: DataTable__highlight 2000ms ease-out;
-    }
-
-    .DataTable__row--category_row {
-        background-color: var(--mid);
-        color: var(--muted);
-        font-weight: 600;
-        font-size: 0.75rem;
-        height: 2rem;
-        text-align: center;
-    }
 }
diff --git a/frontend/src/queries/nodes/InsightViz/EditorFilters.scss b/frontend/src/queries/nodes/InsightViz/EditorFilters.scss
index fb05255736d2e..e8cbd15f7e6c0 100644
--- a/frontend/src/queries/nodes/InsightViz/EditorFilters.scss
+++ b/frontend/src/queries/nodes/InsightViz/EditorFilters.scss
@@ -7,9 +7,9 @@
     background: var(--bg-light);
 
     &:not(.EditorFiltersWrapper--embedded) {
+        padding: 1rem;
         border: 1px solid var(--border);
         border-radius: var(--radius);
-        padding: 1rem;
     }
 
     .EditorFilters {
diff --git a/frontend/src/queries/nodes/InsightViz/InsightViz.scss b/frontend/src/queries/nodes/InsightViz/InsightViz.scss
index 01315b0d6877b..64d761fe0b8bf 100644
--- a/frontend/src/queries/nodes/InsightViz/InsightViz.scss
+++ b/frontend/src/queries/nodes/InsightViz/InsightViz.scss
@@ -1,10 +1,10 @@
 .InsightViz {
     display: flex;
+    flex: 1; // important for when rendered within a flex parent
     flex-direction: column;
-    overflow: hidden;
     gap: 1rem;
+    overflow: hidden;
     container-type: inline-size;
-    flex: 1; // important for when rendered within a flex parent
 
     &.InsightViz--horizontal {
         flex-flow: row wrap;
@@ -29,14 +29,14 @@
     flex-direction: column;
 
     .NotebookNode & {
-        height: 100%;
         flex: 1;
+        height: 100%;
     }
 
     .InsightVizDisplay__content {
+        position: relative;
         display: flex;
         flex: 1;
-        position: relative;
         flex-direction: column;
 
         &--with-legend {
@@ -44,27 +44,27 @@
         }
 
         .InsightVizDisplay__content__left {
+            position: relative;
             display: flex;
-            flex-direction: column;
             flex: 1;
-            position: relative;
+            flex-direction: column;
             width: 100%;
         }
 
         .InsightVizDisplay__content__right {
+            display: flex;
             flex-shrink: 1;
+            align-items: center;
+            width: fit-content;
             max-width: 45%;
             max-height: var(--insight-viz-min-height);
-            width: fit-content;
             margin: 1rem;
-            display: flex;
-            align-items: center;
         }
     }
 
     .InsightDisplayConfig {
-        border-bottom-width: 1px;
         padding: 0.5rem;
+        border-bottom-width: 1px;
     }
 }
 
@@ -75,10 +75,10 @@
 }
 
 .RetentionContainer {
-    width: 100%;
     display: flex;
-    flex-direction: column;
     flex: 1;
+    flex-direction: column;
+    width: 100%;
 
     .RetentionContainer__graph {
         flex: 1;
@@ -105,11 +105,11 @@
 
 .TrendsInsight {
     position: relative;
-    flex: 1;
-    margin: 0.5rem;
     display: flex;
+    flex: 1;
     flex-direction: column;
     min-height: var(--insight-viz-min-height);
+    margin: 0.5rem;
 
     .NotebookNode & {
         min-height: auto;
@@ -118,8 +118,8 @@
     &--ActionsTable,
     &--WorldMap,
     &--BoldNumber {
-        margin: 0;
         min-height: auto;
+        margin: 0;
     }
 
     &--BoldNumber {
@@ -131,8 +131,8 @@
 
 .FunnelInsight {
     display: flex;
-    flex-direction: column;
     flex: 1;
+    flex-direction: column;
     width: 100%;
 
     &--type-steps-vertical,
@@ -148,8 +148,8 @@
 
 .funnel-significance-highlight {
     display: inline-flex;
-    background: var(--primary);
     color: var(--bg-light);
+    background: var(--primary);
 
     .LemonIcon {
         color: var(--bg-light);
diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss
index 6637f4f265e04..ab9e265e13535 100644
--- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss
+++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss
@@ -1,40 +1,39 @@
 .PropertyGroupFilters {
     .property-group {
+        padding: 0.5rem;
         background-color: var(--side);
+        border-radius: 4px;
 
         .posthog-3000 & {
             border-width: 1px;
         }
-
-        padding: 0.5rem;
-        border-radius: 4px;
     }
 
     .property-group-and-or-separator {
-        color: var(--primary-alt);
+        position: relative;
         padding: 0.5rem 0;
         font-size: 12px;
         font-weight: 600;
-        position: relative;
+        color: var(--primary-alt);
 
         &::before {
             position: absolute;
-            left: 17px;
             top: 0;
+            left: 17px;
             width: 2px;
             height: 100%;
-            background-color: var(--border-light);
             content: ' ';
+            background-color: var(--border-light);
         }
 
         > span {
             position: relative;
-            display: inline-block;
             z-index: 1;
-            background-color: var(--bg-light);
-            padding: 0.25rem;
+            display: inline-block;
             width: 35px;
+            padding: 0.25rem;
             text-align: center;
+            background-color: var(--bg-light);
         }
     }
 }
diff --git a/frontend/src/scenes/PreflightCheck/PreflightCheck.scss b/frontend/src/scenes/PreflightCheck/PreflightCheck.scss
index 0628c2ac5d99f..2d3485930e1a5 100644
--- a/frontend/src/scenes/PreflightCheck/PreflightCheck.scss
+++ b/frontend/src/scenes/PreflightCheck/PreflightCheck.scss
@@ -21,8 +21,8 @@
     }
 
     .Preflight__checks-container {
-        border-radius: var(--radius);
         border: 1px solid var(--border);
+        border-radius: var(--radius);
 
         svg {
             font-size: 20px;
@@ -30,17 +30,17 @@
 
         .Preflight__check-summary {
             display: flex;
+            align-items: center;
             padding: 12px;
             border-bottom: 1px solid var(--border);
-            align-items: center;
 
             .Preflight__summary-icon-container {
-                width: 40px;
-                height: 40px;
-                border-radius: 20px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
+                width: 40px;
+                height: 40px;
+                border-radius: 20px;
             }
 
             .Preflight__summary-text-container {
@@ -52,8 +52,8 @@
                 }
 
                 .Preflight__summary-header {
-                    font-weight: 600;
                     font-size: 14px;
+                    font-weight: 600;
                 }
 
                 .Preflight__summary-description {
@@ -64,15 +64,15 @@
     }
 
     .Preflight__cannot-continue {
-        background-color: var(--side);
-        border: 2px solid var(--mid);
         display: flex;
         align-items: center;
         justify-content: center;
+        background-color: var(--side);
+        border: 2px solid var(--mid);
 
         p {
-            font-size: 14px;
             margin-bottom: 0;
+            font-size: 14px;
         }
     }
 
@@ -124,9 +124,9 @@
 
 .PreflightItem {
     display: flex;
-    padding: 12px;
     align-items: center;
     justify-content: center;
+    padding: 12px;
     border-bottom: 1px solid var(--border);
 
     p {
diff --git a/frontend/src/scenes/authentication/Login.scss b/frontend/src/scenes/authentication/Login.scss
index 86c36aee780f5..ae6fda82bd59f 100644
--- a/frontend/src/scenes/authentication/Login.scss
+++ b/frontend/src/scenes/authentication/Login.scss
@@ -1,9 +1,9 @@
 @import '../../styles/mixins';
 
 .PasswordWrapper {
+    max-height: 1000px;
     overflow: hidden;
     transition: max-height 0.8s ease-in-out;
-    max-height: 1000px;
 
     &.zero-height {
         max-height: 0;
diff --git a/frontend/src/scenes/batch_exports/BatchExports.scss b/frontend/src/scenes/batch_exports/BatchExports.scss
index 507ce76135072..fe84ce87586d1 100644
--- a/frontend/src/scenes/batch_exports/BatchExports.scss
+++ b/frontend/src/scenes/batch_exports/BatchExports.scss
@@ -6,17 +6,17 @@
 
 @keyframes BatchExportRunIcon__pulse {
     0% {
-        outline-offset: 0;
         outline-color: var(--primary-3000-hover);
+        outline-offset: 0;
     }
 
     80% {
-        outline-offset: 20px;
         outline-color: transparent;
+        outline-offset: 20px;
     }
 
     100% {
-        outline-offset: 20px;
         outline-color: transparent;
+        outline-offset: 20px;
     }
 }
diff --git a/frontend/src/scenes/billing/Billing.scss b/frontend/src/scenes/billing/Billing.scss
index 8088a048cf769..b904cffb8b845 100644
--- a/frontend/src/scenes/billing/Billing.scss
+++ b/frontend/src/scenes/billing/Billing.scss
@@ -1,32 +1,32 @@
 .BillingPlan {
-    max-width: 500px;
     flex-grow: 1;
+    max-width: 500px;
 
     .BillingPlan__description {
         ol,
         ul {
-            margin-top: 1rem;
             padding-left: 0;
-            list-style: none;
+            margin-top: 1rem;
             text-align: center;
+            list-style: none;
 
             li {
-                line-height: 1.2rem;
                 margin-bottom: 1rem;
+                line-height: 1.2rem;
             }
 
             .disclaimer {
+                padding-left: 1px;
                 font-size: 10px;
                 font-weight: bold;
                 vertical-align: top;
-                padding-left: 1px;
             }
         }
 
         .disclaimer-details {
+            margin-top: 1rem;
             font-size: 0.75rem;
             color: var(--muted);
-            margin-top: 1rem;
         }
     }
 }
diff --git a/frontend/src/scenes/billing/BillingGauge.scss b/frontend/src/scenes/billing/BillingGauge.scss
index b9c73a13291f6..a1ac810b41da5 100644
--- a/frontend/src/scenes/billing/BillingGauge.scss
+++ b/frontend/src/scenes/billing/BillingGauge.scss
@@ -3,15 +3,15 @@
 
     .BillingGaugeItem__info {
         position: absolute;
-        white-space: nowrap;
-        border-left: 1px solid var(--border);
+        bottom: 100%;
         left: 100%;
+        padding: 0 0.25rem 0.5rem;
         margin-left: -1px;
         font-size: 0.8rem;
-        background: var(--bg-light);
-        bottom: 100%;
-        padding: 0 0.25rem 0.5rem;
         line-height: 1rem;
+        white-space: nowrap;
+        background: var(--bg-light);
+        border-left: 1px solid var(--border);
 
         &--bottom {
             top: 100%;
diff --git a/frontend/src/scenes/billing/BillingHero.scss b/frontend/src/scenes/billing/BillingHero.scss
index 3c30a1ff02d79..8b23a6e54c30a 100644
--- a/frontend/src/scenes/billing/BillingHero.scss
+++ b/frontend/src/scenes/billing/BillingHero.scss
@@ -1,22 +1,22 @@
 .BillingHero {
-    background-color: var(--mark);
-    border-radius: 0.5rem;
     position: relative;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    background-color: var(--mark);
+    border-radius: 0.5rem;
 }
 
 .BillingHero__hog {
-    overflow: hidden;
     position: relative;
     width: 200px;
     padding-top: 1rem;
+    overflow: hidden;
 }
 
 .BillingHero__hog__img {
-    height: 200px;
     width: 200px;
+    height: 200px;
     margin: -20px 0;
 }
diff --git a/frontend/src/scenes/billing/PlanComparison.scss b/frontend/src/scenes/billing/PlanComparison.scss
index 98d091b0b80d7..6f72a074f8b61 100644
--- a/frontend/src/scenes/billing/PlanComparison.scss
+++ b/frontend/src/scenes/billing/PlanComparison.scss
@@ -6,8 +6,8 @@ table.PlanComparison {
     table-layout: fixed;
 
     td {
-        vertical-align: top;
         padding: 0.75rem 1.25rem;
+        vertical-align: top;
 
         &.PlanTable__td__upgradeButton {
             padding-top: 1rem;
@@ -16,10 +16,10 @@ table.PlanComparison {
     }
 
     th {
-        vertical-align: top;
         padding: 0.75rem 1.25rem;
         font-weight: 600;
         text-align: left;
+        vertical-align: top;
 
         &.PlanTable__th__section {
             padding: 0.25rem 1.25rem;
diff --git a/frontend/src/scenes/billing/PlanTable.scss b/frontend/src/scenes/billing/PlanTable.scss
index af301e35f3114..3edfa6e80765e 100644
--- a/frontend/src/scenes/billing/PlanTable.scss
+++ b/frontend/src/scenes/billing/PlanTable.scss
@@ -5,15 +5,15 @@
         table-layout: fixed;
 
         td {
-            vertical-align: top;
             padding: 1.25rem;
+            vertical-align: top;
         }
 
         th {
-            vertical-align: top;
             padding: 1.25rem;
             font-weight: 800;
             text-align: left;
+            vertical-align: top;
 
             &.PlanTable__th__section {
                 padding: 0.25rem 1.25rem;
diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.scss b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.scss
index 9f62a93d6366e..5721f2ffc1c8d 100644
--- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.scss
+++ b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.scss
@@ -1,9 +1,9 @@
 .CohortCriteriaGroups__matching-group {
+    width: 100%;
     padding-top: 1rem;
+    margin: 0.5rem 0;
     border: 1px solid var(--border);
     border-radius: 4px;
-    width: 100%;
-    margin: 0.5rem 0;
 
     &.CohortCriteriaGroups__matching-group--error {
         border: 1px solid var(--danger);
@@ -11,9 +11,9 @@
 }
 
 .CohortCriteriaGroups__matching-group__logical-divider {
-    color: var(--primary-alt);
-    font-weight: 600;
+    padding: 0 1.5rem;
     font-size: 12px;
+    font-weight: 600;
+    color: var(--primary-alt);
     text-transform: uppercase;
-    padding: 0 1.5rem;
 }
diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.scss b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.scss
index 2e2df05cf2178..7e79cfa8e4c58 100644
--- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.scss
+++ b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.scss
@@ -2,9 +2,9 @@
     padding: 0 0.5rem;
 
     .CohortCriteriaRow__Criteria {
-        border-radius: var(--radius);
-        border: 1px solid transparent;
         padding: 0.25rem 0.5rem;
+        border: 1px solid transparent;
+        border-radius: var(--radius);
 
         &.CohortCriteriaRow__Criteria--error {
             border: 1px solid var(--danger);
@@ -30,9 +30,9 @@
     }
 
     .logical-row-divider {
-        color: var(--primary-alt);
-        font-weight: 600;
         font-size: 12px;
+        font-weight: 600;
+        color: var(--primary-alt);
         text-transform: uppercase;
 
         &::before,
@@ -46,21 +46,21 @@
     }
 
     .CohortCriteriaRow__inline-divider {
-        margin: 0 0.5rem;
+        flex: 1;
         height: 1px;
+        margin: 0 0.5rem;
         background-color: var(--border);
-        flex: 1;
     }
 
     .CohortCriteriaRow__Criteria__arrow {
-        color: var(--muted);
-        font-size: 18px;
-        font-weight: bold;
-        padding-left: 6px;
-        padding-right: 8px;
         position: relative;
         top: 6px;
-        user-select: none;
         flex-shrink: 0;
+        padding-right: 8px;
+        padding-left: 6px;
+        font-size: 18px;
+        font-weight: bold;
+        color: var(--muted);
+        user-select: none;
     }
 }
diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortField.scss b/frontend/src/scenes/cohorts/CohortFilters/CohortField.scss
index 075dda92dc0d9..45cb5e9a6620a 100644
--- a/frontend/src/scenes/cohorts/CohortFilters/CohortField.scss
+++ b/frontend/src/scenes/cohorts/CohortFilters/CohortField.scss
@@ -32,19 +32,19 @@
 
     &.ant-select-single {
         .ant-select-selector {
-            min-height: 38px !important;
             height: unset;
-            border: none !important;
+            min-height: 38px !important;
             background-color: inherit;
+            border: none !important;
         }
     }
 
     &.ant-select-multiple {
         .ant-select-selector {
             height: 100% !important;
-            border: none !important;
             padding: 5px 40px 5px 11px;
             background-color: inherit;
+            border: none !important;
 
             .ant-select-selection-search {
                 padding-left: 0 !important;
diff --git a/frontend/src/scenes/cohorts/Cohorts.scss b/frontend/src/scenes/cohorts/Cohorts.scss
index ba03ee05269f4..660d792b068e3 100644
--- a/frontend/src/scenes/cohorts/Cohorts.scss
+++ b/frontend/src/scenes/cohorts/Cohorts.scss
@@ -1,12 +1,12 @@
 .cohorts-drawer .ant-drawer-content-wrapper {
-    max-width: 850px !important;
     width: 100% !important;
+    max-width: 850px !important;
 }
 
 .cohort-recalculating {
-    background-color: var(--mid);
     padding: 0.5rem 1rem;
     margin-top: 1rem;
+    background-color: var(--mid);
     border-radius: var(--radius);
 
     .ant-spin-spinning {
@@ -16,8 +16,8 @@
 
 .cohort-csv-dragger {
     height: 155px !important;
-    background-color: transparent !important;
     margin-top: 1rem;
+    background-color: transparent !important;
     border: 2px dashed var(--primary) !important;
     border-radius: 4px !important;
 
@@ -27,16 +27,16 @@
 
     .ant-upload-drag-container {
         display: flex !important;
-        justify-content: center;
         flex-direction: column;
         align-items: center;
+        justify-content: center;
         height: 100%;
         padding: 0 1rem;
 
         .ant-upload-text {
-            font-weight: 600;
-            font-size: 1rem !important;
             margin: 8px 0 0 !important;
+            font-size: 1rem !important;
+            font-weight: 600;
         }
     }
 }
diff --git a/frontend/src/scenes/dashboard/Dashboard.scss b/frontend/src/scenes/dashboard/Dashboard.scss
index fe4c80e270a4a..64934e78efe17 100644
--- a/frontend/src/scenes/dashboard/Dashboard.scss
+++ b/frontend/src/scenes/dashboard/Dashboard.scss
@@ -3,25 +3,25 @@
 .dashboard-header {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 1rem;
     width: 100%;
+    margin-bottom: 1rem;
 
     &.full-screen {
         margin-top: 1rem;
     }
 
     .dashboard-meta {
-        white-space: nowrap;
         display: flex;
         align-items: center;
+        white-space: nowrap;
 
         .ant-btn {
+            margin-left: 10px;
+
             .anticon {
                 vertical-align: baseline;
             }
 
-            margin-left: 10px;
-
             &.button-box {
                 padding: 4px 8px;
             }
@@ -32,8 +32,8 @@
         flex-direction: column;
 
         .dashboard-meta {
-            padding-top: 1rem;
             justify-content: flex-end;
+            padding-top: 1rem;
         }
     }
 }
diff --git a/frontend/src/scenes/dashboard/DashboardItems.scss b/frontend/src/scenes/dashboard/DashboardItems.scss
index 8bd848c3b2705..574d5fdd3e653 100644
--- a/frontend/src/scenes/dashboard/DashboardItems.scss
+++ b/frontend/src/scenes/dashboard/DashboardItems.scss
@@ -1,12 +1,12 @@
 .dashboard-items-wrapper {
-    margin-top: 1rem;
     width: 100%; // This provides the width for the dashboard items grid
+    margin-top: 1rem;
 }
 
 .react-grid-layout {
     position: relative;
-    transition: height 100ms ease;
     margin-bottom: 2rem;
+    transition: height 100ms ease;
 
     /* remove initial loading animation, animations are only needed in edit mode */
     &.dashboard-view-mode .react-grid-item {
@@ -28,8 +28,8 @@
 }
 
 .react-grid-item.react-draggable-dragging {
-    transition: none;
     z-index: 105;
+    transition: none;
     will-change: transform;
 }
 
@@ -38,14 +38,14 @@
 }
 
 .react-grid-item.react-grid-placeholder {
-    transition: 100ms ease;
-    max-width: 100%;
     position: relative;
-    border: 1px solid var(--primary-3000);
-    outline: 1px solid var(--primary-3000);
-    border-radius: var(--radius);
     z-index: 2;
+    max-width: 100%;
     user-select: none;
+    border: 1px solid var(--primary-3000);
+    border-radius: var(--radius);
+    outline: 1px solid var(--primary-3000);
+    transition: 100ms ease;
 }
 
 .react-resizable-hide > .react-resizable-handle {
@@ -58,12 +58,12 @@
 
     & > .react-resizable-handle {
         position: absolute;
+        right: -0.5rem;
+        bottom: -0.5rem;
+        z-index: 10;
         width: 2rem;
         height: 2rem;
-        bottom: -0.5rem;
-        right: -0.5rem;
         cursor: se-resize;
-        z-index: 10;
     }
 
     & > .react-resizable-handle.react-resizable-handle-se {
@@ -78,8 +78,8 @@
     }
 
     & > .react-resizable-handle.react-resizable-handle-s {
-        left: 0;
         right: 2rem;
+        left: 0;
         width: auto;
         cursor: ns-resize;
     }
diff --git a/frontend/src/scenes/dashboard/EmptyDashboardComponent.scss b/frontend/src/scenes/dashboard/EmptyDashboardComponent.scss
index bf4a7f6f3db78..b8e3359b89362 100644
--- a/frontend/src/scenes/dashboard/EmptyDashboardComponent.scss
+++ b/frontend/src/scenes/dashboard/EmptyDashboardComponent.scss
@@ -5,35 +5,35 @@
     margin-top: 1rem;
 
     .EmptyDashboard__fade {
-        margin-top: 1rem;
+        position: relative;
         height: 150px;
+        margin-top: 1rem;
         overflow: hidden;
-        position: relative;
 
         &::after {
+            width: 100%;
+            height: 150px;
+
             .posthog-3000 & {
                 --bg-light: var(--bg-3000); // Make the fade blend in with the 3000 background smoothly
             }
 
             @extend %mixin-gradient-overlay;
-
-            width: 100%;
-            height: 150px;
         }
     }
 
     .EmptyDashboard__cta {
-        border-width: 1px;
-        border-radius: var(--radius);
-        padding: 1.5rem;
-        box-shadow: var(--shadow-elevation);
-        background: var(--bg-light);
-        width: 360px;
-        max-width: calc(100% - 32px);
         position: absolute;
         top: 16px;
         left: 50%;
-        transform: translateX(-50%);
         z-index: var(--z-content-overlay);
+        width: 360px;
+        max-width: calc(100% - 32px);
+        padding: 1.5rem;
+        background: var(--bg-light);
+        border-width: 1px;
+        border-radius: var(--radius);
+        box-shadow: var(--shadow-elevation);
+        transform: translateX(-50%);
     }
 }
diff --git a/frontend/src/scenes/dashboard/NewDashboardModal.scss b/frontend/src/scenes/dashboard/NewDashboardModal.scss
index b14c650aecaa0..2607c3c28c620 100644
--- a/frontend/src/scenes/dashboard/NewDashboardModal.scss
+++ b/frontend/src/scenes/dashboard/NewDashboardModal.scss
@@ -1,9 +1,9 @@
 .NewDashboardModal {
     .DashboardTemplateChooser {
-        max-width: 780px;
+        display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 0.5em 0.5em;
-        display: grid;
+        max-width: 780px;
     }
 
     .TemplateItem {
diff --git a/frontend/src/scenes/data-management/definition/Definition.scss b/frontend/src/scenes/data-management/definition/Definition.scss
index 4e708a8082ee9..15b40ae820b36 100644
--- a/frontend/src/scenes/data-management/definition/Definition.scss
+++ b/frontend/src/scenes/data-management/definition/Definition.scss
@@ -28,12 +28,12 @@
                 flex-direction: column;
 
                 .definition-popover-grid-card-title {
+                    margin-bottom: 4px;
                     font-size: 11px;
                     font-weight: 600;
-                    letter-spacing: 0.5px;
-                    text-transform: uppercase;
                     color: var(--muted);
-                    margin-bottom: 4px;
+                    text-transform: uppercase;
+                    letter-spacing: 0.5px;
                 }
 
                 .definition-popover-grid-card-content {
@@ -51,17 +51,17 @@
                 display: flex;
                 align-items: center;
                 width: fit-content;
+                max-width: 300px;
                 padding: 0.125rem 0.25rem;
-                letter-spacing: 0.25px;
-                border-radius: var(--radius);
-                border: 1px solid var(--border-light);
-                background: var(--mid);
-                color: var(--muted-alt);
                 font-size: 0.625rem;
                 font-weight: 500;
+                color: var(--muted-alt);
+                letter-spacing: 0.25px;
                 word-break: break-all;
-                max-width: 300px;
                 cursor: text;
+                background: var(--mid);
+                border: 1px solid var(--border-light);
+                border-radius: var(--radius);
             }
 
             td.definition-column-name {
@@ -70,21 +70,21 @@
                 align-items: center;
 
                 .definition-column-name-content {
+                    position: relative;
                     display: flex;
                     flex-direction: column;
-                    position: relative;
 
                     .definition-column-name-content-title {
-                        font-weight: 600;
-                        cursor: pointer;
                         position: relative;
                         overflow: visible;
+                        font-weight: 600;
+                        cursor: pointer;
 
                         &::before {
-                            content: '';
                             position: absolute;
                             inset: -5px -50px -5px -10px;
                             height: 22px;
+                            content: '';
                         }
                     }
 
@@ -129,15 +129,15 @@
     // Shared across definition view and edit modes
     .definition-sent-as {
         display: flex;
-        align-items: center;
         flex-direction: row;
-        color: var(--muted);
+        align-items: center;
         margin: 0.5rem 0;
+        color: var(--muted);
 
         pre {
+            margin: 0 0.25rem;
             font-size: 13px;
             font-weight: 600;
-            margin: 0 0.25rem;
         }
     }
 }
diff --git a/frontend/src/scenes/data-management/events/EventDefinitionsTable.scss b/frontend/src/scenes/data-management/events/EventDefinitionsTable.scss
index 9cc22ad4acc2a..6d73bab3af497 100644
--- a/frontend/src/scenes/data-management/events/EventDefinitionsTable.scss
+++ b/frontend/src/scenes/data-management/events/EventDefinitionsTable.scss
@@ -1,8 +1,8 @@
 .events-definition-table {
     .LemonTable__content > table > tbody {
         td.definition-column-icon {
-            padding-right: 0.5rem;
             width: 36px;
+            padding-right: 0.5rem;
 
             .definition-column-name-icon {
                 display: flex;
@@ -31,19 +31,19 @@
             align-items: center;
 
             .definition-column-name-content {
+                position: relative;
                 display: flex;
                 flex-direction: column;
-                position: relative;
-                min-height: 32px;
                 justify-content: center;
+                min-height: 32px;
 
                 .definition-column-name-content-title {
-                    align-items: center;
+                    position: relative;
                     display: flex;
-                    font-weight: 600;
                     gap: 0.25rem;
+                    align-items: center;
                     overflow: visible;
-                    position: relative;
+                    font-weight: 600;
 
                     svg {
                         color: var(--success);
@@ -62,17 +62,17 @@
             display: flex;
             align-items: center;
             width: fit-content;
+            max-width: 300px;
             padding: 0.125rem 0.25rem;
-            letter-spacing: 0.25px;
-            border-radius: var(--radius);
-            border: 1px solid var(--border-light);
-            background: var(--mid);
-            color: var(--muted-alt);
             font-size: 0.625rem;
             font-weight: 500;
+            color: var(--muted-alt);
+            letter-spacing: 0.25px;
             word-break: break-all;
-            max-width: 300px;
             cursor: text;
+            background: var(--mid);
+            border: 1px solid var(--border-light);
+            border-radius: var(--radius);
         }
 
         .LemonTable__expansion {
diff --git a/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.scss b/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.scss
index 68dfef351b3c0..a259f2817df50 100644
--- a/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.scss
+++ b/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.scss
@@ -1,8 +1,8 @@
 .event-properties-definition-table {
     .LemonTable__content > table > tbody {
         td.definition-column-icon {
-            padding-right: 0.5rem;
             width: 36px;
+            padding-right: 0.5rem;
 
             .definition-column-name-icon {
                 display: flex;
@@ -27,18 +27,18 @@
 
         td.definition-column-name {
             .definition-column-name-content {
+                position: relative;
                 display: flex;
                 flex-direction: column;
-                position: relative;
-                min-height: 32px;
                 justify-content: center;
+                min-height: 32px;
 
                 .definition-column-name-content-title {
-                    align-items: center;
-                    cursor: pointer;
                     display: flex;
-                    font-weight: 600;
                     gap: 0.25rem;
+                    align-items: center;
+                    font-weight: 600;
+                    cursor: pointer;
 
                     svg {
                         color: var(--success);
diff --git a/frontend/src/scenes/experiments/Experiment.scss b/frontend/src/scenes/experiments/Experiment.scss
index e8f1d3c61391e..d2039e10ec5a5 100644
--- a/frontend/src/scenes/experiments/Experiment.scss
+++ b/frontend/src/scenes/experiments/Experiment.scss
@@ -1,16 +1,16 @@
 .experiment-form {
     .metrics-selection {
-        border-top: 1px solid var(--border);
-        padding-top: 1rem;
         width: 100%;
+        padding-top: 1rem;
+        border-top: 1px solid var(--border);
     }
 
     .person-selection {
-        width: 100%;
-        border-top: 1px solid var(--border);
-        padding-top: 1rem;
         align-items: center;
         justify-content: space-between;
+        width: 100%;
+        padding-top: 1rem;
+        border-top: 1px solid var(--border);
     }
 
     .experiment-preview {
@@ -29,8 +29,8 @@
     }
 
     .variants {
-        margin-top: 0.5rem;
         padding-bottom: 1rem;
+        margin-top: 0.5rem;
 
         .ant-form-horizontal {
             min-height: 32px;
@@ -42,8 +42,8 @@
         }
 
         .border-bottom {
-            border-bottom-left-radius: 4px;
             border-bottom-right-radius: 4px;
+            border-bottom-left-radius: 4px;
         }
 
         .feature-flag-variant {
@@ -51,11 +51,11 @@
             align-items: center;
             padding: 0.5rem;
             background: var(--bg-light);
-            border-width: 1px;
             border-color: var(--border);
+            border-width: 1px;
             border-top-style: solid;
-            border-left-style: solid;
             border-right-style: solid;
+            border-left-style: solid;
 
             .extend-variant-fully {
                 flex: 1;
@@ -65,25 +65,25 @@
         .variant-label {
             display: flex;
             flex-direction: row;
-            justify-content: center;
             align-items: center;
-            border-radius: 4px;
-            color: #fff;
+            justify-content: center;
             min-width: 52px;
             padding: 2px 6px;
             margin-right: 8px;
             font-size: 12px;
             font-weight: 500;
+            color: #fff;
             letter-spacing: 0.01em;
+            border-radius: 4px;
         }
     }
 
     .secondary-metrics {
-        margin-top: 1rem;
+        width: 100%;
         padding-top: 1rem;
-        border-top: 1px solid var(--border);
+        margin-top: 1rem;
         margin-bottom: 1rem;
-        width: 100%;
+        border-top: 1px solid var(--border);
     }
 
     .ant-input-number-disabled {
@@ -143,10 +143,10 @@
         margin-top: 0.5rem;
 
         li::before {
-            content: '\2022';
             display: inline-block;
-            font-weight: 900;
             margin-right: 4px;
+            font-weight: 900;
+            content: '\2022';
         }
 
         .ant-progress-inner {
@@ -160,14 +160,14 @@
 
     .no-experiment-results {
         display: flex;
-        justify-content: center;
         align-items: center;
-        margin-top: 1rem;
-        background-color: var(--side);
-        border: 1px solid var(--border);
+        justify-content: center;
         width: 100%;
         min-height: 320px;
+        margin-top: 1rem;
         font-size: 24px;
+        background-color: var(--side);
+        border: 1px solid var(--border);
     }
 
     .computation-time-and-sampling-notice {
@@ -176,31 +176,31 @@
 }
 
 .preview-conversion-goal-num {
-    height: 24px;
     width: 24px;
+    height: 24px;
+    margin-right: 0.5rem;
+    font-weight: 700;
+    color: var(--primary-alt);
     text-align: center;
     background-color: var(--side);
-    color: var(--primary-alt);
-    font-weight: 700;
-    margin-right: 0.5rem;
 }
 
 .experiment-preview-row {
-    border-bottom: 1px solid var(--border);
     padding-bottom: 1rem;
     margin-bottom: 1rem;
+    border-bottom: 1px solid var(--border);
 
     &:last-child {
-        border-bottom: none;
         padding-bottom: 0;
         margin-bottom: 0;
+        border-bottom: none;
     }
 }
 
 .metric-name {
-    border: 1px solid var(--border);
-    border-radius: 4px;
+    flex: 1;
     padding: 8px 8px 8px 16px;
     margin-left: 0.5rem;
-    flex: 1;
+    border: 1px solid var(--border);
+    border-radius: 4px;
 }
diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.scss b/frontend/src/scenes/feature-flags/FeatureFlag.scss
index 319512c5f7670..d638833129210 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlag.scss
+++ b/frontend/src/scenes/feature-flags/FeatureFlag.scss
@@ -1,9 +1,9 @@
 .VariantFormList {
+    padding: 16px;
+    margin-top: 16px;
     font-size: 13px;
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 16px;
-    margin-top: 16px;
 
     .ant-form-item {
         min-height: 32px;
@@ -13,10 +13,10 @@
         font-weight: bold;
 
         .ant-col {
-            min-height: 32px;
             display: flex;
-            justify-content: space-between;
             align-items: center;
+            justify-content: space-between;
+            min-height: 32px;
         }
     }
 
@@ -28,13 +28,13 @@
 .feature-flag-property-display {
     display: flex;
     flex-flow: row wrap;
-    align-items: center;
     gap: 0.5rem;
+    align-items: center;
     margin-top: 0.5rem;
 
     .arrow-right {
-        margin-right: -8px;
         margin-top: 0.25rem;
+        margin-right: -8px;
     }
 
     .display-value {
@@ -43,17 +43,17 @@
 }
 
 .condition-set-separator {
-    color: var(--primary-alt);
+    margin-bottom: 0.5rem;
+    margin-left: 0.5rem;
     font-size: 12px;
     font-weight: var(--font-semibold);
-    margin-left: 0.5rem;
-    margin-bottom: 0.5rem;
+    color: var(--primary-alt);
 }
 
 .feature-flag-form-row {
     display: flex;
-    align-items: center;
     flex-wrap: wrap;
+    align-items: center;
     width: 100%;
 
     .centered {
diff --git a/frontend/src/scenes/feature-flags/FeatureFlagInstructions.scss b/frontend/src/scenes/feature-flags/FeatureFlagInstructions.scss
index 5d93c3c275519..369c230425b5c 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlagInstructions.scss
+++ b/frontend/src/scenes/feature-flags/FeatureFlagInstructions.scss
@@ -6,9 +6,9 @@
         justify-items: center;
 
         .FeatureFlagInstructionsHeader__header-title__icon {
-            color: var(--text-muted-alt);
             margin-right: 12px;
             font-size: 1.6em;
+            color: var(--text-muted-alt);
         }
     }
 }
diff --git a/frontend/src/scenes/feature-flags/JSONEditorInput.scss b/frontend/src/scenes/feature-flags/JSONEditorInput.scss
index 1ad4102fca3c7..3aac722d947be 100644
--- a/frontend/src/scenes/feature-flags/JSONEditorInput.scss
+++ b/frontend/src/scenes/feature-flags/JSONEditorInput.scss
@@ -16,19 +16,19 @@
     .placeholder {
         position: absolute;
         top: 0;
-        left: 0;
         bottom: 0;
-        height: 100%;
+        left: 0;
         width: 100%;
+        height: 100%;
         pointer-events: none;
 
         .placeholderLabelContainer {
             display: flex;
             align-items: center;
-            pointer-events: none;
             height: 100%;
             padding-left: 18px;
             color: gray;
+            pointer-events: none;
         }
     }
 }
diff --git a/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss b/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss
index 6b1aea45485cc..31249d9704797 100644
--- a/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss
+++ b/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss
@@ -2,10 +2,10 @@
 
 .FunnelBarChart {
     position: relative;
+    flex: 1;
     width: 100%;
     height: 100%;
     overflow: hidden;
-    flex: 1;
 
     table {
         --bar-width: 0.5rem; // This should be overriden from React
@@ -42,10 +42,10 @@
 }
 
 .StepBarLabels {
-    height: calc(var(--bar-row-height) - var(--bar-padding-top) - var(--bar-padding-bottom));
     display: flex;
     flex-direction: column-reverse;
     align-items: flex-end;
+    height: calc(var(--bar-row-height) - var(--bar-padding-top) - var(--bar-padding-bottom));
 }
 
 .StepBarLabels__segment {
@@ -59,19 +59,19 @@
 }
 
 .StepBarLabels__label {
-    transform: translateY(-50%);
     font-size: 0.75rem;
     font-weight: 500;
+    transform: translateY(-50%);
 }
 
 .StepBars {
     position: relative;
     display: flex;
-    align-items: flex-end;
     gap: 0.125rem;
-    border-bottom: 1px solid var(--border);
+    align-items: flex-end;
     height: calc(var(--bar-row-height) - var(--bar-padding-top) - var(--bar-padding-bottom));
     padding: 0 1rem;
+    border-bottom: 1px solid var(--border);
 
     &:not(.StepBars--first) {
         border-left: 1px dashed var(--border);
@@ -80,8 +80,8 @@
 
 .StepBars__grid {
     position: absolute;
-    left: 0;
     bottom: 0;
+    left: 0;
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -102,18 +102,18 @@
     --conversion-rate: 100%; // This should be overriden from React
 
     position: relative;
-    border-radius: var(--radius);
-    width: calc(var(--bar-width) / 2); // We need to conserve space in narrow viewports
     flex-shrink: 0;
+    width: calc(var(--bar-width) / 2); // We need to conserve space in narrow viewports
     height: 100%;
-
-    @include screen($lg) {
-        width: var(--bar-width);
-    }
+    border-radius: var(--radius);
 
     .InsightCard & {
         width: calc(var(--bar-width) / 2) !important; // Also need to conserve space in cards
     }
+
+    @include screen($lg) {
+        width: var(--bar-width);
+    }
 }
 
 .StepBar__backdrop,
@@ -122,8 +122,8 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    border-radius: var(--radius);
     cursor: pointer;
+    border-radius: var(--radius);
 
     .InsightCard & {
         cursor: default;
@@ -138,7 +138,6 @@
 }
 
 .StepBar__backdrop {
-    transition: opacity 200ms ease;
     height: 100%;
     background: repeating-linear-gradient(
             -22.5deg,
@@ -149,6 +148,7 @@
         ),
         var(--series-color);
     opacity: 0.125;
+    transition: opacity 200ms ease;
 
     &:hover {
         opacity: 0.2;
@@ -160,9 +160,9 @@
 }
 
 .StepBar__fill {
-    transition: filter 200ms ease;
-    background: var(--series-color);
     height: var(--conversion-rate);
+    background: var(--series-color);
+    transition: filter 200ms ease;
 
     &:hover {
         filter: brightness(0.9);
@@ -174,26 +174,26 @@
 }
 
 .StepLegend {
-    border-left: 1px solid var(--border);
-    white-space: nowrap;
     height: 100%;
+    white-space: nowrap;
+    border-left: 1px solid var(--border);
 
     > .LemonRow {
         min-height: 1.5rem;
         padding: 0 0.5rem;
-        font-weight: 500;
         margin-top: 0.25rem;
+        font-weight: 500;
 
         &:first-child {
             width: fit-content;
-            font-weight: 600;
             margin-top: 0;
+            font-weight: 600;
         }
     }
 
     .funnel-inspect-button {
-        line-height: 1.5rem;
         font-weight: inherit;
+        line-height: 1.5rem;
     }
 }
 
@@ -202,8 +202,8 @@
 
     table {
         width: 100%;
-        border-collapse: collapse;
         border-spacing: 0;
+        border-collapse: collapse;
     }
 
     tr {
diff --git a/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss b/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss
index ad4a376864a61..503a46db0cb97 100644
--- a/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss
+++ b/frontend/src/scenes/funnels/FunnelBarGraph/FunnelBarGraph.scss
@@ -9,8 +9,8 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
     padding: 1rem;
 
     .InsightCard & {
-        padding-left: 1rem;
         padding-right: 1rem;
+        padding-left: 1rem;
     }
 
     .funnel-step {
@@ -37,8 +37,8 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
                 line-height: 1.5rem;
 
                 .value-inspector-button-icon {
-                    font-size: 1.5rem;
                     margin-right: 0.25rem;
+                    font-size: 1.5rem;
                     vertical-align: bottom;
                 }
             }
@@ -46,13 +46,13 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
 
         .funnel-series-container {
             position: absolute;
-            left: 0;
             top: 0;
-            height: 100%;
-            width: $series_container_width;
+            left: 0;
             display: flex;
             flex-direction: column;
             align-items: center;
+            width: $series_container_width;
+            height: 100%;
 
             .graph-series-glyph {
                 user-select: none;
@@ -61,8 +61,8 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
             .funnel-series-linebox {
                 position: absolute;
                 left: 0;
-                width: calc(#{$series_container_width} / 2 + 1px);
                 box-sizing: border-box;
+                width: calc(#{$series_container_width} / 2 + 1px);
                 border-right: 2px solid var(--mid);
 
                 &.before {
@@ -71,8 +71,8 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
                 }
 
                 &.after {
-                    bottom: 0;
                     top: calc(#{$glyph_height} / 2);
+                    bottom: 0;
                     height: calc(100% - #{$glyph_height} / 2);
                 }
             }
@@ -86,21 +86,21 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
 
         header,
         footer {
-            line-height: $glyph_height;
             display: flex;
             align-items: center;
+            line-height: $glyph_height;
         }
 
         header {
+            position: relative;
             display: flex;
-            justify-content: space-between;
             flex-wrap: wrap;
-            position: relative;
+            justify-content: space-between;
 
             .funnel-step-title {
-                @extend %mixin-text-ellipsis;
-
                 font-weight: bold;
+
+                @extend %mixin-text-ellipsis;
             }
 
             button {
@@ -110,12 +110,12 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
     }
 
     .funnel-bar-wrapper {
+        display: flex;
+        flex-direction: row;
         height: 32px;
         margin: 4px 0;
         background-color: var(--funnel-background);
         border-radius: 4px;
-        display: flex;
-        flex-direction: row;
 
         .funnel-bar {
             position: relative;
@@ -138,8 +138,8 @@ $glyph_height: 23px; // Based on .funnel-step-glyph
             .funnel-bar-percentage {
                 position: absolute;
                 top: 8px;
-                line-height: 16px;
                 font-weight: bold;
+                line-height: 16px;
                 color: #fff;
 
                 &.inside {
diff --git a/frontend/src/scenes/insights/EmptyStates/EmptyStates.scss b/frontend/src/scenes/insights/EmptyStates/EmptyStates.scss
index abb96d022d645..ffa3cdf1a0f3c 100644
--- a/frontend/src/scenes/insights/EmptyStates/EmptyStates.scss
+++ b/frontend/src/scenes/insights/EmptyStates/EmptyStates.scss
@@ -1,12 +1,12 @@
 .insight-empty-state {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    flex-grow: 1;
     align-items: center;
-    color: var(--muted);
+    justify-content: center;
     padding: 1rem;
     font-size: 1.1em;
-    flex-grow: 1;
+    color: var(--muted);
 
     &.error {
         .illustration-main,
@@ -31,8 +31,8 @@
     }
 
     h2 {
-        font-weight: 600;
         font-size: 1.5rem;
+        font-weight: 600;
         line-height: 1.6rem;
         color: var(--primary-alt);
     }
@@ -47,11 +47,11 @@
         .illustration-main {
             display: flex;
             justify-content: center;
-            font-size: 4rem;
             height: auto;
+            margin-bottom: 0.75rem;
+            font-size: 4rem;
             line-height: 1em;
             text-align: center;
-            margin-bottom: 0.75rem;
 
             .ant-empty {
                 height: 6rem;
diff --git a/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.scss b/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.scss
index df45e9cdac85b..db87eca9afff6 100644
--- a/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.scss
+++ b/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.scss
@@ -1,19 +1,19 @@
 .InsightTooltipWrapper {
     position: absolute;
-    transition: all 0.4s;
     z-index: var(--z-graph-tooltip);
     pointer-events: none;
+    transition: all 0.4s;
 }
 
 .InsightTooltip {
+    max-width: 30rem;
     overflow: hidden;
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow-elevation);
     font-size: 0.8125rem;
-    max-width: 30rem;
-    border-radius: var(--radius);
-    background: var(--bg-light);
     pointer-events: none;
+    background: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-elevation);
 
     .LemonRow {
         font-size: 0.8125rem;
@@ -22,8 +22,8 @@
     .LemonTable {
         font-size: 0.75rem;
         border: none;
-        border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
 
         &:not(:last-child) {
             border-bottom: 1px solid var(--border);
@@ -55,9 +55,9 @@
 
         .LemonTable__content > table {
             .datum-label-column {
-                font-weight: 600;
                 display: flex;
                 align-items: center;
+                font-weight: 600;
             }
 
             .series-data-cell {
@@ -65,21 +65,21 @@
             }
 
             .tag-pill {
-                background-color: var(--border-3000);
                 margin-right: 0;
-                border: 0;
-                color: var(--primary-alt);
                 overflow: hidden;
+                color: var(--primary-alt);
                 vertical-align: middle;
+                background-color: var(--border-3000);
+                border: 0;
             }
         }
     }
 
     .table-subtext {
-        font-size: 0.75rem;
-        text-align: center;
         padding: 0.5rem 1rem;
+        font-size: 0.75rem;
         color: var(--muted);
+        text-align: center;
         background-color: var(--bg-light);
 
         .table-subtext-truncated {
@@ -90,8 +90,8 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            color: var(--default);
             font-weight: 600;
+            color: var(--default);
             white-space: nowrap;
         }
     }
diff --git a/frontend/src/scenes/insights/InsightTooltip/LEGACY_InsightTooltip.scss b/frontend/src/scenes/insights/InsightTooltip/LEGACY_InsightTooltip.scss
index 996dd47bb8056..7178400c3fc68 100644
--- a/frontend/src/scenes/insights/InsightTooltip/LEGACY_InsightTooltip.scss
+++ b/frontend/src/scenes/insights/InsightTooltip/LEGACY_InsightTooltip.scss
@@ -1,14 +1,14 @@
 .legacy-ph-graph-tooltip {
-    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
-    font-size: 14px;
-    overflow-x: hidden;
     z-index: var(--z-graph-tooltip);
-    transition: all 0.4s;
     max-width: 480px;
     padding: 8px 12px;
+    overflow-x: hidden;
+    font-size: 14px;
+    background: #fafafa;
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    background: #fafafa;
+    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
+    transition: all 0.4s;
 }
 
 .inner-tooltip {
@@ -19,29 +19,29 @@
         }
 
         footer {
-            margin-top: 0 !important;
             padding-top: 6px;
+            margin-top: 0 !important;
             border-top: 1px solid var(--border);
         }
     }
 
     header {
-        font-weight: bold;
         margin-bottom: 0.5rem;
+        font-weight: bold;
     }
 
     footer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         margin-top: 0.5rem;
-        font-weight: bold;
         font-size: 85%;
+        font-weight: bold;
         color: var(--muted);
-        display: flex;
-        justify-content: center;
-        align-items: center;
 
         svg {
-            font-size: 1.4em;
             margin-right: 4px;
+            font-size: 1.4em;
         }
     }
 
@@ -56,17 +56,17 @@
         font-style: italic;
 
         svg {
-            margin-left: 2px;
             margin-right: 6px;
+            margin-left: 2px;
         }
     }
 
     ul {
-        list-style-type: none;
+        max-height: 32vh;
         padding: 0;
         margin-bottom: 0;
-        max-height: 32vh;
         overflow-y: hidden; // As the element has pointer-events: none to allow proper function, scrolling is not supported anyways
+        list-style-type: none;
 
         li {
             display: flex;
diff --git a/frontend/src/scenes/insights/Insights.stories.tsx b/frontend/src/scenes/insights/Insights.stories.tsx
index ea0532b199365..41ada5331a87b 100644
--- a/frontend/src/scenes/insights/Insights.stories.tsx
+++ b/frontend/src/scenes/insights/Insights.stories.tsx
@@ -23,16 +23,6 @@ const meta: Meta = {
                 '/api/projects/:team_id/persons/retention': sampleRetentionPeopleResponse,
                 '/api/projects/:team_id/persons/properties': samplePersonProperties,
                 '/api/projects/:team_id/groups_types': [],
-                '/api/projects/:team_id/notebooks': () => {
-                    // this was matching on `?contains=query` but that made MSW unhappy and seems unnecessary
-                    return [
-                        200,
-                        {
-                            count: 0,
-                            results: [],
-                        },
-                    ]
-                },
             },
             post: {
                 '/api/projects/:team_id/cohorts/': { id: 1 },
diff --git a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.scss b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.scss
index 129c9a28765eb..6c5b3dea1d24a 100644
--- a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.scss
+++ b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.scss
@@ -9,28 +9,28 @@
     }
 
     &.ActionFilter--bordered {
-        border-radius: var(--radius);
         border: 1px solid var(--border);
+        border-radius: var(--radius);
 
         .ActionFilterRow {
             margin-top: 0;
 
             .ActionFilterRow-content {
-                margin-bottom: 0;
                 padding: 1rem;
+                margin-bottom: 0;
                 border-bottom: 1px solid var(--border);
             }
         }
 
         .ActionFilter-footer {
-            margin-top: 0;
             padding: 0.5rem;
+            margin-top: 0;
         }
 
         .ActionFilterRow-filters {
+            padding: 0.5rem;
             background-color: var(--side);
             border-bottom: 1px solid var(--border);
-            padding: 0.5rem;
         }
     }
 }
diff --git a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.scss b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.scss
index 854c50ea3469f..9dc8e30f6d6c2 100644
--- a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.scss
+++ b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.scss
@@ -17,24 +17,24 @@
 
     .ActionFilterRow__start,
     .ActionFilterRow__end {
-        height: 40px;
         display: flex;
-        align-items: center;
         flex: 0;
         gap: 0.25rem;
+        align-items: center;
+        height: 40px;
     }
 
     .ActionFilterRow__center {
         flex: 1;
-        overflow: hidden;
         flex-wrap: wrap;
         gap: 0.5rem;
+        overflow: hidden;
     }
 }
 
 .ActionFilterRowDragHandle {
-    cursor: move;
-    color: var(--default);
     font-size: 1.2em;
+    color: var(--default);
+    cursor: move;
     transform: rotate(90deg);
 }
diff --git a/frontend/src/scenes/insights/filters/BreakdownFilter/BreakdownTag.scss b/frontend/src/scenes/insights/filters/BreakdownFilter/BreakdownTag.scss
index 05b9e0739cf0f..96e31d3b122d1 100644
--- a/frontend/src/scenes/insights/filters/BreakdownFilter/BreakdownTag.scss
+++ b/frontend/src/scenes/insights/filters/BreakdownFilter/BreakdownTag.scss
@@ -1,10 +1,10 @@
 .breakdown-tag {
-    vertical-align: bottom;
     padding: 8px 12px;
+    font-size: 14px;
+    font-weight: 400;
     line-height: 16px;
     color: var(--primary-alt);
+    vertical-align: bottom;
     background-color: var(--primary-bg-hover);
     border-radius: 40px;
-    font-weight: 400;
-    font-size: 14px;
 }
diff --git a/frontend/src/scenes/insights/filters/BreakdownFilter/BreakdownTagMenu.scss b/frontend/src/scenes/insights/filters/BreakdownFilter/BreakdownTagMenu.scss
index 2edeadab568fc..ae386137e5627 100644
--- a/frontend/src/scenes/insights/filters/BreakdownFilter/BreakdownTagMenu.scss
+++ b/frontend/src/scenes/insights/filters/BreakdownFilter/BreakdownTagMenu.scss
@@ -1,6 +1,6 @@
 .histogram-bin-input {
     width: 60px;
-    margin: 0 0.5rem;
     padding: 0.25rem;
+    margin: 0 0.5rem;
     background-color: var(--bg-light);
 }
diff --git a/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.scss b/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.scss
index 510dc8b1bceb4..44d6ffcfd6922 100644
--- a/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.scss
+++ b/frontend/src/scenes/insights/views/BoldNumber/BoldNumber.scss
@@ -1,18 +1,24 @@
 @import '../../../../styles/mixins';
 
 .BoldNumber {
-    width: 100%;
-    padding: 2rem 3rem 3rem;
     display: flex;
+    flex: 1;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    flex-direction: column;
-    flex: 1;
+    width: 100%;
+    padding: 2rem 3rem 3rem;
 
     .InsightCard & {
         padding: 1rem;
     }
 
+    .BoldNumber__value {
+        width: 100%;
+        font-weight: 700;
+        letter-spacing: -0.025em;
+    }
+
     @include screen($md) {
         padding: 3rem 5rem 5rem;
 
@@ -20,18 +26,12 @@
             padding: 2rem;
         }
     }
-
-    .BoldNumber__value {
-        font-weight: 700;
-        width: 100%;
-        letter-spacing: -0.025em;
-    }
 }
 
 .BoldNumber__comparison {
     margin-top: 0.5rem;
     margin-bottom: -1.5rem;
-    color: var(--muted-alt);
     font-weight: 500;
+    color: var(--muted-alt);
     cursor: default;
 }
diff --git a/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.scss b/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.scss
index a315676b55406..256c96fa8223e 100644
--- a/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.scss
+++ b/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.scss
@@ -6,21 +6,21 @@
 
     .correlation-table-wrapper {
         table {
-            border-radius: var(--radius);
-            border: 1px solid var(--border);
-            border-collapse: separate;
-            border-spacing: 0;
             margin: 0 auto;
+            border-spacing: 0;
+            border-collapse: separate;
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
 
             td {
                 padding: 0.5rem 1rem;
-                border-left: 1px solid var(--border);
-                border-top: 1px solid var(--border);
                 text-align: center;
+                border-top: 1px solid var(--border);
+                border-left: 1px solid var(--border);
 
                 .percentage {
-                    font-weight: bold;
                     padding-bottom: 0.25rem;
+                    font-weight: bold;
                 }
 
                 &:first-child {
@@ -39,9 +39,9 @@
             thead,
             .horizontal-header {
                 font-weight: bold;
-                background-color: var(--antd-table-background-dark);
-                text-transform: uppercase;
                 color: var(--muted);
+                text-transform: uppercase;
+                background-color: var(--antd-table-background-dark);
             }
 
             tbody {
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelCorrelation.scss b/frontend/src/scenes/insights/views/Funnels/FunnelCorrelation.scss
index b01a965afdb4e..d1932ec322b9d 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelCorrelation.scss
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelCorrelation.scss
@@ -11,14 +11,14 @@
         }
 
         h4 {
-            font-size: 1.1em;
+            position: relative;
             display: flex;
             align-items: center;
-            border-bottom: 1px solid var(--border);
             padding: 0.5rem 1rem;
-            margin-left: -1rem;
             margin-right: -1rem;
-            position: relative;
+            margin-left: -1rem;
+            font-size: 1.1em;
+            border-bottom: 1px solid var(--border);
 
             .close-button {
                 position: absolute;
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationTable.scss b/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationTable.scss
index 41934f4a6aa43..8628fe75d08d6 100644
--- a/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationTable.scss
+++ b/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationTable.scss
@@ -1,8 +1,8 @@
 .funnel-correlation-table {
     margin-top: 1rem;
+    overflow: hidden;
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    overflow: hidden;
 
     .ant-table {
         thead th {
@@ -11,53 +11,52 @@
     }
 
     .funnel-correlation-header {
-        background: var(--mid);
         display: flex;
+        place-content: space-between space-between;
         align-items: center;
         align-self: stretch;
         padding: 0.25rem 0.5rem;
-        place-content: space-between space-between;
+        background: var(--mid);
         border-top-left-radius: var(--radius);
         border-top-right-radius: var(--radius);
 
         .table-header {
+            display: flex;
+            align-items: center;
+            font-size: 11px;
             font-style: normal;
             font-weight: bold;
-            font-size: 11px;
             line-height: 16px;
-            display: flex;
-            align-items: center;
-            letter-spacing: 0.02em;
-            text-transform: uppercase;
             color: var(--default);
+            text-transform: uppercase;
+            letter-spacing: 0.02em;
         }
 
         .table-options {
             display: flex;
             flex-grow: 1;
-            justify-content: flex-end;
             align-items: center;
+            justify-content: flex-end;
 
             .title {
-                font-family: var(--font-sans);
-                font-style: normal;
-                font-weight: 600;
-                font-size: 11px;
-                line-height: 16px;
-
                 /* identical to box height, or 145% */
 
                 display: flex;
                 align-items: center;
-                letter-spacing: 0.02em;
-                text-transform: uppercase;
                 margin: 5px;
+                font-family: var(--font-sans);
+                font-size: 11px;
+                font-style: normal;
+                font-weight: 600;
+                line-height: 16px;
                 color: var(--muted);
+                text-transform: uppercase;
+                letter-spacing: 0.02em;
             }
 
             .LemonCheckbox:not(:last-child) label {
-                border-radius: var(--radius) 0 0 var(--radius);
                 border-right: none;
+                border-radius: var(--radius) 0 0 var(--radius);
             }
 
             .LemonCheckbox:last-child label {
@@ -67,9 +66,9 @@
     }
 
     .column-info {
+        padding-left: 4px;
         color: var(--muted-alt);
         cursor: pointer;
-        padding-left: 4px;
     }
 
     .nested-properties-table {
diff --git a/frontend/src/scenes/insights/views/Histogram/Histogram.scss b/frontend/src/scenes/insights/views/Histogram/Histogram.scss
index 2742347145d09..d2e76482e53ae 100644
--- a/frontend/src/scenes/insights/views/Histogram/Histogram.scss
+++ b/frontend/src/scenes/insights/views/Histogram/Histogram.scss
@@ -9,8 +9,8 @@
     display: flex;
 
     svg {
-        margin-left: 1rem;
         margin-right: 1rem;
+        margin-left: 1rem;
 
         /*
          * Axis
@@ -66,10 +66,11 @@
 
         g#labels {
             text.bar-label {
+                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
                 // same as chart-js
                 font-size: 12px;
                 font-weight: normal;
-                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                 fill: var(--white);
 
                 &.outside {
diff --git a/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.scss b/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.scss
index 4158e729c4915..342c0b8940938 100644
--- a/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.scss
+++ b/frontend/src/scenes/insights/views/InsightsTable/InsightsTable.scss
@@ -3,9 +3,9 @@
     align-items: center;
 
     .edit-icon {
+        font-size: 1rem;
         color: var(--primary-3000);
         cursor: pointer;
-        font-size: 1rem;
     }
 
     .insights-label {
@@ -13,8 +13,8 @@
             cursor: pointer;
 
             .EntityFilterInfo {
-                color: var(--primary-3000);
                 font-weight: 500;
+                color: var(--primary-3000);
             }
         }
     }
diff --git a/frontend/src/scenes/insights/views/WorldMap/WorldMap.scss b/frontend/src/scenes/insights/views/WorldMap/WorldMap.scss
index e4ae155aede2f..e6e8e9742c393 100644
--- a/frontend/src/scenes/insights/views/WorldMap/WorldMap.scss
+++ b/frontend/src/scenes/insights/views/WorldMap/WorldMap.scss
@@ -1,13 +1,13 @@
 .WorldMap {
-    padding: 1rem 0;
     width: 100%;
+    padding: 1rem 0;
     color: var(--border);
 
     .landxx {
         fill: currentColor;
+        fill-rule: evenodd;
         stroke: var(--bg-light);
         stroke-width: 0.125rem;
-        fill-rule: evenodd;
 
         &:hover {
             color: var(--primary-3000-hover) !important;
diff --git a/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.scss b/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.scss
index 8f90c06671cf0..48e5accc597ac 100644
--- a/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.scss
+++ b/frontend/src/scenes/notebooks/AddToNotebook/DraggableToNotebook.scss
@@ -2,11 +2,12 @@
     position: relative;
 
     &--dragging {
+        background-color: var(--bg-light);
+        outline: 1px solid var(--primary-3000);
+
         // Weird hack - this fixes chrome from not correctly identifying the bounds of the component for the drag preview
         // https://github.com/react-dnd/react-dnd/issues/832#issuecomment-442071628
         transform: translate3d(0, 0, 0);
-        outline: 1px solid var(--primary-3000);
-        background-color: var(--bg-light);
     }
 
     &[draggable='true'] {
diff --git a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.scss b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.scss
index 1d4fa2d2021a3..026843de39a05 100644
--- a/frontend/src/scenes/notebooks/Nodes/NodeWrapper.scss
+++ b/frontend/src/scenes/notebooks/Nodes/NodeWrapper.scss
@@ -6,24 +6,24 @@
     transform: translate3d(0, 0, 0);
 
     .NotebookNode__box {
-        transform: translate3d(0, 0, 0);
+        overflow: hidden;
+        background-color: var(--bg-light);
         border: 1px solid var(--border-color);
         border-radius: var(--radius);
-        background-color: var(--bg-light);
         transition: border 150ms linear, margin-bottom 150ms linear;
-        overflow: hidden;
+        transform: translate3d(0, 0, 0);
 
         .NotebookNode__meta {
             display: flex;
-            justify-content: space-between;
             align-items: center;
+            justify-content: space-between;
+            height: var(--notebook-node-meta-height);
+            padding: var(--notebook-node-meta-padding);
+            overflow: hidden;
             font-size: 0.875rem;
             font-weight: 500;
             color: var(--primary-alt);
-            padding: var(--notebook-node-meta-padding);
             border-bottom: 1px solid var(--border);
-            height: var(--notebook-node-meta-height);
-            overflow: hidden;
         }
 
         .NotebookNode__settings {
@@ -31,26 +31,26 @@
         }
 
         .NotebookNode__content {
-            transition: box-shadow 150ms ease-out;
             z-index: 1;
+            transition: box-shadow 150ms ease-out;
         }
     }
 
     .NotebookNode__gap {
         display: flex;
         gap: 0.2rem;
+        align-items: center;
+        height: 1.25rem;
         overflow: hidden;
-        transition: all 150ms linear 1000ms;
         opacity: 0;
-        height: 1.25rem;
-        align-items: center;
+        transition: all 150ms linear 1000ms;
     }
 
     &--editable:hover,
     &--selected {
         .NotebookNode__gap {
-            opacity: 1;
             height: 2rem;
+            opacity: 1;
             transition: all 150ms linear;
         }
     }
@@ -65,11 +65,11 @@
         .NotebookNode__meta {
             position: absolute;
             top: 0;
-            left: 0;
             right: 0;
+            left: 0;
+            z-index: var(--z-popover);
             pointer-events: none;
             visibility: hidden;
-            z-index: var(--z-popover);
             background-color: var(--bg-light);
         }
 
@@ -94,8 +94,8 @@
 .NotebookNode.ph-image {
     img {
         flex: 1;
-        height: 100%;
         width: 100%;
+        height: 100%;
         object-fit: contain;
     }
 }
diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.scss b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
index ec7cf08ba88ca..49bb74651a3a2 100644
--- a/frontend/src/scenes/notebooks/Notebook/Notebook.scss
+++ b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
@@ -1,14 +1,14 @@
 .Notebook {
-    flex: 1;
     display: flex;
+    flex: 1;
     flex-direction: column;
     width: 100%;
 
     .NotebookEditor {
+        position: relative;
         flex: 1;
         width: 100%;
         overflow: hidden;
-        position: relative;
 
         .ProseMirror {
             &-focused {
@@ -28,16 +28,15 @@
             }
 
             > .is-empty::before {
-                content: attr(data-placeholder);
                 float: left;
+                height: 0;
                 color: rgb(0 0 0 / 20%);
+                pointer-events: none;
+                content: attr(data-placeholder);
 
                 [theme='dark'] & {
                     color: rgb(255 255 255 / 20%);
                 }
-
-                pointer-events: none;
-                height: 0;
             }
 
             > ol {
@@ -49,8 +48,8 @@
             }
 
             > ul[data-type='taskList'] {
-                list-style-type: none;
                 padding-left: 0;
+                list-style-type: none;
 
                 li {
                     display: flex;
@@ -88,26 +87,26 @@
             }
 
             > pre {
+                padding: 0.5rem;
+                margin-bottom: 0.5rem;
+                overflow-x: auto;
                 background-color: rgb(0 0 0 / 5%);
                 border-radius: var(--radius);
-                overflow-x: auto;
-                margin-bottom: 0.5rem;
-                padding: 0.5rem;
             }
 
             > code,
             > p code {
+                padding: 0.2rem;
                 background-color: rgb(0 0 0 / 5%);
                 border-radius: var(--radius);
-                padding: 0.2rem;
             }
         }
 
         .Backlink {
             padding: 0.125rem 0.25rem;
+            background-color: var(--white);
             border: 1px solid var(--border);
             border-radius: var(--radius);
-            background-color: var(--white);
 
             &:hover {
                 background-color: var(--side);
@@ -123,9 +122,9 @@
             }
 
             &.Backlink--active {
-                border: 1px solid var(--primary-3000);
-                background: var(--primary-3000);
                 color: var(--white);
+                background: var(--primary-3000);
+                border: 1px solid var(--primary-3000);
 
                 & .Backlink__label,
                 & svg {
@@ -148,18 +147,18 @@
     }
 
     .NotebookColumn {
+        --notebook-sidebar-height: calc(100vh - 9rem);
+
         position: relative;
         width: 0;
         transition: width var(--notebook-popover-transition-properties);
 
-        --notebook-sidebar-height: calc(100vh - 9rem);
-
         .NotebookColumn__content {
             position: sticky;
-            align-self: flex-start;
             top: 0;
-            transform: translateX(-100%);
+            align-self: flex-start;
             transition: transform var(--notebook-popover-transition-properties);
+            transform: translateX(-100%);
         }
 
         .NotebookScene &,
@@ -217,9 +216,10 @@
 
     &--editable {
         .NotebookEditor .ProseMirror {
+            flex: 1;
+
             // Add some padding to help clicking below the last element
             padding-bottom: 10rem;
-            flex: 1;
         }
 
         .NotebookColumn--left.NotebookColumn--showing {
@@ -233,8 +233,8 @@
     }
 
     .NotebookHistory {
-        flex: 1;
         display: flex;
+        flex: 1;
         flex-direction: column;
     }
 
@@ -243,8 +243,8 @@
         box-shadow: 0 4px 10px 0 rgb(0 0 0 / 10%);
 
         .LemonInput {
-            border: 0;
             min-height: 0;
+            border: 0;
         }
     }
 
diff --git a/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.scss b/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.scss
index 5cd1a52a8ca02..f108dd22ec473 100644
--- a/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.scss
+++ b/frontend/src/scenes/notebooks/NotebookPanel/NotebookPanel.scss
@@ -1,47 +1,47 @@
 @import '../../../styles/mixins';
 
 .NotebookPanel {
-    flex: 1;
     display: flex;
+    flex: 1;
     flex-direction: column;
-    background-color: var(--accent-3000);
     overflow: hidden;
+    background-color: var(--accent-3000);
 
     .NotebookPanelDropzone {
+        display: flex;
+        height: 4rem;
+        margin: 0.5rem;
         border: 2px dashed var(--border-3000);
         border-radius: var(--radius);
-        margin: 0.5rem;
         transition: all 150ms;
-        height: 4rem;
-        display: flex;
 
         .NotebookPanelDropzone__message {
-            flex: 1;
             display: flex;
+            flex: 1;
             flex-direction: column;
-            justify-content: center;
             align-items: center;
-            font-weight: 700;
+            justify-content: center;
+            padding: 1rem;
             font-size: 1rem;
+            font-weight: 700;
             color: var(--muted-alt);
             text-align: center;
             pointer-events: none;
             background-color: var(--bg-light);
-            padding: 1rem;
             opacity: 0.75;
             transition: all 150ms;
         }
 
         .NotebookPanelDropzone__dropped {
-            overflow: hidden;
-            flex: 1;
             display: flex;
+            flex: 1;
             flex-direction: column;
+            overflow: hidden;
         }
 
         &--active {
-            border-color: var(--primary-3000);
             height: 8rem;
+            border-color: var(--primary-3000);
 
             .NotebookPanelDropzone__message {
                 opacity: 1;
@@ -49,11 +49,11 @@
         }
 
         &--dropped {
-            border: none;
+            align-items: initial;
+            justify-content: flex-start;
             height: 100%;
             margin: 1rem;
-            justify-content: flex-start;
-            align-items: initial;
+            border: none;
         }
     }
 }
diff --git a/frontend/src/scenes/notebooks/NotebookPanel/NotebookPopover.scss b/frontend/src/scenes/notebooks/NotebookPanel/NotebookPopover.scss
index 4534f030b9bf5..938be24fbd6c8 100644
--- a/frontend/src/scenes/notebooks/NotebookPanel/NotebookPopover.scss
+++ b/frontend/src/scenes/notebooks/NotebookPanel/NotebookPopover.scss
@@ -10,8 +10,8 @@
         position: absolute;
         inset: 0;
         z-index: 1;
-        background-color: rgb(0 0 0 / 10%);
         pointer-events: none;
+        background-color: rgb(0 0 0 / 10%);
         opacity: 0;
         transition: opacity 200ms ease-out;
     }
@@ -19,31 +19,31 @@
     .NotebookPopover__content {
         position: absolute;
         top: 1rem;
-        bottom: 1rem;
         right: 1rem;
+        bottom: 1rem;
         z-index: 2;
+        display: flex;
+        flex-direction: column;
+        width: 50rem; // This will be controlable
         min-width: 30rem;
         max-width: calc(100vw - 2rem);
-        width: 50rem; // This will be controlable
         pointer-events: all;
-        display: flex;
-        flex-direction: column;
+        transition: transform var(--notebook-popover-transition-properties),
+            width var(--notebook-popover-transition-properties);
 
         // Transition properties that are overwritten
         transform: translateX(calc(100% + 1rem));
-        transition: transform var(--notebook-popover-transition-properties),
-            width var(--notebook-popover-transition-properties);
 
         .NotebookPopover__content__card {
-            flex: 1;
             display: flex;
+            flex: 1;
             flex-direction: column;
-            border-radius: var(--radius);
+            overflow: hidden;
             background-color: var(--bg-3000);
             border: 1px solid var(--border-3000);
+            border-radius: var(--radius);
             box-shadow: 0 16px 16px rgb(0 0 0 / 0%);
             transition: box-shadow 150ms linear;
-            overflow: hidden;
         }
     }
 
@@ -87,42 +87,42 @@
     }
 
     .NotebookPanelDropzone {
-        box-shadow: 0 16px 16px rgb(0 0 0 / 15%);
-        border: 2px dashed var(--border-3000);
-        border-radius: var(--radius);
-        transition: all 150ms;
+        display: flex;
         height: 4rem;
         margin-bottom: 1rem;
         backdrop-filter: blur(5px);
-        display: flex;
+        border: 2px dashed var(--border-3000);
+        border-radius: var(--radius);
+        box-shadow: 0 16px 16px rgb(0 0 0 / 15%);
+        transition: all 150ms;
 
         .NotebookPanelDropzone__message {
-            flex: 1;
             display: flex;
+            flex: 1;
             flex-direction: column;
-            justify-content: center;
             align-items: center;
-            font-weight: 700;
+            justify-content: center;
+            padding: 1rem;
             font-size: 1rem;
+            font-weight: 700;
             color: var(--muted-alt);
             text-align: center;
             pointer-events: none;
             background-color: var(--bg-light);
-            padding: 1rem;
             opacity: 0.75;
             transition: all 150ms;
         }
 
         .NotebookPanelDropzone__dropped {
-            overflow: hidden;
-            flex: 1;
             display: flex;
+            flex: 1;
             flex-direction: column;
+            overflow: hidden;
         }
 
         &--active {
-            border-color: var(--primary-3000);
             height: 8rem;
+            border-color: var(--primary-3000);
 
             .NotebookPanelDropzone__message {
                 opacity: 1;
@@ -130,12 +130,12 @@
         }
 
         &--dropped {
+            align-items: initial;
+            justify-content: flex-start;
+            height: 100%;
             padding: 1rem;
-            border-color: var(--primary-3000);
             background-color: var(--bg-light);
-            height: 100%;
-            justify-content: flex-start;
-            align-items: initial;
+            border-color: var(--primary-3000);
         }
     }
 }
diff --git a/frontend/src/scenes/notebooks/NotebookScene.scss b/frontend/src/scenes/notebooks/NotebookScene.scss
index 596dcd4efbed7..3844c09c24552 100644
--- a/frontend/src/scenes/notebooks/NotebookScene.scss
+++ b/frontend/src/scenes/notebooks/NotebookScene.scss
@@ -2,8 +2,8 @@
     .Navigation3000 & {
         position: absolute;
         inset: 0;
-        overflow-y: auto;
         padding: 0 1rem;
+        overflow-y: auto;
     }
 
     .ProseMirror > .react-renderer {
diff --git a/frontend/src/scenes/notebooks/Suggestions/FloatingSuggestions.scss b/frontend/src/scenes/notebooks/Suggestions/FloatingSuggestions.scss
index bc4d9791e78ff..80e60079591f6 100644
--- a/frontend/src/scenes/notebooks/Suggestions/FloatingSuggestions.scss
+++ b/frontend/src/scenes/notebooks/Suggestions/FloatingSuggestions.scss
@@ -4,7 +4,7 @@
 }
 
 .NotebookFloatingButton {
-    z-index: var(--z-popover);
     position: absolute;
     left: 0;
+    z-index: var(--z-popover);
 }
diff --git a/frontend/src/scenes/paths/Paths.scss b/frontend/src/scenes/paths/Paths.scss
index f15cb42af4435..9d78145ffbde8 100644
--- a/frontend/src/scenes/paths/Paths.scss
+++ b/frontend/src/scenes/paths/Paths.scss
@@ -1,11 +1,11 @@
 .Paths {
     position: relative;
-    max-height: 100%;
     width: 100%;
     height: 720px;
+    max-height: 100%;
 
     .Paths__canvas {
-        height: 100% !important;
         width: 100%;
+        height: 100% !important;
     }
 }
diff --git a/frontend/src/scenes/persons/MergeSplitPerson.scss b/frontend/src/scenes/persons/MergeSplitPerson.scss
index e8e8d458c31d1..bec932bf130d9 100644
--- a/frontend/src/scenes/persons/MergeSplitPerson.scss
+++ b/frontend/src/scenes/persons/MergeSplitPerson.scss
@@ -1,14 +1,14 @@
 .merge-split-person {
     .activity-header {
-        background-color: var(--mid);
-        border-top: 1px solid var(--border);
-        border-bottom: 1px solid var(--border);
-        margin-left: -24px;
-        margin-right: -24px;
-        padding: 8px 0;
         display: flex;
         justify-content: center;
+        padding: 8px 0;
+        margin-right: -24px;
         margin-bottom: 1rem;
+        margin-left: -24px;
+        background-color: var(--mid);
+        border-top: 1px solid var(--border);
+        border-bottom: 1px solid var(--border);
     }
 
     .ant-modal-header {
@@ -29,9 +29,9 @@
 
     // TODO: consider moving this style globally
     code {
-        background-color: var(--mid);
-        color: var(--primary-alt);
         padding: 4px 8px;
+        color: var(--primary-alt);
+        background-color: var(--mid);
         border-radius: var(--radius);
     }
 }
diff --git a/frontend/src/scenes/persons/PersonDisplay.scss b/frontend/src/scenes/persons/PersonDisplay.scss
index 1a4c0a82b7a14..35bd87c28bad9 100644
--- a/frontend/src/scenes/persons/PersonDisplay.scss
+++ b/frontend/src/scenes/persons/PersonDisplay.scss
@@ -2,8 +2,8 @@
     display: inline;
 
     .ProfilePicture {
-        transition: opacity 200ms ease;
         margin-right: 0.5rem;
+        transition: opacity 200ms ease;
     }
 
     a:hover {
diff --git a/frontend/src/scenes/persons/PersonScene.scss b/frontend/src/scenes/persons/PersonScene.scss
index e555d6434aecb..f00101bfb8348 100644
--- a/frontend/src/scenes/persons/PersonScene.scss
+++ b/frontend/src/scenes/persons/PersonScene.scss
@@ -2,9 +2,9 @@
     display: inline-flex;
     align-items: center;
     height: 1.25rem;
-    line-height: 1.125rem;
-    margin: 0 0 0 0.25rem;
     padding: 0 0.25rem 0 0.375rem;
+    margin: 0 0 0 0.25rem;
+    line-height: 1.125rem;
     color: var(--primary-3000);
     cursor: pointer;
 
diff --git a/frontend/src/scenes/plugins/source/PluginSource.scss b/frontend/src/scenes/plugins/source/PluginSource.scss
index 3c5ba7ac5a183..661dab92145e3 100644
--- a/frontend/src/scenes/plugins/source/PluginSource.scss
+++ b/frontend/src/scenes/plugins/source/PluginSource.scss
@@ -1,6 +1,6 @@
 .PluginSource {
     .ant-form-item-explain-error {
-        white-space: pre-wrap;
         font-family: var(--font-mono);
+        white-space: pre-wrap;
     }
 }
diff --git a/frontend/src/scenes/project-homepage/ProjectHomepage.scss b/frontend/src/scenes/project-homepage/ProjectHomepage.scss
index 33df45806bc54..90d80d46c02ea 100644
--- a/frontend/src/scenes/project-homepage/ProjectHomepage.scss
+++ b/frontend/src/scenes/project-homepage/ProjectHomepage.scss
@@ -2,10 +2,10 @@
     container-type: inline-size;
 
     .ProjectHomepage__dashboardheader {
-        margin-top: 1rem;
         display: flex;
-        justify-content: space-between;
         align-items: center;
+        justify-content: space-between;
+        margin-top: 1rem;
 
         .ProjectHomepage__dashboardheader__title {
             display: flex;
@@ -42,12 +42,12 @@
     }
 
     .empty-state-container {
-        background-color: var(--side);
-        width: 100%;
-        justify-content: center;
-        align-items: center;
-        padding: 4rem;
         display: flex;
         flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        padding: 4rem;
+        background-color: var(--side);
     }
 }
diff --git a/frontend/src/scenes/retention/RetentionTable.scss b/frontend/src/scenes/retention/RetentionTable.scss
index cb796874edeed..ad12d2fdfe983 100644
--- a/frontend/src/scenes/retention/RetentionTable.scss
+++ b/frontend/src/scenes/retention/RetentionTable.scss
@@ -1,17 +1,17 @@
 .RetentionTable {
     --retention-table-color: var(--primary-3000);
 
-    font-weight: 500;
     width: 100%;
+    font-weight: 500;
 
     th {
-        white-space: nowrap;
-        font-weight: 500;
-        border-left: 1px solid var(--border);
         padding: 0 0.5rem;
+        font-weight: 500;
+        text-align: left;
+        white-space: nowrap;
         border-top: 10px solid transparent;
         border-bottom: 10px solid transparent;
-        text-align: left;
+        border-left: 1px solid var(--border);
 
         &:first-of-type {
             border-left: none;
@@ -36,13 +36,13 @@
     }
 
     .RetentionTable__Tab {
+        min-height: 2rem;
         padding: 0.5rem;
         margin: 2px;
-        border-radius: 0.25rem;
         text-align: right;
-        min-height: 2rem;
-        transition: transform 200ms ease-out;
         background-color: var(--retention-table-color); // NOTE: This is usually overridden in JS
+        border-radius: 0.25rem;
+        transition: transform 200ms ease-out;
 
         &:hover {
             transform: scale(1.05);
@@ -76,18 +76,18 @@
         line-height: 1rem;
 
         th {
-            padding-left: 0.25rem;
             padding-right: 0.25rem;
+            padding-left: 0.25rem;
         }
 
         .RetentionTable__TextTab {
-            padding-left: 0.25rem;
             padding-right: 0.25rem;
+            padding-left: 0.25rem;
         }
 
         .RetentionTable__Tab {
-            margin: 0;
             padding: 0.5rem 0.25rem;
+            margin: 0;
         }
     }
 }
diff --git a/frontend/src/scenes/saved-insights/SavedInsights.scss b/frontend/src/scenes/saved-insights/SavedInsights.scss
index a50d141741fc7..23d127480e8c3 100644
--- a/frontend/src/scenes/saved-insights/SavedInsights.scss
+++ b/frontend/src/scenes/saved-insights/SavedInsights.scss
@@ -2,34 +2,34 @@
 
 .saved-insights {
     > .LemonTable td {
-        padding-bottom: 0.75rem !important;
         padding-top: 0.75rem !important;
+        padding-bottom: 0.75rem !important;
 
         &.icon-column {
             font-size: 1.5rem;
             color: var(--muted);
 
             .LemonSkeleton {
-                height: 2rem;
                 width: 2rem;
+                height: 2rem;
             }
         }
     }
 
     .new-insight-dropdown-btn {
-        cursor: pointer;
         height: 40px;
-        background-color: var(--primary-3000);
         padding: 8px 12px 8px 16px;
+        color: white;
+        cursor: pointer;
+        background-color: var(--primary-3000);
         border: 1px solid var(--border);
         border-radius: 4px;
-        color: white;
     }
 
     .saved-insight-empty-state {
         display: flex;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
         text-align: center;
 
         .insight-empty-state__wrapper {
@@ -38,22 +38,22 @@
             margin-bottom: 17rem;
 
             .illustration-main {
+                margin-bottom: 1rem;
                 font-size: 5rem;
                 line-height: 1em;
-                text-align: center;
-                margin-bottom: 1rem;
                 color: var(--border);
+                text-align: center;
             }
 
             .empty-state__title {
-                font-weight: 600;
                 font-size: 1.5rem;
+                font-weight: 600;
                 line-height: 1.6rem;
             }
 
             .empty-state__description {
-                font-weight: 500;
                 font-size: 1rem;
+                font-weight: 500;
                 line-height: 1.7rem;
                 color: var(--muted);
             }
@@ -75,14 +75,14 @@
     align-items: center;
 
     .icon-container {
-        height: 22px;
+        position: relative;
         width: 22px;
+        height: 22px;
         margin-right: 8px;
-        position: relative;
 
         .icon-container-inner {
-            font-size: 22px;
             margin-left: -2px;
+            font-size: 22px;
         }
     }
 }
diff --git a/frontend/src/scenes/session-recordings/player/PlayerFrame.scss b/frontend/src/scenes/session-recordings/player/PlayerFrame.scss
index 28a6555789e01..9682ebb04bf9e 100644
--- a/frontend/src/scenes/session-recordings/player/PlayerFrame.scss
+++ b/frontend/src/scenes/session-recordings/player/PlayerFrame.scss
@@ -1,21 +1,21 @@
 @import '../../../styles/mixins';
 
 .PlayerFrame {
-    height: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
+    height: 100%;
     overflow: hidden;
     background-color: var(--bg-charcoal);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
 
     .PlayerFrame__content {
         position: absolute;
 
         iframe {
-            border: 0;
             background-color: white;
+            border: 0;
         }
 
         // Copied over from rrweb replay css
@@ -27,23 +27,23 @@
             position: absolute;
             width: 20px;
             height: 20px;
-            transition: left 0.05s linear, top 0.05s linear;
-            background-size: contain;
-            background-position: center center;
-            background-repeat: no-repeat;
             background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDUwIDUwIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPkRlc2lnbl90bnA8L3RpdGxlPjxwYXRoIGQ9Ik00OC43MSw0Mi45MUwzNC4wOCwyOC4yOSw0NC4zMywxOEExLDEsMCwwLDAsNDQsMTYuMzlMMi4zNSwxLjA2QTEsMSwwLDAsMCwxLjA2LDIuMzVMMTYuMzksNDRhMSwxLDAsMCwwLDEuNjUuMzZMMjguMjksMzQuMDgsNDIuOTEsNDguNzFhMSwxLDAsMCwwLDEuNDEsMGw0LjM4LTQuMzhBMSwxLDAsMCwwLDQ4LjcxLDQyLjkxWm0tNS4wOSwzLjY3TDI5LDMyYTEsMSwwLDAsMC0xLjQxLDBsLTkuODUsOS44NUwzLjY5LDMuNjlsMzguMTIsMTRMMzIsMjcuNThBMSwxLDAsMCwwLDMyLDI5TDQ2LjU5LDQzLjYyWiI+PC9wYXRoPjwvc3ZnPg==');
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: contain;
             border-color: transparent; /* otherwise we transition from black when .touch-device class is added */
+            transition: left 0.05s linear, top 0.05s linear;
         }
 
         .replayer-mouse::after {
-            content: '';
             display: inline-block;
             width: 20px;
             height: 20px;
+            content: '';
             background: rgb(73 80 246);
             border-radius: 100%;
-            transform: translate(-50%, -50%);
             opacity: 0.3;
+            transform: translate(-50%, -50%);
         }
 
         .replayer-mouse.active::after {
@@ -51,15 +51,15 @@
         }
 
         .replayer-mouse.touch-device {
-            background-image: none; /* there's no passive cursor on touch-only screens */
             width: 70px;
             height: 70px;
-            border-width: 4px;
-            border-style: solid;
-            border-radius: 100%;
-            margin-left: -37px;
             margin-top: -37px;
+            margin-left: -37px;
+            background-image: none; /* there's no passive cursor on touch-only screens */
             border-color: rgb(73 80 246 / 0%);
+            border-style: solid;
+            border-width: 4px;
+            border-radius: 100%;
             transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;
         }
 
@@ -83,29 +83,29 @@
 
         @keyframes PlayerFrame__click {
             0% {
-                opacity: 0.3;
                 width: 20px;
                 height: 20px;
+                opacity: 0.3;
             }
 
             50% {
-                opacity: 0.5;
                 width: 10px;
                 height: 10px;
+                opacity: 0.5;
             }
         }
 
         @keyframes PlayerFrame__touch-click {
             0% {
-                opacity: 0;
                 width: 20px;
                 height: 20px;
+                opacity: 0;
             }
 
             50% {
-                opacity: 0.5;
                 width: 10px;
                 height: 10px;
+                opacity: 0.5;
             }
         }
     }
diff --git a/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.scss b/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.scss
index ad3bc2a5ae2bf..bcbb05b8e695e 100644
--- a/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.scss
+++ b/frontend/src/scenes/session-recordings/player/PlayerFrameOverlay.scss
@@ -6,13 +6,13 @@
     .PlayerFrameOverlay__content {
         position: absolute;
         inset: 0;
+        z-index: 1;
         display: flex;
-        justify-content: center;
         align-items: center;
-        z-index: 1;
-        transition: opacity 100ms;
+        justify-content: center;
         background-color: rgb(0 0 0 / 15%);
         opacity: 0.8;
+        transition: opacity 100ms;
 
         &:hover {
             opacity: 1;
diff --git a/frontend/src/scenes/session-recordings/player/PlayerMeta.scss b/frontend/src/scenes/session-recordings/player/PlayerMeta.scss
index 2089db1b92dd8..ceae9d6b30bc9 100644
--- a/frontend/src/scenes/session-recordings/player/PlayerMeta.scss
+++ b/frontend/src/scenes/session-recordings/player/PlayerMeta.scss
@@ -1,16 +1,16 @@
 .PlayerMeta {
     position: relative;
-    border-bottom: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
     overflow: hidden;
+    border-bottom: 1px solid var(--border);
 
     .PlayerMetaPersonProperties {
-        background: var(--side);
+        padding: 0.5rem;
         overflow: auto;
+        background: var(--side);
         border-bottom: 1px solid transparent;
-        padding: 0.5rem;
     }
 
     &:not(.PlayerMeta--fullscreen) {
@@ -46,18 +46,18 @@
 
     &--fullscreen {
         flex-direction: row;
-        justify-content: space-between;
         align-items: center;
+        justify-content: space-between;
         height: 48px;
 
         .PlayerMetaPersonProperties {
             position: fixed;
             top: 48px;
-            left: 0;
             bottom: 97px; // NOTE: This isn't perfect but for now hardcoded to match the bottom area size.
+            left: 0;
             z-index: 1;
-            max-width: 40rem;
             width: 100%;
+            max-width: 40rem;
             border-right: 1px solid var(--border);
             transition: 200ms transform ease-out;
 
diff --git a/frontend/src/scenes/session-recordings/player/PlayerUpNext.scss b/frontend/src/scenes/session-recordings/player/PlayerUpNext.scss
index 850ac5880448f..634ca26deb300 100644
--- a/frontend/src/scenes/session-recordings/player/PlayerUpNext.scss
+++ b/frontend/src/scenes/session-recordings/player/PlayerUpNext.scss
@@ -1,9 +1,9 @@
 .PlayerUpNext {
-    transition: 250ms transform ease-out;
     position: absolute;
     right: 1rem;
     bottom: 1rem;
     z-index: 11;
+    transition: 250ms transform ease-out;
 
     &--enter {
         transform: translateY(200%);
@@ -27,26 +27,26 @@
     position: relative;
     display: flex;
     align-items: center;
-    line-height: 1.5rem;
     min-height: 2.5rem;
     padding: 0.25rem 0.75rem;
-    border-radius: var(--radius);
-    box-shadow: var(--shadow-elevation);
-    background-color: rgb(255 255 255 / 75%);
-    backdrop-filter: blur(5px);
+    overflow: hidden;
     font-weight: 600;
+    line-height: 1.5rem;
     cursor: pointer;
-    overflow: hidden;
+    background-color: rgb(255 255 255 / 75%);
+    backdrop-filter: blur(5px);
     border: 1px solid rgb(0 0 0 / 50%);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-elevation);
 
     .PlayerUpNextButtonBackground {
         position: absolute;
-        left: 0;
         top: 0;
         bottom: 0;
+        left: 0;
         width: 0;
-        background-color: var(--bg-light);
         color: var(--primary-alt);
+        background-color: var(--bg-light);
     }
 
     &.PlayerUpNextButton--animating {
@@ -57,8 +57,8 @@
 
     &:hover {
         .PlayerUpNextButtonBackground {
-            animation: none;
             width: 100%;
+            animation: none;
         }
     }
 }
diff --git a/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.scss b/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.scss
index dadd79e777ec8..bbe98a798bc1f 100644
--- a/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.scss
+++ b/frontend/src/scenes/session-recordings/player/SessionRecordingPlayer.scss
@@ -7,12 +7,12 @@
     position: relative;
     display: flex;
     flex-direction: row;
-    overflow: hidden;
-    height: 100%;
     width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--bg-light);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    background-color: var(--bg-light);
 
     &--no-border {
         border: none;
@@ -22,10 +22,10 @@
     .SessionRecordingPlayer__body {
         position: relative;
         z-index: 0;
-        background-color: var(--bg-light);
         min-width: 1px;
         height: 100%;
         overflow: hidden;
+        background-color: var(--bg-light);
     }
 
     .SessionRecordingPlayer__main {
@@ -36,9 +36,9 @@
     &--fullscreen {
         position: fixed;
         inset: 0;
+        z-index: var(--z-modal);
         overflow-y: auto;
         background-color: var(--bg-light);
-        z-index: var(--z-modal);
         border: none;
         border-radius: 0;
 
@@ -63,18 +63,18 @@
     }
 
     .SessionRecordingPlayer__inspector {
-        flex-shrink: 0;
-        border-left: 1px solid var(--border);
         position: absolute;
-        right: 0;
         top: 0;
+        right: 0;
         bottom: 0;
         z-index: 10;
+        flex-shrink: 0;
         width: var(--inspector-width);
         max-width: 95%;
-        transform: translateX(calc(100% - var(--inspector-peek-width)));
-        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+        border-left: 1px solid var(--border);
         box-shadow: 0 0 5px rgb(0 0 0 / 10%);
+        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+        transform: translateX(calc(100% - var(--inspector-peek-width)));
 
         .PlayerInspectorPreview {
             position: absolute;
@@ -95,12 +95,12 @@
 
     &--inspector-focus {
         .SessionRecordingPlayer__inspector {
-            transform: translateX(0);
             box-shadow: -10px 0 20px rgb(0 0 0 / 20%);
+            transform: translateX(0);
 
             .PlayerInspectorPreview {
-                opacity: 0;
                 pointer-events: none;
+                opacity: 0;
             }
         }
     }
@@ -111,13 +111,13 @@
         }
 
         .SessionRecordingPlayer__inspector {
-            min-width: 30%;
+            position: relative;
             width: 40%;
+            min-width: 30%;
             max-width: 400px;
-            position: relative;
-            transform: translateX(0);
             box-shadow: none;
             transition: none;
+            transform: translateX(0);
 
             .PlayerInspectorPreview {
                 display: none;
@@ -142,13 +142,13 @@
 
     .PlayerControlSeekIcon__seconds {
         position: absolute;
-        font-size: 6px;
-        font-weight: bold;
-        text-align: center;
         inset: 0;
         display: flex;
         align-items: center;
         justify-content: center;
+        font-size: 6px;
+        font-weight: bold;
+        text-align: center;
     }
 
     .PlayerControlSeekIcon__icon {
diff --git a/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss b/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss
index 53e2b3f3ca9a0..4e19e823e9a79 100644
--- a/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss
+++ b/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss
@@ -3,10 +3,10 @@
     --slider-height: 20px;
     --thumb-size: 15px;
 
-    width: 100%;
-    height: var(--slider-height);
     position: relative;
     display: flex;
+    width: 100%;
+    height: var(--slider-height);
 
     &:hover,
     &--scrubbing {
@@ -18,30 +18,30 @@
     }
 
     .PlayerSeekbar__slider {
+        position: absolute;
+        top: calc((var(--slider-height) - var(--bar-height)) / 2);
+        right: 0;
+        left: 0;
         z-index: 2;
         height: var(--bar-height);
+        cursor: pointer;
         background-color: var(--border-light);
         border-radius: var(--bar-height);
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: calc((var(--slider-height) - var(--bar-height)) / 2);
         transition: height 150ms ease-in-out, top 150ms ease-in-out;
-        cursor: pointer;
 
         .PlayerSeekbar__bufferbar,
         .PlayerSeekbar__currentbar,
         .PlayerSeekbar__segments {
             position: absolute;
-            height: 100%;
-            left: 0;
             top: 0;
+            left: 0;
             width: 0;
+            height: 100%;
         }
 
         .PlayerSeekbar__bufferbar {
-            background-color: var(--border);
             z-index: 2;
+            background-color: var(--border);
             border-radius: var(--bar-height);
         }
 
@@ -52,10 +52,10 @@
         }
 
         .PlayerSeekbar__segments {
-            height: 100%;
-            white-space: nowrap;
             z-index: 4;
             width: 100%;
+            height: 100%;
+            white-space: nowrap;
 
             .PlayerSeekbar__segments__item {
                 float: left;
@@ -70,27 +70,27 @@
         }
 
         .PlayerSeekbar__thumb {
-            z-index: 5;
-            backface-visibility: hidden;
-            top: calc(var(--bar-height) / 2);
-            margin-top: calc(var(--thumb-size) / 2 * -1);
             position: absolute;
-            border-radius: 50%;
+            top: calc(var(--bar-height) / 2);
+            z-index: 5;
             width: var(--thumb-size);
             height: var(--thumb-size);
-            border: 2px solid var(--bg-light);
+            margin-top: calc(var(--thumb-size) / 2 * -1);
             background-color: var(--recording-seekbar-red);
+            border: 2px solid var(--bg-light);
+            border-radius: 50%;
             transition: top 150ms ease-in-out;
+            backface-visibility: hidden;
         }
     }
 
     .PlayerSeekBarPreview {
         position: absolute;
-        z-index: 6;
         bottom: 100%;
+        z-index: 6;
         width: 100%;
-        opacity: 0;
         pointer-events: none;
+        opacity: 0;
         transition: opacity 150ms ease-in-out;
 
         .PlayerSeekBarPreview__tooltip {
@@ -98,33 +98,33 @@
 
             .PlayerSeekBarPreview__tooltip__content {
                 display: inline-block;
-                border-radius: var(--radius);
                 padding: 0.1rem;
+                margin-bottom: 0.5rem;
                 font-size: 0.8rem;
                 font-weight: 600;
                 color: #fff;
                 background-color: var(--muted-dark);
+                border-radius: var(--radius);
                 transform: translateX(-50%);
-                margin-bottom: 0.5rem;
             }
         }
     }
 }
 
 .PlayerSeekbarTicks {
+    position: relative;
     z-index: 1;
     width: 100%;
     height: 0.75rem;
-    position: relative;
 
     .PlayerSeekbarTick {
         --tick-color: var(--muted-alt);
         --tick-width: 3px;
 
-        cursor: pointer;
         position: absolute;
-        height: 100%;
         top: 0;
+        height: 100%;
+        cursor: pointer;
         transition: transform 150ms ease-in-out;
 
         &--warning {
@@ -142,36 +142,36 @@
         .PlayerSeekbarTick__line {
             position: absolute;
             width: var(--tick-width);
+            height: 100%;
             margin-left: calc(var(--tick-width) / 2 * -1);
+            background-color: var(--tick-color);
             border-radius: 2px;
             opacity: 0.5;
-            height: 100%;
-            background-color: var(--tick-color);
         }
 
         .PlayerSeekbarTick__info {
             position: absolute;
             bottom: 100%;
-            background-color: var(--tick-color);
+            max-width: 20rem;
             padding: 0.25rem 0.5rem;
+            margin-bottom: 0.25rem;
             font-size: 0.8rem;
-            border-radius: 0.25rem;
-            transform: translateX(-50%);
-            white-space: nowrap;
             color: #fff;
-            margin-bottom: 0.25rem;
-            opacity: 0;
+            white-space: nowrap;
             visibility: hidden;
+            background-color: var(--tick-color);
+            border-radius: 0.25rem;
+            opacity: 0;
             transition: opacity 150ms ease-in-out;
-            max-width: 20rem;
+            transform: translateX(-50%);
         }
 
         &:hover {
             --tick-width: 5px;
 
             .PlayerSeekbarTick__info {
-                opacity: 1;
                 visibility: visible;
+                opacity: 1;
             }
 
             .PlayerSeekbarTick__line {
diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.scss b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.scss
index b2a7191f56ce2..0a5e430bf08e4 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.scss
+++ b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.scss
@@ -2,11 +2,11 @@
     position: absolute;
     top: 0;
     right: 0;
-    pointer-events: none;
     z-index: 1;
     width: 1rem;
     height: 0.5rem;
     margin-top: 0.25rem;
+    pointer-events: none;
     background-color: var(--primary);
     border-radius: var(--radius) 0 0 var(--radius);
     transition: transform 200ms linear;
diff --git a/frontend/src/scenes/session-recordings/player/view-explorer/SessionRecordingPlayerExplorer.scss b/frontend/src/scenes/session-recordings/player/view-explorer/SessionRecordingPlayerExplorer.scss
index c7ef3432dab58..f09d91117b50e 100644
--- a/frontend/src/scenes/session-recordings/player/view-explorer/SessionRecordingPlayerExplorer.scss
+++ b/frontend/src/scenes/session-recordings/player/view-explorer/SessionRecordingPlayerExplorer.scss
@@ -1,17 +1,17 @@
 .SessionRecordingPlayerExplorer {
     display: flex;
-    flex-direction: column;
     flex: 1;
+    flex-direction: column;
     height: 100%;
     padding: 0.5rem;
     overflow: hidden;
 
     .SessionRecordingPlayerExplorer__wrapper {
         flex: 1;
-        border: 1px solid var(--border);
         padding: 0.5rem;
-        background-color: var(--default);
         overflow: hidden;
+        background-color: var(--default);
+        border: 1px solid var(--border);
 
         .SessionRecordingPlayerExplorer__iframe {
             transform-origin: top left;
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss
index 05cd2af4360e3..f0a6e629424ea 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss
+++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss
@@ -4,22 +4,22 @@
 .SessionRecordingsPlaylist {
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
     align-items: flex-start;
+    justify-content: flex-start;
+    height: 100%;
     overflow: hidden;
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    height: 100%;
 
     .SessionRecordingsPlaylist__list {
-        flex-shrink: 0;
         display: flex;
         flex-direction: column;
-        max-width: 350px;
-        min-width: 300px;
+        flex-shrink: 0;
         width: 25%;
-        overflow: hidden;
+        min-width: 300px;
+        max-width: 350px;
         height: 100%;
+        overflow: hidden;
 
         .text-link {
             .posthog-3000 & {
@@ -30,9 +30,9 @@
 
     .SessionRecordingsPlaylist__player {
         flex: 1;
+        width: 100%;
         height: 100%;
         overflow: hidden;
-        width: 100%;
 
         .SessionRecordingsPlaylist__loading {
             display: flex;
@@ -65,11 +65,11 @@
 }
 
 .SessionRecordingPreview {
+    position: relative;
     display: flex;
     padding: 0.5rem 0 0.5rem 0.5rem;
-    cursor: pointer;
-    position: relative;
     overflow: hidden;
+    cursor: pointer;
     border-left: 6px solid transparent;
     transition: background-color 200ms ease, border 200ms ease;
 
@@ -82,7 +82,7 @@
     }
 
     .SessionRecordingPreview__property-icon:hover {
-        transition: opacity 200ms;
         opacity: 1;
+        transition: opacity 200ms;
     }
 }
diff --git a/frontend/src/scenes/settings/Settings.scss b/frontend/src/scenes/settings/Settings.scss
index ac3e09d44c3e1..37b8f3daf2e94 100644
--- a/frontend/src/scenes/settings/Settings.scss
+++ b/frontend/src/scenes/settings/Settings.scss
@@ -2,14 +2,15 @@
     display: flex;
     gap: 2rem;
     align-items: start;
+    margin-top: 1rem;
 
     .Settings__sections {
-        flex-shrink: 0;
         position: sticky;
-        max-width: 20rem;
-        min-width: 14rem;
-        width: 20%;
         top: 0.5rem;
+        flex-shrink: 0;
+        width: 20%;
+        min-width: 14rem;
+        max-width: 20rem;
 
         .posthog-3000 & {
             top: 4rem;
@@ -21,19 +22,17 @@
     }
 
     &--compact {
-        gap: 0;
         flex-direction: column;
+        gap: 0;
 
         .Settings__sections {
+            position: relative;
             width: 100%;
             min-width: 100%;
             max-width: 100%;
-            position: relative;
         }
     }
 
-    margin-top: 1rem;
-
     .posthog-3000 &,
     .LemonModal & {
         margin-top: 0;
diff --git a/frontend/src/scenes/settings/organization/InviteModal.scss b/frontend/src/scenes/settings/organization/InviteModal.scss
index 0e0e6032de5d8..0f12f6048fc64 100644
--- a/frontend/src/scenes/settings/organization/InviteModal.scss
+++ b/frontend/src/scenes/settings/organization/InviteModal.scss
@@ -1,10 +1,10 @@
 .InviteModal__share_link {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
     display: flex;
-    white-space: nowrap;
     width: 175px;
     overflow: scroll;
+    white-space: nowrap;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 
 .InviteModal__share_link::-webkit-scrollbar {
diff --git a/frontend/src/scenes/surveys/EditSurvey.scss b/frontend/src/scenes/surveys/EditSurvey.scss
index 67fe48acdefa9..438ff1fc3d3e0 100644
--- a/frontend/src/scenes/surveys/EditSurvey.scss
+++ b/frontend/src/scenes/surveys/EditSurvey.scss
@@ -12,7 +12,7 @@
     position: absolute;
     bottom: -5px;
     left: 6px;
+    padding: 0 5px;
     font-size: 10px;
     background-color: var(--bg-3000);
-    padding: 0 5px;
 }
diff --git a/frontend/src/scenes/surveys/SurveyAppearance.scss b/frontend/src/scenes/surveys/SurveyAppearance.scss
index 7dd612f0a5e4e..e9da4385a2655 100644
--- a/frontend/src/scenes/surveys/SurveyAppearance.scss
+++ b/frontend/src/scenes/surveys/SurveyAppearance.scss
@@ -1,83 +1,83 @@
 .survey-form {
+    position: relative;
+    box-sizing: border-box;
+    flex-direction: column;
+    width: 320px;
     margin: 0;
-    color: black;
-    font-weight: normal;
     font-family: -apple-system, BlinkMacSystemFont, Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
         'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    font-weight: normal;
+    line-height: 1.4;
+    color: black;
     text-align: left;
-    width: 320px;
     border-bottom: 0;
-    flex-direction: column;
-    box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);
     border-radius: 10px;
-    line-height: 1.4;
-    position: relative;
-    box-sizing: border-box;
+    box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);
 }
 
 .form-submit[disabled] {
-    opacity: 0.6;
-    filter: grayscale(100%);
     cursor: not-allowed;
+    filter: grayscale(100%);
+    opacity: 0.6;
 }
 
 .survey-form textarea {
-    font-size: 14px;
+    padding-top: 10px;
+    padding-right: 10px;
+    padding-left: 10px;
+    margin-top: 14px;
     font-family: -apple-system, BlinkMacSystemFont, Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
         'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    background: white;
+    font-size: 14px;
     color: black;
-    outline: none;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 10px;
+    background: white;
     border-radius: 6px;
-    margin-top: 14px;
+    outline: none;
 }
 
 .form-submit {
+    position: relative;
     box-sizing: border-box;
+    display: inline-block;
+    width: 100%;
+    padding: 12px;
     margin: 0;
-    font-family: inherit;
     overflow: visible;
-    text-transform: none;
-    position: relative;
-    display: inline-block;
+    font-family: inherit;
+    font-size: 14px;
     font-weight: 700;
-    white-space: nowrap;
     text-align: center;
-    border: 1.5px solid transparent;
+    text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
+    text-transform: none;
+    white-space: nowrap;
+    touch-action: manipulation;
     cursor: pointer;
     user-select: none;
-    touch-action: manipulation;
-    padding: 12px;
-    font-size: 14px;
+    border: 1.5px solid transparent;
     border-radius: 6px;
     outline: 0;
-    text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
     box-shadow: 0 2px 0 rgb(0 0 0 / 4.5%);
-    width: 100%;
 }
 
 .form-cancel {
     float: right;
-    border: none;
-    background: none;
     cursor: pointer;
+    background: none;
+    border: none;
 }
 
 .cancel-btn-wrapper {
     position: absolute;
-    width: 35px;
-    height: 35px;
-    border-radius: 100%;
     top: 0;
     right: 0;
-    transform: translate(50%, -50%);
-    background: white;
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    width: 35px;
+    height: 35px;
+    background: white;
+    border-radius: 100%;
+    transform: translate(50%, -50%);
 }
 
 .bolded {
@@ -90,27 +90,27 @@
 }
 
 .footer-branding {
-    font-size: 11px;
-    margin-top: 10px;
-    text-align: center;
     display: flex;
-    justify-content: center;
     gap: 4px;
     align-items: center;
+    justify-content: center;
+    margin-top: 10px;
+    font-size: 11px;
     font-weight: 500;
-    text-decoration: none;
     color: inherit !important;
+    text-align: center;
+    text-decoration: none;
 }
 
 .survey-box {
-    padding: 20px 25px 10px;
     display: flex;
     flex-direction: column;
+    padding: 20px 25px 10px;
 }
 
 .survey-question {
-    font-weight: 500;
     font-size: 14px;
+    font-weight: 500;
 }
 
 .question-textarea-wrapper {
@@ -119,14 +119,14 @@
 }
 
 .description {
-    font-size: 13px;
     margin-top: 5px;
+    font-size: 13px;
     opacity: 0.6;
 }
 
 .ratings-number {
-    font-size: 14px;
     padding: 8px 0;
+    font-size: 14px;
     border: none;
 }
 
@@ -140,8 +140,8 @@
 
 .rating-options-buttons {
     display: grid;
-    border-radius: 6px;
     overflow: hidden;
+    border-radius: 6px;
 }
 
 .rating-options-buttons > .ratings-number {
@@ -158,10 +158,10 @@
 }
 
 .ratings-emoji {
+    padding: 0;
     font-size: 16px;
     background-color: transparent;
     border: none;
-    padding: 0;
 }
 
 .ratings-emoji:hover {
@@ -171,9 +171,9 @@
 .rating-text {
     display: flex;
     flex-direction: row;
-    font-size: 11px;
     justify-content: space-between;
     margin-top: 6px;
+    font-size: 11px;
     opacity: 0.6;
 }
 
@@ -184,13 +184,13 @@
 }
 
 .multiple-choice-options .choice-option {
+    position: relative;
     display: flex;
-    align-items: center;
     gap: 4px;
+    align-items: center;
+    margin-bottom: 5px;
     font-size: 13px;
     cursor: pointer;
-    margin-bottom: 5px;
-    position: relative;
 }
 
 .multiple-choice-options > .choice-option:last-of-type {
@@ -198,12 +198,12 @@
 }
 
 .multiple-choice-options input {
-    cursor: pointer;
     position: absolute;
-    opacity: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
-    inset: 0;
+    cursor: pointer;
+    opacity: 0;
 }
 
 .choice-check {
@@ -237,19 +237,19 @@
 
 .multiple-choice-options label {
     width: 100%;
-    cursor: pointer;
     padding: 10px;
+    cursor: pointer;
+    background: white;
     border: 1.5px solid rgb(0 0 0 / 25%);
     border-radius: 4px;
-    background: white;
 }
 
 .multiple-choice-options .choice-option-open label {
-    padding-right: 30px;
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     max-width: 100%;
+    padding-right: 30px;
 }
 
 .multiple-choice-options .choice-option-open input:disabled + label {
@@ -258,25 +258,25 @@
 
 .multiple-choice-options .choice-option-open label input {
     position: relative;
-    opacity: 1;
     flex-grow: 1;
     border: 0;
     outline: 0;
+    opacity: 1;
 }
 
 .thank-you-message {
     position: relative;
     bottom: 0;
-    box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);
-    font-family: -apple-system, BlinkMacSystemFont, Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
-        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    border-radius: 10px;
-    padding: 20px 25px 10px;
-    text-align: center;
+    box-sizing: border-box;
     width: 320px;
     min-width: 150px;
+    padding: 20px 25px 10px;
+    font-family: -apple-system, BlinkMacSystemFont, Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
     line-height: 1.4;
-    box-sizing: border-box;
+    text-align: center;
+    border-radius: 10px;
+    box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);
 }
 
 .thank-you-message-body {
@@ -286,8 +286,8 @@
 
 .thank-you-message-header {
     margin: 10px 0 0;
-    font-weight: bold;
     font-size: 19px;
+    font-weight: bold;
     color: inherit;
 }
 
diff --git a/frontend/src/scenes/surveys/SurveyTemplates.scss b/frontend/src/scenes/surveys/SurveyTemplates.scss
index c9622e7624689..29dd242f597e7 100644
--- a/frontend/src/scenes/surveys/SurveyTemplates.scss
+++ b/frontend/src/scenes/surveys/SurveyTemplates.scss
@@ -1,13 +1,13 @@
 @import '../../styles/mixins';
 
 .SurveyTemplateContainer {
-    align-items: center;
-    background: var(--bg-light);
-    border-radius: var(--radius);
-    border: 1px solid var(--border);
     display: flex;
     flex: 1;
+    align-items: center;
     min-height: 300px;
+    background: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
 
     &:hover {
         cursor: pointer;
diff --git a/frontend/src/scenes/surveys/SurveyView.scss b/frontend/src/scenes/surveys/SurveyView.scss
index 62ae32fea2cc8..49568a0bbfa79 100644
--- a/frontend/src/scenes/surveys/SurveyView.scss
+++ b/frontend/src/scenes/surveys/SurveyView.scss
@@ -10,10 +10,10 @@
 }
 
 .masonry-item {
-    margin: 0;
+    box-sizing: border-box;
     display: grid;
     grid-template-rows: 1fr auto;
+    margin: 0;
     margin-bottom: 10px;
     break-inside: avoid;
-    box-sizing: border-box;
 }
diff --git a/frontend/src/scenes/toolbar-launch/ToolbarLaunch.scss b/frontend/src/scenes/toolbar-launch/ToolbarLaunch.scss
index 33e6efce15e57..7063bfdd10da0 100644
--- a/frontend/src/scenes/toolbar-launch/ToolbarLaunch.scss
+++ b/frontend/src/scenes/toolbar-launch/ToolbarLaunch.scss
@@ -7,10 +7,6 @@
         .fh-item {
             width: calc(100% * (1 / 2) - 8px);
 
-            @media (max-width: 599px) {
-                width: calc(100% - 8px);
-            }
-
             .fh-icon {
                 font-size: 1.6em;
             }
@@ -18,6 +14,10 @@
             h4 {
                 font-size: 1.2em;
             }
+
+            @media (max-width: 599px) {
+                width: calc(100% - 8px);
+            }
         }
     }
 }
diff --git a/frontend/src/scenes/trends/viz/ActionsPie.scss b/frontend/src/scenes/trends/viz/ActionsPie.scss
index 47af0778a00bd..a800b500afdbc 100644
--- a/frontend/src/scenes/trends/viz/ActionsPie.scss
+++ b/frontend/src/scenes/trends/viz/ActionsPie.scss
@@ -1,14 +1,14 @@
 .ActionsPie {
-    flex: 1;
-    width: 100%;
-    height: 100%;
     display: flex;
+    flex: 1;
     flex-direction: row;
     gap: 0.5rem;
+    width: 100%;
+    height: 100%;
 
     .ActionsPie__component {
-        min-width: 33%;
         flex: 1;
+        min-width: 33%;
         padding: 1rem;
 
         .ActionsPie__chart {
diff --git a/frontend/src/styles/fonts.scss b/frontend/src/styles/fonts.scss
index 4e367ffed08cb..45d8b5b735138 100644
--- a/frontend/src/styles/fonts.scss
+++ b/frontend/src/styles/fonts.scss
@@ -3,8 +3,8 @@
     font-family: Inter;
     font-style: normal;
     font-weight: 700;
-    font-display: swap;
     src: url('../../public/Inter.woff2') format('woff2'), url('../../public/Inter.woff') format('woff');
+    font-display: swap;
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
         U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
@@ -13,8 +13,8 @@
     font-family: Inter;
     font-style: normal;
     font-weight: 500;
-    font-display: swap;
     src: url('../../public/Inter.woff2') format('woff2'), url('../../public/Inter.woff') format('woff');
+    font-display: swap;
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
         U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
@@ -24,8 +24,8 @@
     font-family: Inter;
     font-style: normal;
     font-weight: 400;
-    font-display: swap;
     src: url('../../public/Inter.woff2') format('woff2'), url('../../public/Inter.woff') format('woff');
+    font-display: swap;
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
         U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
@@ -35,11 +35,11 @@
     font-family: MatterSQ;
     font-style: normal;
     font-weight: 800;
-    font-display: swap;
 
     // src: url('../../public/MatterSQ-Bold.woff2') format('woff2'), url('../../public/MatterSQ-Bold.woff') format('woff');
     src: url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Bold.woff2') format('woff2'),
         url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Bold.woff') format('woff');
+    font-display: swap;
 }
 
 /* Matter; bold (700); latin */
@@ -47,11 +47,11 @@
     font-family: MatterSQ;
     font-style: normal;
     font-weight: 700;
-    font-display: swap;
 
     // src: url('../../public/MatterSQ-SemiBold.woff2') format('woff2'), url('../../public/MatterSQ-SemiBold.woff') format('woff');
     src: url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff2') format('woff2'),
         url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-SemiBold.woff') format('woff');
+    font-display: swap;
 }
 
 /* Matter; medium (500); latin */
@@ -59,9 +59,9 @@
     font-family: MatterSQ;
     font-style: normal;
     font-weight: 500;
-    font-display: swap;
 
     // src: url('../../public/MatterSQ-Medium.woff2') format('woff2'), url('../../public/MatterSQ-Medium.woff') format('woff');
     src: url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff2') format('woff2'),
         url('https://d1sdjtjk6xzm7.cloudfront.net/MatterSQ-Medium.woff') format('woff');
+    font-display: swap;
 }
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index a5fe4bb85e174..795f466a95b13 100644
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -30,30 +30,26 @@ body strong {
 
 // Disable default styling for ul
 ul {
+    padding-left: 0;
     margin-bottom: 0;
     list-style: none;
-    padding-left: 0;
 }
 
 // This may look odd but sets up our utility classes
 * {
+    border-color: var(--border);
     border-style: solid;
     border-width: 0;
-    border-color: var(--border);
 }
 
 .page-title-row {
     display: flex;
     flex-wrap: wrap;
+    gap: 0.5rem 1rem;
     align-items: center;
     min-height: 2.5rem;
-    gap: 0.5rem 1rem;
     margin: 1.25rem 0 0.25rem;
 
-    @include screen($md) {
-        flex-wrap: nowrap;
-    }
-
     .ant-form-item {
         margin-bottom: 0 !important;
     }
@@ -61,25 +57,29 @@ ul {
     .posthog-3000 & {
         margin-top: 1rem;
     }
+
+    @include screen($md) {
+        flex-wrap: nowrap;
+    }
 }
 
 .page-title {
     min-width: 0;
-    font-size: 28px;
-    line-height: 34px;
     margin: 0;
+    font-size: 28px;
     font-weight: 600;
+    line-height: 34px;
 }
 
 .page-caption {
-    @extend .text-sm;
-
     max-width: 48rem;
     margin-bottom: 1rem;
 
     &.tabbed {
         margin-bottom: 0.5rem;
     }
+
+    @extend .text-sm;
 }
 
 .page-description {
@@ -88,30 +88,30 @@ ul {
 }
 
 .page-buttons {
-    flex-shrink: 0;
-    flex-grow: 1;
     display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    gap: 0.5rem;
     align-items: center;
     justify-content: right;
-    gap: 0.5rem;
 }
 
 .secondary {
     font-size: 0.9em;
-    letter-spacing: 1px;
-    color: var(--primary-alt);
     font-weight: var(--font-medium);
+    color: var(--primary-alt);
     text-transform: uppercase;
-    border: 0;
+    letter-spacing: 1px;
     background: none;
+    border: 0;
 }
 
 .card-secondary {
     font-size: 11px;
+    font-weight: 600;
     color: var(--muted);
-    letter-spacing: 0.5px;
     text-transform: uppercase;
-    font-weight: 600;
+    letter-spacing: 0.5px;
 }
 
 mark {
@@ -121,14 +121,14 @@ mark {
 
 // Supplement text, such as email under user name
 .supplement {
-    text-overflow: ellipsis;
     overflow: hidden;
-    color: var(--muted-alt);
     font-size: 0.8125rem;
+    color: var(--muted-alt);
+    text-overflow: ellipsis;
 
     &--danger {
-        color: var(--danger);
         font-weight: 600;
+        color: var(--danger);
     }
 }
 
@@ -172,15 +172,15 @@ input::-ms-clear {
 
 .Toastify__toast {
     align-items: center;
-    opacity: 1 !important;
     padding: 0.75rem;
     margin-bottom: 0.5rem;
-    border-radius: var(--radius);
     font-family: var(--font-sans);
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow-elevation);
     font-size: 1rem;
     cursor: unset;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-elevation);
+    opacity: 1 !important;
 }
 
 .Toastify__toast-container {
@@ -188,11 +188,8 @@ input::-ms-clear {
 }
 
 .Toastify__toast-body {
-    @extend .text-sm;
-    @extend .text-default;
-
-    font-weight: 500;
     padding: 0;
+    font-weight: 500;
 
     b,
     strong {
@@ -202,14 +199,17 @@ input::-ms-clear {
     button {
         margin: 0 0.75rem;
     }
+
+    @extend .text-sm;
+    @extend .text-default;
 }
 
 .Toastify__toast-icon {
-    color: var(--muted-alt);
     width: 1.5rem;
     height: 1.5rem;
     margin-right: 0.75rem;
     font-size: 1.5rem;
+    color: var(--muted-alt);
 
     .Toastify__toast--success & {
         color: var(--toastify-color-success);
@@ -233,16 +233,16 @@ input::-ms-clear {
 .scrollable {
     &::before,
     &::after {
-        z-index: 1;
-        transition: opacity 200ms ease;
-        opacity: 0;
-        content: '';
         position: absolute;
         top: 0;
         left: 0;
+        z-index: 1;
         width: 100%;
         height: 100%;
         pointer-events: none;
+        content: '';
+        opacity: 0;
+        transition: opacity 200ms ease;
     }
 
     &::before {
@@ -314,13 +314,13 @@ input::-ms-clear {
 }
 
 .info-indicator {
+    margin-left: 4px;
     color: var(--primary-alt) !important;
     cursor: pointer;
-    margin-left: 4px;
 
     &.left {
-        margin-left: 0;
         margin-right: 4px;
+        margin-left: 0;
     }
 }
 
@@ -343,47 +343,47 @@ input::-ms-clear {
 // Graph series glyph
 
 .graph-series-glyph {
-    border-radius: 50%;
-    border: 2px solid var(--default);
-    font-weight: bold;
-    font-size: 12px;
-    height: 22px;
-    width: 22px;
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
+    width: 22px;
+    height: 22px;
+    font-size: 12px;
+    font-weight: bold;
     pointer-events: none;
-    flex-shrink: 0;
+    border: 2px solid var(--default);
+    border-radius: 50%;
 
     // variants
     &.funnel-step-glyph {
-        border-color: var(--border);
-        background-color: white;
-        color: var(--primary-alt);
-        height: 23px;
         width: 23px;
+        height: 23px;
         font-size: unset;
+        color: var(--primary-alt);
+        background-color: white;
+        border-color: var(--border);
     }
 }
 
 // Bottom notice (DEBUG=1 mode)
 
 #bottom-notice {
+    position: fixed;
+    bottom: 0;
+    left: 0;
     z-index: var(--z-bottom-notice);
     display: flex !important;
     flex-direction: row;
-    position: fixed;
     width: 100%;
-    bottom: 0;
-    left: 0;
-    background: #000;
-    color: #fff;
     font-size: 0.75rem;
     line-height: 1.5rem;
+    color: #fff;
+    background: #000;
 
     code {
-        color: inherit;
         font-size: inherit;
+        color: inherit;
     }
 
     &.warning div {
@@ -423,15 +423,15 @@ input::-ms-clear {
     }
 
     button {
-        border: none;
-        background: transparent;
-        color: inherit;
         width: 1.5rem;
         height: 1.5rem;
         padding: 0;
         font-size: 1rem;
         font-weight: bold;
+        color: inherit;
         cursor: pointer;
+        background: transparent;
+        border: none;
     }
 
     @media screen and (min-width: 750px) {
@@ -461,12 +461,12 @@ input::-ms-clear {
 }
 
 .overlay__child {
-    transition: opacity 0.25s ease;
     position: absolute;
-    width: 100%;
-    height: 100%;
     top: 0;
     left: 0;
+    width: 100%;
+    height: 100%;
+    transition: opacity 0.25s ease;
 
     .overlay--danger & {
         background: repeating-linear-gradient(
@@ -482,8 +482,8 @@ input::-ms-clear {
 // Tags
 
 .simple-tag {
-    border-radius: var(--radius);
     padding: 2px 6px;
+    border-radius: var(--radius);
 
     &.tag-light-blue {
         background-color: var(--primary-highlight);
@@ -498,27 +498,27 @@ input::-ms-clear {
 
 .main-app-content {
     position: relative; // So that scene-level <SpinnerOverlay /> is positioned correctly.
-    min-width: 0;
+    flex: 1;
     width: 100%;
+    min-width: 0;
     padding: 0 1rem 1rem;
-    flex: 1;
     background-color: var(--bg-light);
 
-    @include screen($sm) {
-        padding: 0 1rem 2rem;
-    }
-
-    @include screen($lg) {
-        padding: 0 2rem 4rem;
-    }
-
     &.main-app-content--plain {
         padding: 0;
     }
 
     &.main-app-content--container {
-        max-width: 72rem;
         align-self: center;
+        max-width: 72rem;
+    }
+
+    @include screen($sm) {
+        padding: 0 1rem 2rem;
+    }
+
+    @include screen($lg) {
+        padding: 0 2rem 4rem;
     }
 }
 
@@ -556,10 +556,10 @@ body {
     }
 
     &.posthog-3000 {
-        @include posthog-3000-variables;
+        --shadow-elevation: var(--shadow-elevation-3000);
 
-        background: var(--bg-3000);
         overflow: hidden; // Each area handles scrolling individually (e.g. navbar, scene, side panel)
+        background: var(--bg-3000);
 
         .LemonButton,
         .Link {
@@ -574,8 +574,6 @@ body {
             }
         }
 
-        --shadow-elevation: var(--shadow-elevation-3000);
-
         * > {
             ::-webkit-scrollbar {
                 width: 0.5rem;
@@ -587,8 +585,8 @@ body {
             }
 
             ::-webkit-scrollbar-thumb {
-                border-radius: 0.25rem;
                 background: var(--trace-3000);
+                border-radius: 0.25rem;
 
                 &:hover {
                     background: var(--muted-3000);
@@ -602,6 +600,8 @@ body {
         h4 {
             font-family: var(--font-title);
         }
+
+        @include posthog-3000-variables;
     }
 
     h1,
@@ -612,13 +612,13 @@ body {
     }
 
     h5 {
+        margin-bottom: 0.25rem;
         font-size: 0.6875rem;
         font-weight: 600;
+        line-height: 1.5rem;
         color: var(--muted-alt);
         text-transform: uppercase;
         letter-spacing: 0.5px;
-        margin-bottom: 0.25rem;
-        line-height: 1.5rem;
     }
 
     pre,
@@ -644,8 +644,8 @@ body {
     }
 
     .ant-dropdown {
-        border-radius: var(--radius);
         color: var(--default);
+        border-radius: var(--radius);
     }
 
     .ant-dropdown-menu {
diff --git a/frontend/src/styles/mixins.scss b/frontend/src/styles/mixins.scss
index 6fb6db7db668a..dc16291fd11ee 100644
--- a/frontend/src/styles/mixins.scss
+++ b/frontend/src/styles/mixins.scss
@@ -1,30 +1,30 @@
 @import 'vars';
 
 %mixin-gradient-overlay {
-    content: '';
+    position: absolute;
+    bottom: 0;
     width: 100%;
     height: 3rem;
-    background: linear-gradient(to top, var(--bg-light), transparent);
-    position: absolute;
     pointer-events: none;
-    bottom: 0;
+    content: '';
+    background: linear-gradient(to top, var(--bg-light), transparent);
 }
 
 %mixin-gradient-overlay-right {
-    content: '';
+    position: absolute;
+    bottom: 0;
     width: 3rem;
     height: 100%;
-    background: linear-gradient(to left, var(--bg-light), transparent);
-    position: absolute;
     pointer-events: none;
-    bottom: 0;
+    content: '';
+    background: linear-gradient(to left, var(--bg-light), transparent);
 }
 
 %mixin-text-ellipsis {
+    max-width: calc(100% - 8px);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: calc(100% - 8px);
 }
 
 @mixin screen($breakpoint) {
diff --git a/frontend/src/styles/utilities.scss b/frontend/src/styles/utilities.scss
index d01caa82c1d77..3aa6535b3c326 100644
--- a/frontend/src/styles/utilities.scss
+++ b/frontend/src/styles/utilities.scss
@@ -48,13 +48,13 @@
     }
 
     .mx-#{escape-number($space)} {
-        margin-left: #{$space * 0.25}rem;
         margin-right: #{$space * 0.25}rem;
+        margin-left: #{$space * 0.25}rem;
     }
 
     .-mx-#{escape-number($space)} {
-        margin-left: #{-$space * 0.25}rem;
         margin-right: #{-$space * 0.25}rem;
+        margin-left: #{-$space * 0.25}rem;
     }
 
     .my-#{escape-number($space)} {
@@ -68,8 +68,8 @@
     }
 
     .px-#{escape-number($space)} {
-        padding-left: #{$space * 0.25}rem;
         padding-right: #{$space * 0.25}rem;
+        padding-left: #{$space * 0.25}rem;
     }
 
     .py-#{escape-number($space)} {
@@ -86,8 +86,8 @@
     }
 
     .inset-x-#{escape-number($space)} {
-        left: #{$space * 0.25}rem;
         right: #{$space * 0.25}rem;
+        left: #{$space * 0.25}rem;
     }
 
     .inset-y-#{escape-number($space)} {
@@ -431,8 +431,8 @@ $decorations: underline, overline, line-through, no-underline;
         border-color: var(--#{$name});
     }
     .border-x-#{$name} {
-        border-left-color: var(--#{$name});
         border-right-color: var(--#{$name});
+        border-left-color: var(--#{$name});
     }
     .border-y-#{$name} {
         border-top-color: var(--#{$name});
@@ -755,11 +755,6 @@ $decorations: underline, overline, line-through, no-underline;
     $prefix: if($name == 'base', '', $name + '\\:');
 
     @include screen($size) {
-        @for $i from 1 through 12 {
-            .#{$prefix}grid-cols-#{$i} {
-                grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
-            }
-        }
         .#{$prefix}grid-cols-none {
             grid-template-columns: none;
         }
@@ -768,65 +763,80 @@ $decorations: underline, overline, line-through, no-underline;
         .#{$prefix}col-auto {
             grid-column: auto;
         }
+        .#{$prefix}col-span-full {
+            grid-column: 1 / -1;
+        }
+        .#{$prefix}col-start-auto {
+            grid-column-start: auto;
+        }
+        .#{$prefix}col-end-auto {
+            grid-column-end: auto;
+        }
+
+        // Grid Row Start/End
+        .#{$prefix}row-auto {
+            grid-row: auto;
+        }
+        .#{$prefix}row-span-full {
+            grid-row: 1 / -1;
+        }
+        .#{$prefix}row-start-auto {
+            grid-row-start: auto;
+        }
+        .#{$prefix}row-end-auto {
+            grid-row-end: auto;
+        }
+        .#{$prefix}gap-px {
+            gap: 1px;
+        }
+        .#{$prefix}gap-x-px {
+            column-gap: 1px;
+        }
+        .#{$prefix}gap-y-px {
+            row-gap: 1px;
+        }
+
+        @for $i from 1 through 12 {
+            .#{$prefix}grid-cols-#{$i} {
+                grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+            }
+        }
 
         @for $i from 1 through 12 {
             .#{$prefix}col-span-#{$i} {
                 grid-column: span #{$i} / span #{$i};
             }
         }
-        .#{$prefix}col-span-full {
-            grid-column: 1 / -1;
-        }
 
         @for $i from 1 through 13 {
             .#{$prefix}col-start-#{$i} {
                 grid-column-start: #{$i};
             }
         }
-        .#{$prefix}col-start-auto {
-            grid-column-start: auto;
-        }
 
         @for $i from 1 through 13 {
             .#{$prefix}col-end-#{$i} {
                 grid-column-end: #{$i};
             }
         }
-        .#{$prefix}col-end-auto {
-            grid-column-end: auto;
-        }
-
-        // Grid Row Start/End
-        .#{$prefix}row-auto {
-            grid-row: auto;
-        }
 
         @for $i from 1 through 6 {
             .#{$prefix}row-span-#{$i} {
                 grid-row: span #{$i} / span #{$i};
             }
         }
-        .#{$prefix}row-span-full {
-            grid-row: 1 / -1;
-        }
 
         @for $i from 1 through 7 {
             .#{$prefix}row-start-#{$i} {
                 grid-row-start: #{$i};
             }
         }
-        .#{$prefix}row-start-auto {
-            grid-row-start: auto;
-        }
 
         @for $i from 1 through 7 {
             .#{$prefix}row-end-#{$i} {
                 grid-row-end: #{$i};
             }
         }
-        .#{$prefix}row-end-auto {
-            grid-row-end: auto;
-        }
 
         // Gap
         @each $space in $all_spaces {
@@ -840,15 +850,6 @@ $decorations: underline, overline, line-through, no-underline;
                 row-gap: #{$space * 0.25}rem;
             }
         }
-        .#{$prefix}gap-px {
-            gap: 1px;
-        }
-        .#{$prefix}gap-x-px {
-            column-gap: 1px;
-        }
-        .#{$prefix}gap-y-px {
-            row-gap: 1px;
-        }
     }
 }
 
@@ -898,8 +899,8 @@ $decorations: underline, overline, line-through, no-underline;
 }
 
 .break-normal {
-    overflow-wrap: normal;
     word-break: normal;
+    overflow-wrap: normal;
 }
 
 .break-words {
@@ -1026,8 +1027,8 @@ $decorations: underline, overline, line-through, no-underline;
 }
 
 .rounded-b {
-    border-bottom-left-radius: var(--radius); /* 4px */
     border-bottom-right-radius: var(--radius); /* 4px */
+    border-bottom-left-radius: var(--radius); /* 4px */
 }
 
 .rounded-none {
@@ -1358,16 +1359,16 @@ $decorations: underline, overline, line-through, no-underline;
 }
 
 .line-clamp-2 {
-    overflow: hidden;
     display: -webkit-box;
+    overflow: hidden;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
 }
 
 .transition-all {
-    transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
+    transition-property: all;
 }
 
 .aspect-auto {
diff --git a/frontend/src/styles/utility-legacy.scss b/frontend/src/styles/utility-legacy.scss
index 1d319f9bee2fd..d7bcbe3369bf9 100644
--- a/frontend/src/styles/utility-legacy.scss
+++ b/frontend/src/styles/utility-legacy.scss
@@ -5,8 +5,8 @@
     align-items: center;
     margin-top: 12px;
     font-size: 22px;
-    line-height: 26px;
     font-weight: bold;
+    line-height: 26px;
 
     &.highlighted {
         padding: 1rem 1rem 1rem 0.5rem;
diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss
index 058e0fcf85f4d..74badea05a1ca 100644
--- a/frontend/src/styles/vars.scss
+++ b/frontend/src/styles/vars.scss
@@ -224,11 +224,6 @@ $_lifecycle_dormant: $_danger;
 // root variables are defined as a mixin here because
 // the toolbar needs them attached to :host not :root
 @mixin root-variables {
-    // Design System colors
-    @each $name, $hex in $colors {
-        --#{$name}: #{$hex};
-    }
-
     // TODO: Remove the primary-bg...
     --primary-bg-hover: var(--primary-highlight);
     --primary-bg-active: #{$_primary_bg_active};
@@ -376,6 +371,11 @@ $_lifecycle_dormant: $_danger;
     --notebook-popover-transition-properties: 150ms cubic-bezier(0, 0.5, 0.5, 1);
     --notebook-column-left-width: 27rem;
     --notebook-column-right-width: 20rem;
+
+    // Design System colors
+    @each $name, $hex in $colors {
+        --#{$name}: #{$hex};
+    }
 }
 
 // defined here so that they can be shared with the toolbar
diff --git a/frontend/src/toolbar/actions/ActionsTab.scss b/frontend/src/toolbar/actions/ActionsTab.scss
index e60d73fffed74..1e356ffb7da09 100644
--- a/frontend/src/toolbar/actions/ActionsTab.scss
+++ b/frontend/src/toolbar/actions/ActionsTab.scss
@@ -2,13 +2,13 @@
     transition: opacity 0.5s;
 
     .action-field-hint {
-        font-size: 12px;
         margin-top: 4px;
+        font-size: 12px;
     }
 
     .action-field-caption {
+        padding: 8px 0;
         font-size: 0.8em;
         color: rgb(0 0 0 / 50%);
-        padding: 8px 0;
     }
 }
diff --git a/frontend/src/toolbar/bar/Toolbar.scss b/frontend/src/toolbar/bar/Toolbar.scss
index 0e8fa9ebe7cbb..51f5b206bb258 100644
--- a/frontend/src/toolbar/bar/Toolbar.scss
+++ b/frontend/src/toolbar/bar/Toolbar.scss
@@ -1,11 +1,13 @@
 @import '../../styles/vars';
 
 #button-toolbar {
-    // default to light theme
-    @include light-mode-3000-variables;
-    @include posthog-3000-variables;
-
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2147483020;
     user-select: none; // Make the app feel less page-like and more app-like - apps scarcely allow text selection
+    opacity: 1;
+    transition: opacity ease 0.5s;
 
     * > {
         ::-webkit-scrollbar {
@@ -18,8 +20,8 @@
         }
 
         ::-webkit-scrollbar-thumb {
-            border-radius: 0.25rem;
             background: var(--trace-3000);
+            border-radius: 0.25rem;
 
             &:hover {
                 background: var(--muted-3000);
@@ -27,48 +29,45 @@
         }
     }
 
-    position: fixed;
-    left: 0;
-    top: 0;
-    z-index: 2147483020;
-    opacity: 1;
-    transition: opacity ease 0.5s;
-
     & + .HedgehogBuddy {
         z-index: 2147483020;
     }
+
+    // default to light theme
+    @include light-mode-3000-variables;
+    @include posthog-3000-variables;
 }
 
 #button-toolbar[theme='dark'] {
-    @include dark-mode-3000-variables;
-
     // override the mark value so that feature flag overrides are visible _and legible_ in dark mode
     --mark: var(--secondary-3000-hover-dark);
+
+    @include dark-mode-3000-variables;
 }
 
 .ToolbarMenu {
     position: fixed;
+    z-index: 2;
     max-width: calc(100% - 2rem);
     height: 0;
-    z-index: 2;
 
     .ToolbarMenu__content {
         position: absolute;
-        background-color: var(--bg-3000);
-        color: var(--text-3000);
-        border-radius: var(--radius);
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        width: 30rem;
 
         // transition: height 0.5s ease, border 0.5s ease;
 
         max-height: 0;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        filter: drop-shadow(0 5px 10px var(--trace-3000));
-        bottom: 0;
-        width: 30rem;
         margin-left: -15rem;
+        overflow: hidden;
         overflow-y: auto;
+        color: var(--text-3000);
+        background-color: var(--bg-3000);
+        filter: drop-shadow(0 5px 10px var(--trace-3000));
+        border-radius: var(--radius);
     }
 
     &--visible {
@@ -92,23 +91,28 @@
 }
 
 .Toolbar {
+    --toolbar-button-x: 0;
+    --toolbar-button-y: 0;
+    --toolbar-translate: translate(var(--toolbar-button-x), var(--toolbar-button-y));
+
+    position: fixed;
+    z-index: 1;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    z-index: 1;
-    background-color: var(--bg-3000);
+
+    // fixed width so that animations work when changing width
+    width: 15.2rem;
+    overflow: hidden;
     color: var(--text-3000);
-    transition-property: filter, width, transform;
-    transition-duration: 150ms;
-    transition-timing-function: ease;
+    background-color: var(--bg-3000);
     filter: drop-shadow(0 5px 10px var(--trace-3000));
     border: 1px solid var(--border-bold-3000);
     border-radius: var(--radius);
-    overflow: hidden;
-    position: fixed;
-
-    // fixed width so that animations work when changing width
-    width: 15.2rem;
+    transition-timing-function: ease;
+    transition-duration: 150ms;
+    transition-property: filter, width, transform;
+    transform: var(--toolbar-translate);
 
     > :first-child {
         border-right: 1px solid var(--border-bold-3000);
@@ -118,12 +122,6 @@
         border-left: 1px solid var(--border-bold-3000);
     }
 
-    --toolbar-button-x: 0;
-    --toolbar-button-y: 0;
-    --toolbar-translate: translate(var(--toolbar-button-x), var(--toolbar-button-y));
-
-    transform: var(--toolbar-translate);
-
     &--dragging {
         // Disable transform transition whilst dragging
         transition-property: filter, width;
diff --git a/frontend/src/toolbar/bar/ToolbarButton.scss b/frontend/src/toolbar/bar/ToolbarButton.scss
index 8a2749530734f..0d0bb666fa540 100644
--- a/frontend/src/toolbar/bar/ToolbarButton.scss
+++ b/frontend/src/toolbar/bar/ToolbarButton.scss
@@ -1,28 +1,28 @@
 .ToolbarButton {
-    height: 2.5rem;
-    width: 2.5rem;
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    flex-shrink: 0;
+    width: 2.5rem;
+    height: 2.5rem;
 
     button {
         position: relative;
-        transition: transform 100ms ease;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        min-height: var(--lemon-button-height);
-        height: 2rem;
         width: 2rem;
-        background: none;
-        border-radius: var(--radius);
-        border: none;
+        height: 2rem;
+        min-height: var(--lemon-button-height);
+        color: var(--muted-alt);
+        appearance: none !important; // Important as this gets overridden by Ant styles...
         cursor: pointer;
         user-select: none;
-        appearance: none !important; // Important as this gets overridden by Ant styles...
-        color: var(--muted-alt);
+        background: none;
+        border: none;
+        border-radius: var(--radius);
+        transition: transform 100ms ease;
 
         > svg {
             font-size: 1.5rem;
@@ -32,14 +32,14 @@
     &:not([aria-disabled='true']):hover,
     &--active {
         button {
-            background: var(--border);
             color: var(--default);
+            background: var(--border);
         }
 
         .Toolbar--dragging & {
             button {
-                background: none;
                 color: var(--muted-alt);
+                background: none;
             }
         }
     }
diff --git a/frontend/src/toolbar/button/ToolbarButton.scss b/frontend/src/toolbar/button/ToolbarButton.scss
new file mode 100644
index 0000000000000..c1f4f191b3860
--- /dev/null
+++ b/frontend/src/toolbar/button/ToolbarButton.scss
@@ -0,0 +1,95 @@
+#button-toolbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2147483020;
+    opacity: 1;
+    transition: opacity ease 0.5s;
+
+    .circle-button {
+        box-shadow: 0 0.3px 0.7px rgb(0 0 0 / 25%), 0 0.8px 1.7px rgb(0 0 0 / 18%), 0 1.5px 3.1px rgb(0 0 0 / 14.9%),
+            0 2.7px 5.4px rgb(0 0 0 / 12.5%), 0 5px 10px rgb(0 0 0 / 10.1%), 0 12px 24px rgb(0 0 0 / 7%);
+        transition: box-shadow 0.2s ease;
+
+        &:hover {
+            box-shadow: 0 1.3px 2.7px rgb(0 0 0 / 25%), 0 3.2px 6.4px rgb(0 0 0 / 18%), 0 6px 12px rgb(0 0 0 / 14.9%),
+                0 10.7px 21.4px rgb(0 0 0 / 12.5%), 0 20.1px 40.1px rgb(0 0 0 / 10.1%), 0 48px 96px rgb(0 0 0 / 7%);
+        }
+    }
+
+    .circle-label {
+        font-weight: bold;
+        text-shadow: black 0 0 1px, black 0 0 2px, rgb(0 0 0 / 25%) 0 0.3px 0.7px, rgb(0 0 0 / 18%) 0 0.8px 1.6px,
+            rgb(0 0 0 / 15%) 0 1.5px 3px, rgb(0 0 0 / 12.5%) 0 2.7px 5.4px, rgb(0 0 0 / 10%) 0 5px 10px,
+            rgb(0 0 0 / 7%) 0 12px 24px;
+    }
+
+    & + .HedgehogBuddy {
+        z-index: 2147483020;
+    }
+}
+
+.toolbar-info-windows {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2147483020;
+    width: 300px;
+    background-color: rgb(255 255 255);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    box-shadow: 0 0.3px 0.7px rgb(0 0 0 / 25%), 0 0.8px 1.7px rgb(0 0 0 / 18%), 0 1.5px 3.1px rgb(0 0 0 / 14.9%),
+        0 2.7px 5.4px rgb(0 0 0 / 12.5%), 0 5px 10px rgb(0 0 0 / 10.1%), 0 12px 24px rgb(0 0 0 / 7%);
+    opacity: 1;
+    transition: opacity ease 0.5s;
+
+    .toolbar-block {
+        max-height: 80vh;
+        overflow: auto;
+    }
+
+    .toolbar-info-window-title {
+        display: flex;
+        align-items: center;
+        margin: 0 8px;
+        line-height: 26px;
+        border-bottom: 1px solid var(--border);
+
+        .toolbar-info-window-draggable {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            width: 100%;
+            padding: 15px 0;
+            cursor: move;
+
+            .window-label {
+                padding-left: 8px;
+                margin-bottom: 0;
+                font-size: 14px;
+                font-weight: bold;
+            }
+        }
+
+        .close-button {
+            padding: 8px;
+            color: rgb(0 0 0 / 60%);
+            cursor: pointer;
+            transition: color 0.1s ease-in-out;
+
+            &:hover {
+                color: rgb(0 0 0);
+            }
+        }
+    }
+}
+
+.overridden-tag {
+    padding: 0 4px;
+    margin-left: 5px;
+    font-size: 11px;
+    font-weight: bold;
+    line-height: 20px;
+    background: var(--mark);
+    border-radius: 4px;
+}
diff --git a/frontend/src/toolbar/flags/featureFlags.scss b/frontend/src/toolbar/flags/featureFlags.scss
new file mode 100644
index 0000000000000..476be675acca3
--- /dev/null
+++ b/frontend/src/toolbar/flags/featureFlags.scss
@@ -0,0 +1,46 @@
+.flags-button-window {
+    width: min(350px, 100vw);
+}
+
+.toolbar-block {
+    .feature-flag-row {
+        .feature-flag-row-header {
+            min-height: 38px;
+            background-color: #fafafa;
+
+            > * {
+                margin: 0 5px;
+            }
+
+            .feature-flag-title {
+                font-size: 13px;
+            }
+
+            .feature-flag-external-link {
+                line-height: normal;
+                color: rgb(0 0 0 / 50%);
+
+                &:hover {
+                    color: rgb(0 0 0 / 80%);
+                }
+            }
+        }
+
+        .feature-flag-row-header.overridden {
+            background-color: var(--mark);
+        }
+
+        .variant-radio-group {
+            border-left: 2px solid #fafafa;
+        }
+
+        .variant-radio-group.overridden {
+            border-left-color: var(--mark);
+        }
+    }
+
+    .local-feature-flag-override-note {
+        color: var(--default);
+        background-color: #fafafa;
+    }
+}
diff --git a/frontend/src/toolbar/styles.scss b/frontend/src/toolbar/styles.scss
index c6c59bc084dfd..3b1787b06b67f 100644
--- a/frontend/src/toolbar/styles.scss
+++ b/frontend/src/toolbar/styles.scss
@@ -8,13 +8,13 @@
 }
 
 :host {
-    @include root-variables;
-
     // reset fonts
     all: initial;
     font-family: var(--font-sans);
     font-size: 14px;
     line-height: 1.5;
+
+    @include root-variables;
 }
 
 .LemonModal__overlay--force-modal-above-popovers {
@@ -22,11 +22,11 @@
 }
 
 .section-title {
+    margin-bottom: 10px;
     font-size: 12px;
-    text-transform: uppercase;
     font-weight: bold;
     color: hsl(220deg 15% 49% / 100%);
-    margin-bottom: 10px;
+    text-transform: uppercase;
 }
 
 .fade-component-container {
diff --git a/package.json b/package.json
index 01da1beb31545..8b457c94afe4b 100644
--- a/package.json
+++ b/package.json
@@ -281,6 +281,7 @@
         "storybook-addon-pseudo-states": "2.1.2",
         "style-loader": "^2.0.0",
         "stylelint": "^15.11.0",
+        "stylelint-config-recess-order": "^4.3.0",
         "stylelint-config-standard-scss": "^11.1.0",
         "stylelint-order": "^6.0.3",
         "sucrase": "^3.29.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e0c59a7b595b2..4c6dfb3248460 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -645,6 +645,9 @@ devDependencies:
   stylelint:
     specifier: ^15.11.0
     version: 15.11.0(typescript@4.9.5)
+  stylelint-config-recess-order:
+    specifier: ^4.3.0
+    version: 4.3.0(stylelint@15.11.0)
   stylelint-config-standard-scss:
     specifier: ^11.1.0
     version: 11.1.0(postcss@8.4.31)(stylelint@15.11.0)
@@ -18278,6 +18281,15 @@ packages:
       postcss-selector-parser: 3.1.2
     dev: true
 
+  /stylelint-config-recess-order@4.3.0(stylelint@15.11.0):
+    resolution: {integrity: sha512-EWVtxZ8oq4/meTrRNUDrS5TqMz6TX72JjKDwVQq0JJDXE+P/o7UuFw3wWV/0O9yvJfh/da6nJY71ZUn/wSfB4g==}
+    peerDependencies:
+      stylelint: '>=15'
+    dependencies:
+      stylelint: 15.11.0(typescript@4.9.5)
+      stylelint-order: 6.0.3(stylelint@15.11.0)
+    dev: true
+
   /stylelint-config-recommended-scss@13.1.0(postcss@8.4.31)(stylelint@15.11.0):
     resolution: {integrity: sha512-8L5nDfd+YH6AOoBGKmhH8pLWF1dpfY816JtGMePcBqqSsLU+Ysawx44fQSlMOJ2xTfI9yTGpup5JU77c17w1Ww==}
     peerDependencies: