style(frontend): Always order CSS properties in one way (#18652)

* style(frontend): Always order CSS properties in one way

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* Expand `loadNotebooksContainingResource` Storybook mock

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

.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'],
     },
 }

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;
         }
     }
 }

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;
     }
 }

frontend/src/layout/ErrorBoundary/ErrorBoundary.scss

@@ -1,26 +1,26 @@
 .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;
     }
 
     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 {