Merge remote-tracking branch 'origin/develop' into sss-objects

src/components/settings_modal/tabs/appearance_tab.scss

@@ -26,8 +26,7 @@
 
   .palettes-container {
     height: 15em;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden auto;
     scrollbar-gutter: stable;
     border-radius: var(--roundness);
     border: 1px solid var(--border);
@@ -112,8 +111,7 @@
     flex-wrap: wrap;
     margin: -0.5em 0;
     height: 25em;
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden auto;
     scrollbar-gutter: stable;
     border-radius: var(--roundness);
     border: 1px solid var(--border);

src/components/settings_modal/tabs/profile_tab.js

@@ -216,7 +216,7 @@ const ProfileTab = {
         this.submitBackground('')
       }
     },
-    submitAvatar (cropper, file) {
+    submitAvatar (canvas, file) {
       const that = this
       return new Promise((resolve, reject) => {
         function updateAvatar (avatar, avatarName) {
@@ -232,8 +232,8 @@ const ProfileTab = {
             })
         }
 
-        if (cropper) {
-          cropper.getCroppedCanvas().toBlob((data) => updateAvatar(data, file.name), file.type)
+        if (canvas) {
+          canvas.toBlob((data) => updateAvatar(data, file.name), file.type)
         } else {
           updateAvatar(file, file.name)
         }

src/components/settings_modal/tabs/style_tab/style_tab.scss

@@ -187,7 +187,7 @@
     .state-selector,
     .variant-selector {
       display: grid;
-      grid-template-columns: 1fr minmax(1fr, 10em);
+      grid-template-columns: 1fr minmax(10em, 1fr);
       grid-template-rows: auto;
       grid-auto-flow: column;
       grid-gap: 0.5em;

src/components/settings_modal/tabs/theme_tab/theme_preview.vue

@@ -241,10 +241,7 @@ export default {
 
   .underlay-preview {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 10px;
-    right: 10px;
+    inset: 0 10px;
   }
 }
  </style>