wip

package.json

@@ -33,7 +33,7 @@
         "resolve-url-loader": "^3.1.2",
         "sass": "^1.32.4",
         "sass-loader": "^8.0.0",
-        "sprucecss": "^2.2.1",
+        "sprucecss": "^2.3.1",
         "tiptap": "^1.32.2",
         "vite": "^4.3.0"
     },

public/build/manifest.json

@@ -1,66 +1,66 @@
 {
   "resources/js/app.css": {
-    "file": "assets/app-d00ef1bd.css",
+    "file": "assets/app-dba7d4c7.css",
     "src": "resources/js/app.css"
   },
   "resources/js/app.js": {
     "css": [
-      "assets/app-d00ef1bd.css"
+      "assets/app-dba7d4c7.css"
     ],
-    "file": "assets/app-34baaef9.js",
+    "file": "assets/app-b7fc6e7f.js",
     "isEntry": true,
     "src": "resources/js/app.js"
   },
   "resources/js/chart.js": {
-    "file": "assets/chart-ca6a94d4.js",
+    "file": "assets/chart-06e0bb8f.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/chart.js"
   },
   "resources/js/dropdown.js": {
-    "file": "assets/dropdown-ca6a94d4.js",
+    "file": "assets/dropdown-06e0bb8f.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/dropdown.js"
   },
   "resources/js/editor.js": {
-    "file": "assets/editor-ca6a94d4.js",
+    "file": "assets/editor-06e0bb8f.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/editor.js"
   },
   "resources/js/media-manager.js": {
-    "file": "assets/media-manager-ca6a94d4.js",
+    "file": "assets/media-manager-06e0bb8f.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/media-manager.js"
   },
   "resources/js/repeater.js": {
-    "file": "assets/repeater-ca6a94d4.js",
+    "file": "assets/repeater-06e0bb8f.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/repeater.js"
   },
   "resources/js/table.js": {
-    "file": "assets/table-ca6a94d4.js",
+    "file": "assets/table-06e0bb8f.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/table.js"
   },
   "resources/sass/app.scss": {
-    "file": "assets/app-8c4d86f4.js",
+    "file": "assets/app-2339afd5.js",
     "imports": [
       "resources/js/app.js"
     ],

resources/sass/app.scss

@@ -15,6 +15,10 @@
     ));
 }
 
+body {
+    overflow-x: hidden;
+}
+
 [x-cloak] {
     visibility: hidden !important;
 }

resources/sass/component/_alert.scss

@@ -3,61 +3,61 @@
 @use 'sprucecss/scss/spruce' as *;
 
 .alert {
-    align-items: center;
-    border: 1px solid;
-    border-left: 0.4rem solid;
-    border-radius: config('border-radius-sm', $display);
-    display: flex;
-    gap: spacer('m');
-    justify-content: space-between;
-    line-height: config('line-height-md', $typography);
-    padding: 0.65em 1em;
-
-    @each $name, $value in map.get($colors, 'alert') {
-        @at-root .alert--#{$name} {
-            background-color: color.scale($value, $lightness: 95%);
-            color: color.scale($value, $lightness: -30%);
-        }
-
-        @at-root .alert--#{$name} .alert__close {
-            background-color: color.scale($value, $lightness: -30%);
-            color: color.scale($value, $lightness: 90%);
-        }
+  align-items: center;
+  border: 1px solid;
+  border-left: 0.4rem solid;
+  border-radius: config('border-radius-sm', $display);
+  display: flex;
+  gap: spacer('m');
+  justify-content: space-between;
+  line-height: config('line-height-md', $typography);
+  padding: 0.65em 1em;
+
+  @each $name, $value in map.get($colors, 'alert') {
+    @at-root .alert--#{$name} {
+      background-color: color.scale($value, $lightness: 95%);
+      color: color.scale($value, $lightness: -30%);
+    }
+
+    @at-root .alert--#{$name} .alert__close {
+      background-color: color.scale($value, $lightness: -30%);
+      color: color.scale($value, $lightness: 90%);
     }
+  }
 
-    @each $name, $value in map.get($colors, 'alert') {
-        @at-root [data-theme-mode='dark'] .alert--#{$name} {
-            background-color: transparent;
-            border-color: color.scale($value, $lightness: -30%);
-            color: color('text');
-        }
+  @each $name, $value in map.get($colors, 'alert') {
+    @at-root [data-theme-mode='dark'] .alert--#{$name} {
+      background-color: transparent;
+      border-color: color.scale($value, $lightness: -30%);
+      color: color('text');
     }
+  }
+
+  &__caption {
+    @include layout-stack('xxs');
+  }
+
+  &__close {
+    --size: 1.5rem;
+    @include clear-btn;
+    @include transition;
+    align-items: center;
+    block-size: var(--size);
+    border-radius: config('border-radius-sm', $display);
+    display: flex;
+    flex-shrink: 0;
+    inline-size: var(--size);
+    justify-content: center;
 
-    &__caption {
-        @include layout-stack('xxs');
+    &:hover,
+    &:focus {
+      opacity: 0.75;
     }
 
-    &__close {
-        --dimension: 1.5rem;
-        @include clear-btn;
-        @include transition;
-        align-items: center;
-        block-size: var(--dimension);
-        border-radius: config('border-radius-sm', $display);
-        display: flex;
-        flex-shrink: 0;
-        inline-size: var(--dimension);
-        justify-content: center;
-
-        &:hover,
-        &:focus {
-            opacity: 0.75;
-        }
-
-        svg {
-            --dimension: 0.85rem;
-            block-size: var(--dimension);
-            inline-size: var(--dimension);
-        }
+    svg {
+      --size: 0.85rem;
+      block-size: var(--size);
+      inline-size: var(--size);
     }
+  }
 }

resources/sass/component/_auth-form.scss

@@ -1,26 +1,26 @@
 @use 'sprucecss/scss/spruce' as *;
 
 .auth-form {
-    @include layout-stack('s');
-    margin-block: auto;
+  @include layout-stack('s');
+  margin-block: auto;
 
-    &__title {
-        font-weight: 700;
-    }
+  &__title {
+    font-weight: 700;
+  }
 
-    .or-separator {
-        margin-block-start: spacer('m');
-    }
+  .or-separator {
+    margin-block-start: spacer('m');
+  }
 }
 
 .form-group-stacked,
 .social-logins {
-    @include layout-stack('s');
+  @include layout-stack('s');
 }
 
 .form-label {
-    &--space-between {
-        display: flex;
-        justify-content: space-between;
-    }
+  &--space-between {
+    display: flex;
+    justify-content: space-between;
+  }
 }