Merge remote-tracking branch 'origin/develop' into renovate/eslint-plugin-vue-10.x

.stylelintrc.json

@@ -1,6 +1,5 @@
 {
   "extends": [
-    "stylelint-rscss/config",
     "stylelint-config-standard",
     "stylelint-config-recommended-scss",
     "stylelint-config-html",
@@ -8,15 +7,6 @@
   ],
   "rules": {
     "declaration-no-important": true,
-    "rscss/no-descendant-combinator": false,
-    "rscss/class-format": [
-      false,
-      {
-        "component": "pascal-case",
-        "variant": "^-[a-z]\\w+",
-        "element": "^[a-z]\\w+"
-      }
-    ],
     "selector-class-pattern": null,
     "import-notation": null,
     "custom-property-pattern": null,

package.json

@@ -32,7 +32,7 @@
     "body-scroll-lock": "3.1.5",
     "chromatism": "3.0.0",
     "click-outside-vue3": "4.0.1",
-    "cropperjs": "1.6.2",
+    "cropperjs": "2.0.0",
     "escape-html": "1.0.3",
     "globals": "^16.0.0",
     "hash-sum": "^2.0.0",
@@ -95,19 +95,19 @@
     "postcss": "8.5.3",
     "postcss-html": "^1.5.0",
     "postcss-scss": "^4.0.6",
-    "sass": "1.86.0",
+    "sass": "1.86.1",
     "selenium-server": "3.141.59",
     "semver": "7.7.1",
     "serve-static": "2.2.0",
     "shelljs": "0.9.2",
     "sinon": "20.0.0",
     "sinon-chai": "4.0.0",
-    "stylelint": "14.16.1",
+    "stylelint": "16.17.0",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recommended-scss": "^8.0.0",
-    "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "29.0.0",
-    "stylelint-rscss": "0.4.0",
+    "stylelint-config-recommended": "^14.0.0",
+    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint-config-recommended-vue": "^1.6.0",
+    "stylelint-config-standard": "37.0.0",
     "vite": "^6.1.0",
     "vite-plugin-eslint2": "^5.0.3",
     "vite-plugin-stylelint": "^6.0.0",

src/App.scss

@@ -34,8 +34,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overscroll-behavior-y: none;
-  overflow-x: clip;
-  overflow-y: scroll;
+  overflow: clip scroll;
 
   &.hidden {
     display: none;
@@ -224,9 +223,8 @@ nav {
   grid-template-rows: 1fr;
   box-sizing: border-box;
   margin: 0 auto;
-  align-content: flex-start;
+  place-content: flex-start center;
   flex-wrap: wrap;
-  justify-content: center;
   min-height: 100vh;
   overflow-x: clip;
 
@@ -262,8 +260,7 @@ nav {
       position: sticky;
       top: var(--navbar-height);
       max-height: calc(100vh - var(--navbar-height));
-      overflow-y: auto;
-      overflow-x: hidden;
+      overflow: hidden auto;
       margin-left: calc(var(--___paddingIncrease) * -1);
       padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
 
@@ -832,7 +829,7 @@ option {
 .login-hint {
   text-align: center;
 
-  @media all and (min-width: 801px) {
+  @media all and (width >= 801px) {
     display: none;
   }
 
@@ -854,7 +851,7 @@ option {
   flex: 1;
 }
 
-@media all and (max-width: 800px) {
+@media all and (width <= 800px) {
   .mobile-hidden {
     display: none;
   }

src/components/announcement_editor/announcement_editor.vue

@@ -56,7 +56,7 @@
   .post-textarea {
     resize: vertical;
     height: 10em;
-    overflow: none;
+    overflow: visible;
     box-sizing: content-box;
   }
 }

src/components/chat_message/chat_message.scss

@@ -107,8 +107,7 @@
   .outgoing {
     display: flex;
     flex-flow: row wrap;
-    align-content: end;
-    justify-content: flex-end;
+    place-content: end flex-end;
 
     .chat-message-inner {
       align-items: flex-end;

src/components/component_preview/component_preview.vue

@@ -190,20 +190,15 @@ export default {
 
   .header {
     grid-area: header;
-    justify-self: center;
-    align-self: baseline;
+    place-self: baseline center;
     line-height: 2;
   }
 
   .invalid-container {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
     display: grid;
-    align-items: center;
-    justify-items: center;
+    place-items: center center;
     background-color: rgba(100 0 0 / 50%);
 
     .alert {
@@ -214,7 +209,7 @@ export default {
   .assists {
     grid-area: assists;
     display: grid;
-    grid-auto-flow: rows;
+    grid-auto-flow: row;
     grid-auto-rows: 2em;
     grid-gap: 0.5em;
   }

src/components/conversation/conversation.vue

@@ -322,10 +322,7 @@
       content: "";
       display: block;
       position: absolute;
-      top: calc(var(--___margin) * -1);
-      bottom: calc(var(--___margin) * -1);
-      left: calc(var(--___margin) * -1);
-      right: calc(var(--___margin) * -1);
+      inset: calc(var(--___margin) * -1);
       background: var(--background);
       backdrop-filter: var(--__panel-backdrop-filter);
     }

src/components/desktop_nav/desktop_nav.scss

@@ -59,7 +59,7 @@
     transition-timing-function: ease-out;
     transition-duration: 100ms;
 
-    @media all and (min-width: 800px) {
+    @media all and (width >= 800px) {
       /* stylelint-disable-next-line declaration-no-important */
       opacity: 1 !important;
     }
@@ -70,10 +70,7 @@
       mask-size: contain;
       background-color: var(--text);
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      inset: 0;
     }
 
     img {

src/components/dialog_modal/dialog_modal.vue

@@ -29,14 +29,11 @@
 // TODO: unify with other modals.
 .dark-overlay {
   &::before {
-    bottom: 0;
+    inset: 0;
     content: " ";
     display: block;
     cursor: default;
-    left: 0;
     position: fixed;
-    right: 0;
-    top: 0;
     background: rgb(27 31 35 / 50%);
     z-index: 2000;
   }
@@ -45,13 +42,9 @@
 .dialog-container {
   display: grid;
   position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   justify-content: center;
-  align-items: center;
-  justify-items: center;
+  place-items: center center;
 }
 
 .dialog-modal.panel {
@@ -98,8 +91,7 @@
 #modal.-mobile {
   .dialog-container {
     justify-content: stretch;
-    align-items: end;
-    justify-items: stretch;
+    place-items: end stretch;
 
     &.-center-mobile {
       align-items: center;
@@ -114,7 +106,6 @@
     flex-direction: column;
     justify-content: flex-end;
     grid-template-columns: 1fr;
-    grid-auto-columns: none;
     grid-auto-rows: auto;
     grid-auto-flow: row dense;
 

src/components/draft/draft.vue

@@ -135,8 +135,7 @@
     .poll-indicator-container {
       border-radius: var(--roundness);
       display: grid;
-      justify-items: center;
-      align-items: center;
+      place-items: center center;
       align-self: start;
       height: 0;
       padding-bottom: 62.5%;
@@ -147,13 +146,9 @@
       box-sizing: border-box;
       border: 1px solid var(--border);
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      inset: 0;
       display: grid;
-      justify-items: center;
-      align-items: center;
+      place-items: center center;
       width: 100%;
       height: 100%;
     }

src/components/emoji_input/emoji_input.vue

@@ -159,10 +159,7 @@
     opacity: 0;
     pointer-events: none;
     position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
+    inset: 0;
     overflow: hidden;
 
     /* DEBUG STUFF */

src/components/emoji_picker/emoji_picker.scss

@@ -64,8 +64,7 @@
     flex-grow: 1;
     display: flex;
     flex-flow: row nowrap;
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto hidden;
   }
 
   .additional-tabs {
@@ -153,7 +152,13 @@
       transition: mask-size 150ms;
       mask-size: 100% 20px, 100% 20px, auto;
       // Autoprefixed seem to ignore this one, and also syntax is different
+      /* stylelint-disable mask-composite */
+      /* stylelint-disable declaration-property-value-no-unknown */
+
+      /* TODO check if this is still needed */
       mask-composite: xor;
+      /* stylelint-enable declaration-property-value-no-unknown */
+      /* stylelint-enable mask-composite */
       mask-composite: exclude;
 
       &.scrolled {
@@ -197,8 +202,7 @@
     &-group {
       display: grid;
       grid-template-columns: repeat(var(--__amount), 1fr);
-      align-items: center;
-      justify-items: center;
+      place-items: center center;
       justify-content: center;
       grid-template-rows: repeat(1, auto);
 

src/components/flash/flash.vue

@@ -77,7 +77,7 @@
 
   .hidden {
     display: none;
-    visibility: "hidden";
+    visibility: hidden;
   }
 }
 </style>

src/components/gallery/gallery.vue

@@ -101,10 +101,7 @@
 
     .gallery-row-inner {
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       display: flex;
       flex-flow: row wrap;
       align-content: stretch;
@@ -160,7 +157,13 @@
         linear-gradient(to top, white, white);
 
       /* Autoprefixed seem to ignore this one, and also syntax is different */
+      /* stylelint-disable mask-composite */
+      /* stylelint-disable declaration-property-value-no-unknown */
+
+      /* TODO check if this is still needed */
       mask-composite: xor;
+      /* stylelint-enable declaration-property-value-no-unknown */
+      /* stylelint-enable mask-composite */
       mask-composite: exclude;
     }
   }

src/components/image_cropper/image_cropper.js

@@ -1,5 +1,4 @@
-import Cropper from 'cropperjs'
-import 'cropperjs/dist/cropper.css'
+import 'cropperjs' // This adds all of the cropperjs's components into DOM
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faCircleNotch
@@ -19,19 +18,6 @@ const ImageCropper = {
       type: Function,
       required: true
     },
-    cropperOptions: {
-      type: Object,
-      default () {
-        return {
-          aspectRatio: 1,
-          autoCropArea: 1,
-          viewMode: 1,
-          movable: false,
-          zoomable: false,
-          guides: false
-        }
-      }
-    },
     mimes: {
       type: String,
       default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
@@ -48,7 +34,6 @@ const ImageCropper = {
   },
   data () {
     return {
-      cropper: undefined,
       dataUrl: undefined,
       filename: undefined,
       submitting: false
@@ -67,27 +52,30 @@ const ImageCropper = {
   },
   methods: {
     destroy () {
-      if (this.cropper) {
-        this.cropper.destroy()
-      }
       this.$refs.input.value = ''
       this.dataUrl = undefined
       this.$emit('close')
     },
     submit (cropping = true) {
       this.submitting = true
-      this.submitHandler(cropping && this.cropper, this.file)
-        .then(() => this.destroy())
-        .finally(() => {
-          this.submitting = false
-        })
+
+      let cropperPromise
+      if (cropping) {
+        cropperPromise = this.$refs.cropperSelection.$toCanvas()
+      } else {
+        cropperPromise = Promise.resolve()
+      }
+      cropperPromise.then(canvas => {
+        this.submitHandler(canvas, this.file)
+            .then(() => this.destroy())
+            .finally(() => {
+              this.submitting = false
+            })
+      })
     },
     pickImage () {
       this.$refs.input.click()
     },
-    createCropper () {
-      this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
-    },
     getTriggerDOM () {
       return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
     },
@@ -103,6 +91,29 @@ const ImageCropper = {
         reader.readAsDataURL(this.file)
         this.$emit('changed', this.file, reader)
       }
+    },
+    inSelection(selection, maxSelection) {
+      return (
+        selection.x >= maxSelection.x
+        && selection.y >= maxSelection.y
+        && (selection.x + selection.width) <= (maxSelection.x + maxSelection.width)
+        && (selection.y + selection.height) <= (maxSelection.y + maxSelection.height)
+      )
+    },
+    onCropperSelectionChange(event) {
+      const cropperCanvas = this.$refs.cropperCanvas
+      const cropperCanvasRect = cropperCanvas.getBoundingClientRect()
+      const selection = event.detail
+      const maxSelection = {
+        x: 0,
+        y: 0,
+        width: cropperCanvasRect.width,
+        height: cropperCanvasRect.height,
+      }
+
+      if (!this.inSelection(selection, maxSelection)) {
+        event.preventDefault();
+      }
     }
   },
   mounted () {

src/components/image_cropper/image_cropper.vue

@@ -1,14 +1,43 @@
 <template>
   <div class="image-cropper">
     <div v-if="dataUrl">
-      <div class="image-cropper-image-container">
-        <img
-          ref="img"
+      <cropper-canvas
+        background
+        class="image-cropper-canvas"
+        ref="cropperCanvas"
+        height="25em"
+      >
+        <cropper-image
           :src="dataUrl"
-          alt=""
-          @load.stop="createCropper"
+          alt="Picture"
+          ref="cropperImage"
+          class="image-cropper-image"
+          translatable
+          scalable
+        />
+        <cropper-shade hidden />
+        <cropper-handle action="select" plain />
+        <cropper-selection
+          ref="cropperSelection"
+          initial-coverage="1"
+          aspect-ratio="1"
+          movable
+          resizable
+          @change="onCropperSelectionChange"
         >
-      </div>
+          <cropper-grid role="grid" covered></cropper-grid>
+          <cropper-crosshair centered></cropper-crosshair>
+          <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle>
+          <cropper-handle action="n-resize"></cropper-handle>
+          <cropper-handle action="e-resize"></cropper-handle>
+          <cropper-handle action="s-resize"></cropper-handle>
+          <cropper-handle action="w-resize"></cropper-handle>
+          <cropper-handle action="ne-resize"></cropper-handle>
+          <cropper-handle action="nw-resize"></cropper-handle>
+          <cropper-handle action="se-resize"></cropper-handle>
+          <cropper-handle action="sw-resize"></cropper-handle>
+        </cropper-selection>
+      </cropper-canvas>
       <div class="image-cropper-buttons-wrapper">
         <button
           class="button-default btn"
@@ -55,20 +84,18 @@
     display: none;
   }
 
-  &-image-container {
-    position: relative;
-
-    img {
-      display: block;
-      max-width: 100%;
-    }
+  &-canvas {
+    height: 25em;
+    width: 25em;
   }
 
   &-buttons-wrapper {
-    margin-top: 10px;
+    display: grid;
+    grid-gap: 0.5em;
+    grid-template-columns: 1fr 1fr 1fr;
 
     button {
-      margin-top: 5px;
+      margin-top: 1em;
     }
   }
 }

src/components/link-preview/link-preview.vue

@@ -68,10 +68,12 @@
     margin: 0.5em 0 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-word;
+    word-break: break-all;
     line-height: 1.2em;
-    // cap description at 3 lines, the 1px is to clean up some stray pixels
-    // TODO: fancier fade-out at the bottom to show off that it's too long?
+
+    /* cap description at 3 lines, the 1px is to clean up some stray pixels
+       TODO: fancier fade-out at the bottom to show off that it's too long?
+     */
     max-height: calc(1.2em * 3 - 1px);
   }
 

src/components/mobile_nav/mobile_nav.vue

@@ -220,8 +220,7 @@
     margin-top: 3.5em;
     width: 100vw;
     height: calc(100vh - var(--navbar-height));
-    overflow-x: hidden;
-    overflow-y: scroll;
+    overflow: hidden scroll;
 
     .notifications {
       padding: 0;

src/components/mobile_post_status_button/mobile_post_status_button.vue

@@ -42,7 +42,7 @@
   }
 }
 
-@media all and (min-width: 801px) {
+@media all and (width >= 801px) {
   .new-status-button:not(.always-show) {
     display: none;
   }

src/components/modal/modal.vue

@@ -41,10 +41,7 @@ export default {
 .modal-view {
   z-index: var(--ZI_modals);
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;

src/components/notification/notification.scss

@@ -3,7 +3,7 @@
   border-bottom: 1px solid;
   border-color: var(--border);
   word-wrap: break-word;
-  word-break: break-word;
+  word-break: break-all;
 
   &.Status {
     /* stylelint-disable-next-line declaration-no-important */

src/components/notifications/notifications.scss

@@ -13,10 +13,7 @@
 
     .notification-overlay {
       position: absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-      bottom: 0;
+      inset: 0;
       pointer-events: none;
     }
 

src/components/poll/poll.scss

@@ -26,7 +26,7 @@
     align-items: center;
     padding: 0.1em 0.25em;
     z-index: 1;
-    word-break: break-word;
+    word-break: break-all;
   }
 
   .result-percentage {

src/components/popover/popover.scss

@@ -15,11 +15,7 @@
   &::after {
     content: "";
     position: absolute;
-    top: -1px;
-    bottom: -1px;
-    left: -1px;
-    right: -1px;
-    z-index: -1px;
+    inset: -1px;
     box-shadow: var(--_shadow);
     pointer-events: none;
   }

src/components/registration/registration.vue

@@ -418,7 +418,7 @@
   margin: 0.6em;
 }
 
-@media all and (max-width: 800px) {
+@media all and (width <= 800px) {
   .registration-form .container {
     flex-direction: column-reverse;
 

src/components/search/search.vue

@@ -157,7 +157,7 @@
   text-align: center;
 }
 
-@media all and (max-width: 800px) {
+@media all and (width <= 800px) {
   .search-nav-heading {
     .tab-switcher .tabs .tab-wrapper {
       display: block;

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>

src/components/shadow_control/shadow_control.scss

@@ -112,8 +112,7 @@
     grid-area: preview;
     min-width: 25em;
     margin-left: 0.125em;
-    align-self: start;
-    justify-self: center;
+    place-self: start center;
   }
 }
 

src/components/shout_panel/shout_panel.vue

@@ -107,8 +107,7 @@
   }
 
   .shout-window {
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden auto;
     max-height: 20em;
   }
 

src/components/status/status.scss

@@ -2,7 +2,7 @@
   min-width: 0;
   white-space: normal;
   word-wrap: break-word;
-  word-break: break-word;
+  word-break: break-all;
 
   &:hover {
     --_still-image-img-visibility: visible;
@@ -364,7 +364,7 @@
     }
   }
 
-  @media all and (max-width: 800px) {
+  @media all and (width <= 800px) {
     .repeater-avatar {
       margin-left: 20px;
     }
@@ -374,7 +374,6 @@
       height: 40px;
 
       // TODO define those other way somehow?
-      // stylelint-disable rscss/class-format
       &.-compact {
         width: 32px;
         height: 32px;

src/components/status_action_buttons/action_button.vue

@@ -12,7 +12,7 @@
       :title="$t(button.label(funcArg))"
       target="_blank"
       :tabindex="0"
-      :disabled="this.button.interactive ? !this.button.interactive(this.funcArg) : false"
+      :disabled="button.interactive ? !button.interactive(funcArg) : false"
       :href="getComponent(button) == 'a' ? button.link?.(funcArg) || remoteInteractionLink : undefined"
       @click="doActionWrap(button, outerClose)"
     >

src/components/status_body/status_body.scss

@@ -15,7 +15,7 @@
     white-space: pre-wrap;
     overflow-wrap: break-word;
     word-wrap: break-word;
-    word-break: break-word;
+    word-break: break-all;
     line-height: var(--post-line-height);
   }
 
@@ -60,8 +60,7 @@
     &.-tall-status {
       position: relative;
       height: 220px;
-      overflow-x: hidden;
-      overflow-y: hidden;
+      overflow: hidden;
       z-index: 1;
 
       .media-body {
@@ -71,7 +70,13 @@
           linear-gradient(to top, white, white);
 
         /* Autoprefixed seem to ignore this one, and also syntax is different */
+        /* stylelint-disable mask-composite */
+        /* stylelint-disable declaration-property-value-no-unknown */
+
+        /* TODO check if this is still needed */
         mask-composite: xor;
+        /* stylelint-enable declaration-property-value-no-unknown */
+        /* stylelint-enable mask-composite */
         mask-composite: exclude;
       }
     }
@@ -110,7 +115,7 @@
   }
 
   &.-compact {
-    align-items: top;
+    align-items: start;
     flex-direction: row;
 
     --emoji-size: calc(var(--emojiSize, 32px) / 2);
@@ -131,7 +136,13 @@
       mask-image: linear-gradient(to bottom, white 2em, transparent 3em);
 
       /* Autoprefixed seem to ignore this one, and also syntax is different */
+      /* stylelint-disable mask-composite */
+      /* stylelint-disable declaration-property-value-no-unknown */
+
+      /* TODO check if this is still needed */
       mask-composite: xor;
+      /* stylelint-enable declaration-property-value-no-unknown */
+      /* stylelint-enable mask-composite */
       mask-composite: exclude;
     }
 

src/components/still-image/still-image.vue

@@ -37,10 +37,7 @@
 
   canvas {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     object-fit: contain;

src/components/tab_switcher/tab_switcher.scss

@@ -12,8 +12,7 @@
 
     > .tabs {
       width: 100%;
-      overflow-y: hidden;
-      overflow-x: auto;
+      overflow: auto hidden;
       padding-top: 5px;
       flex-direction: row;
       flex: 0 0 auto;
@@ -44,7 +43,7 @@
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
         padding-bottom: 99px;
-        margin-bottom: 6px - 99px;
+        margin-bottom: calc(6px - 99px);
       }
     }
 
@@ -56,7 +55,7 @@
   &.side-tabs {
     flex-direction: row;
 
-    @media all and (max-width: 800px) {
+    @media all and (width <= 800px) {
       overflow-x: auto;
     }
 
@@ -66,8 +65,7 @@
 
     > .tabs {
       flex: 0 0 auto;
-      overflow-y: auto;
-      overflow-x: hidden;
+      overflow: hidden auto;
       flex-direction: column;
 
       &::after,
@@ -92,7 +90,7 @@
         display: flex;
         flex-direction: column;
 
-        @media all and (max-width: 800px) {
+        @media all and (width <= 800px) {
           min-width: 4em;
         }
 
@@ -133,7 +131,7 @@
           margin-left: 1.5em;
         }
 
-        @media all and (max-width: 800px) {
+        @media all and (width <= 800px) {
           padding-left: 0.25em;
           padding-right: calc(0.25em + 200px);
           margin-right: calc(0.25em - 200px);
@@ -244,7 +242,7 @@
     margin-bottom: 0.25em;
     border-bottom: 1px solid var(--border);
 
-    @media all and (min-width: 800px) {
+    @media all and (width >= 800px) {
       display: none;
     }
   }

src/components/update_notification/update_notification.scss

@@ -18,7 +18,7 @@
     padding-left: 1em;
   }
 
-  @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.
@@ -26,7 +26,7 @@
     width: 100vw;
   }
 
-  @media all and (max-height: 600px) {
+  @media all and (height <= 600px) {
     display: none;
   }
 

src/components/user_card/user_card.scss

@@ -21,15 +21,18 @@
 
   .background-image {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     mask:
       linear-gradient(to top, white, transparent) bottom no-repeat,
       linear-gradient(to top, white, white);
     // Autoprefixer seem to ignore this one, and also syntax is different
+    /* stylelint-disable mask-composite */
+    /* stylelint-disable declaration-property-value-no-unknown */
+
+    /* TODO check if this is still needed */
     mask-composite: xor;
+    /* stylelint-enable declaration-property-value-no-unknown */
+    /* stylelint-enable mask-composite */
     mask-composite: exclude;
     background-size: cover;
     mask-size: 100% 60%;
@@ -125,10 +128,7 @@
 
     &.-overlay {
       position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       background-color: rgb(0 0 0 / 30%);
       display: flex;
       justify-content: center;
@@ -161,7 +161,7 @@
   }
 
   .bottom-line {
-    font-weight: light;
+    font-weight: lighter;
     font-size: 1.1em;
     align-items: baseline;
 

src/components/user_profile/user_profile.vue

@@ -223,7 +223,7 @@
   .userlist-placeholder {
     display: flex;
     justify-content: center;
-    align-items: middle;
+    align-items: center;
     padding: 2em;
   }
 }
@@ -232,7 +232,7 @@
   .panel-body {
     display: flex;
     justify-content: center;
-    align-items: middle;
+    align-items: center;
     padding: 7em;
   }
 }

src/components/user_reporting_modal/user_reporting_modal.vue

@@ -143,7 +143,7 @@
     }
   }
 
-  @media all and (min-width: 801px) {
+  @media all and (width >= 801px) {
     .panel-body {
       flex-direction: row;
     }

src/panel.scss

@@ -25,10 +25,7 @@
   &::after {
     content: "";
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
     z-index: 5;
     box-shadow: var(--_shadow);
     pointer-events: none;
@@ -107,10 +104,7 @@
   &::before {
     content: "";
     position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
+    inset: 0;
     pointer-events: none;
   }
 

vite.config.js

@@ -97,6 +97,9 @@ export default defineConfig(async ({ mode, command }) => {
               if (tag === 'pinch-zoom') {
                 return true
               }
+              if (tag.startsWith('cropper-')) {
+                return true
+              }
               return false
             }
           }