make lint work again + lint --fix

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 {

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

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

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