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

src/components/settings_modal/admin_tabs/emoji_tab.scss

@@ -29,7 +29,7 @@
   .emoji-list {
     display: flex;
     flex-wrap: wrap;
-    gap: 1em 1em;
+    gap: 1em;
   }
 }
 

src/components/settings_modal/admin_tabs/frontends_tab.scss

@@ -13,15 +13,11 @@
     // fix buttons showing through
     z-index: 2;
     opacity: 0.9;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
   }
 
   dd {
     text-overflow: ellipsis;
-    word-wrap: nowrap;
     white-space: nowrap;
     overflow-x: hidden;
     max-width: 10em;

src/components/settings_modal/settings_modal.scss

@@ -46,7 +46,7 @@
     max-width: 90vw;
     height: 90vh;
 
-    @media all and (max-width: 800px) {
+    @media all and (width <= 800px) {
       max-width: 100vw;
       height: 100%;
     }
@@ -84,7 +84,7 @@
       > li {
         margin: 1em 0;
         line-height: 1.5em;
-        vertical-align: center;
+        vertical-align: middle;
       }
 
       &.two-column {
@@ -105,7 +105,7 @@
        */
       transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
 
-      @media all and (max-width: 800px) {
+      @media all and (width <= 800px) {
         /* For mobile, the modal takes 100% of the available screen.
            This ensures the minimized modal is always 50px above the browser bottom
            bar regardless of whether or not it is visible.

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>