From 5e00780e29d3f16548191b69223d451595ca68d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yh=C3=ABhtozr?= <conlang2012@outlook.com>
Date: Sat, 17 Dec 2022 18:50:11 +0900
Subject: [PATCH 1/5] writing mode: easy CSS search and replace

---
 src/App.scss                                  | 131 +++++++++--------
 .../account_actions/account_actions.vue       |   8 +-
 src/components/announcement/announcement.vue  |  10 +-
 .../announcement_editor.vue                   |   4 +-
 .../announcements_page/announcements_page.vue |   4 +-
 .../async_component_error.vue                 |   5 +-
 src/components/attachment/attachment.scss     |  76 +++++-----
 src/components/autosuggest/autosuggest.vue    |  14 +-
 src/components/avatar_list/avatar_list.vue    |  11 +-
 .../basic_user_card/basic_user_card.vue       |  19 +--
 src/components/block_card/block_card.vue      |   6 +-
 src/components/checkbox/checkbox.vue          |  14 +-
 src/components/color_input/color_input.scss   |  27 ++--
 src/components/color_input/color_input.vue    |   2 +-
 .../contrast_ratio/contrast_ratio.vue         |   8 +-
 src/components/conversation/conversation.vue  |  52 ++++---
 src/components/desktop_nav/desktop_nav.scss   |  41 +++---
 src/components/dialog_modal/dialog_modal.vue  |  35 ++---
 .../domain_mute_card/domain_mute_card.vue     |   9 +-
 .../edit_status_modal/edit_status_modal.vue   |  12 +-
 src/components/emoji_input/emoji_input.vue    |  38 ++---
 src/components/emoji_picker/emoji_picker.scss |  74 +++++-----
 .../emoji_reactions/emoji_reactions.vue       |  24 ++--
 .../extra_buttons/extra_buttons.vue           |   2 +-
 .../favorite_button/favorite_button.vue       |   3 +-
 src/components/flash/flash.vue                |  14 +-
 src/components/follow_card/follow_card.vue    |  13 +-
 .../follow_request_card.vue                   |  10 +-
 src/components/font_control/font_control.vue  |  10 +-
 src/components/gallery/gallery.vue            |  32 +++--
 .../global_notice_list/global_notice_list.vue |  14 +-
 .../image_cropper/image_cropper.vue           |   6 +-
 src/components/link-preview/link-preview.vue  |  20 +--
 src/components/list/list.vue                  |   6 +-
 src/components/list_edit/list_edit.vue        |  13 +-
 src/components/list_new/list_new.vue          |   8 +-
 .../list_user_search/list_user_search.vue     |   7 +-
 .../local_bubble_panel.scss                   |  16 +--
 src/components/login_form/login_form.vue      |  13 +-
 src/components/media_modal/media_modal.vue    |  77 +++++-----
 src/components/mention_link/mention_link.scss |  17 +--
 .../mentions_line/mentions_line.scss          |   2 +-
 src/components/mobile_nav/mobile_nav.vue      |  44 +++---
 .../mobile_post_status_button.vue             |   8 +-
 src/components/mod_modal/mod_modal.scss       |  18 +--
 .../mod_modal/mod_modal_content.scss          |  15 +-
 .../tabs/reports_tab/reports_tab.scss         |  27 ++--
 src/components/modal/modal.vue                |   8 +-
 .../moderation_tools/moderation_tools.vue     |   4 +-
 .../mrf_transparency_panel.scss               |  16 +--
 src/components/mute_card/mute_card.vue        |   6 +-
 src/components/nav_panel/nav_panel.vue        |  38 ++---
 src/components/notification/notification.scss |  18 +--
 .../notifications/notification_filters.vue    |   4 +-
 .../notifications/notifications.scss          |  50 +++----
 .../panel_loading/panel_loading.vue           |   2 +-
 .../password_reset/password_reset.vue         |  19 +--
 src/components/poll/poll.vue                  |  30 ++--
 src/components/poll/poll_form.vue             |  31 ++--
 src/components/popover/popover.vue            |  47 +++---
 .../post_status_form/post_status_form.vue     |  69 ++++-----
 .../post_status_modal/post_status_modal.vue   |  10 +-
 src/components/quote_button/quote_button.vue  |   3 +-
 src/components/quote_card/quote_card.vue      |  20 +--
 src/components/react_button/react_button.vue  |  14 +-
 src/components/registration/registration.vue  |  28 ++--
 .../remote_follow/remote_follow.vue           |   6 +-
 src/components/reply_button/reply_button.vue  |   3 +-
 .../retweet_button/retweet_button.vue         |   3 +-
 src/components/rich_content/rich_content.scss |  29 ++--
 .../scope_selector/scope_selector.vue         |   6 +-
 src/components/search/search.vue              |   8 +-
 src/components/search_bar/search_bar.vue      |   8 +-
 src/components/select/select.vue              |  17 +--
 .../selectable_list/selectable_list.vue       |  14 +-
 .../helpers/modified_indicator.vue            |   5 +-
 .../helpers/server_side_indicator.vue         |   5 +-
 .../settings_modal/settings_modal.scss        |  37 ++---
 .../settings_modal_content.scss               |  31 ++--
 .../settings_modal/tabs/filtering_tab.vue     |   2 +-
 .../settings_modal/tabs/general_tab.vue       |   6 +-
 .../tabs/mutes_and_blocks_tab.scss            |  15 +-
 .../settings_modal/tabs/profile_tab.scss      |  64 +++++----
 .../settings_modal/tabs/profile_tab.vue       |   2 +-
 .../settings_modal/tabs/security_tab/mfa.vue  |   6 +-
 .../settings_modal/tabs/theme_tab/preview.vue |   8 +-
 .../tabs/theme_tab/theme_tab.scss             | 115 ++++++++-------
 .../shadow_control/shadow_control.vue         |  33 +++--
 src/components/side_drawer/side_drawer.vue    |  39 ++---
 src/components/staff_panel/staff_panel.vue    |   6 +-
 src/components/status/status.scss             | 136 +++++++++---------
 src/components/status/status.vue              |   4 +-
 src/components/status_body/status_body.scss   |  48 +++----
 .../status_content/status_content.vue         |  10 +-
 .../status_history_modal.vue                  |  10 +-
 .../status_popover/status_popover.vue         |   4 +-
 .../sticker_picker/sticker_picker.vue         |  20 +--
 src/components/still-image/still-image.vue    |  23 +--
 src/components/tab_switcher/tab_switcher.scss | 116 +++++++--------
 src/components/thread_tree/thread_tree.vue    |   4 +-
 src/components/timeline/timeline.scss         |   7 +-
 .../timeline/timeline_quick_settings.vue      |   4 +-
 .../timeline_menu/timeline_menu.vue           |  44 +++---
 .../timeline_menu/timeline_menu_content.vue   |   4 +-
 .../timeline_menu_content.vue                 |   4 +-
 .../timeline_menu_tabs/timeline_menu_tabs.vue |  12 +-
 src/components/user_avatar/user_avatar.vue    |  20 +--
 src/components/user_card/user_card.js         |   2 +-
 src/components/user_card/user_card.scss       | 117 ++++++++-------
 src/components/user_card/user_card.vue        |   2 +-
 .../user_list_popover/user_list_popover.vue   |   8 +-
 src/components/user_profile/user_profile.vue  |  37 ++---
 .../user_reporting_modal.vue                  |  45 +++---
 .../who_to_follow_panel.vue                   |  13 +-
 src/hocs/with_load_more/with_load_more.scss   |   6 +-
 src/panel.scss                                |  76 ++++++----
 116 files changed, 1419 insertions(+), 1261 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 7e6d0dfc..3e2c5419 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -2,7 +2,7 @@
 @import './_variables.scss';
 
 :root {
-  --navbar-height: 3.5rem;
+  --navbar-block-size: 3.5rem;
   --post-line-height: 1.4;
 }
 
@@ -126,7 +126,7 @@ nav {
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
   box-shadow: var(--topBarShadow);
   box-sizing: border-box;
-  height: var(--navbar-height);
+  block-size: var(--navbar-block-size);
   position: fixed;
 }
 
@@ -135,7 +135,7 @@ nav {
 }
 
 .column.-scrollable {
-  top: var(--navbar-height);
+  inset-block-start: var(--navbar-block-size);
   position: sticky;
 }
 
@@ -150,11 +150,11 @@ nav {
 
 .app-bg-wrapper {
   position: fixed;
-  height: 100%;
-  top: var(--navbar-height);
+  block-size: 100%;
+  inset-block-start: var(--navbar-block-size);
   z-index: -1000;
-  left: 0;
-  right: -20px;
+  inset-inline-start: 0;
+  inset-inline-end: -20px;
   background-size: cover;
   background-repeat: no-repeat;
   background-color: var(--wallpaper);
@@ -185,11 +185,12 @@ nav {
   grid-template-areas: "sidebar content";
   grid-template-rows: 1fr;
   box-sizing: border-box;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   align-content: flex-start;
   flex-wrap: wrap;
   justify-content: center;
-  min-height: 100vh;
+  min-block-size: 100vb;
   overflow-x: clip;
 
   .column {
@@ -200,13 +201,15 @@ nav {
     box-sizing: border-box;
     grid-row-start: 1;
     grid-row-end: 1;
-    margin: 0 calc(var(--___columnMargin) / 2);
-    padding: calc(var(--___columnMargin)) 0;
+    margin-block: 0;
+    margin-inline: calc(var(--___columnMargin) / 2);
+    padding-block: calc(var(--___columnMargin));
+    padding-inline: 0;
     row-gap: var(--___columnMargin);
     align-content: start;
 
     &:not(.-scrollable) {
-      margin-top: var(--navbar-height);
+      margin-block-start: var(--navbar-block-size);
     }
 
     &:hover {
@@ -214,46 +217,46 @@ nav {
     }
 
     &.-full-height {
-      margin-bottom: 0;
-      padding-top: 0;
-      padding-bottom: 0;
+      margin-block-end: 0;
+      padding-block-start: 0;
+      padding-block-end: 0;
     }
 
     &.-scrollable {
       --___paddingIncrease: calc(var(--columnGap) / 2);
 
       position: sticky;
-      top: var(--navbar-height);
-      max-height: calc(100vh - var(--navbar-height));
+      inset-block-start: var(--navbar-block-size);
+      max-block-size: calc(100vb - var(--navbar-block-size));
       overflow-y: auto;
       overflow-x: hidden;
-      margin-left: calc(var(--___paddingIncrease) * -1);
-      padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
+      margin-inline-start: calc(var(--___paddingIncrease) * -1);
+      padding-inline-start: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
 
       // On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
       // might implement old style of hiding scrollbars later if there's demand
       @supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
         &:not(.-show-scrollbar) {
           scrollbar-width: none;
-          margin-right: calc(var(--___paddingIncrease) * -1);
-          padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
+          margin-inline-end: calc(var(--___paddingIncrease) * -1);
+          padding-inline-end: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
 
           &::-webkit-scrollbar {
             display: block;
-            width: 0;
+            inline-size: 0;
           }
         }
       }
 
       .panel-heading.-sticky {
-        top: calc(var(--columnGap) / -1);
+        inset-block-start: calc(var(--columnGap) / -1);
       }
     }
   }
 
   &.-has-new-post-button {
     .column {
-      padding-bottom: 10rem;
+      padding-block-end: 10rem;
     }
   }
 
@@ -261,7 +264,7 @@ nav {
     .column {
       .panel-heading.-sticky {
         position: relative;
-        top: 0;
+        inset-block-start: 0;
       }
     }
   }
@@ -289,16 +292,16 @@ nav {
   }
 
   &.-mobile {
-    grid-template-columns: 100vw;
+    grid-template-columns: 100vi;
     grid-template-areas: "content";
     padding: 0;
 
     .column {
-      margin-left: 0;
-      margin-right: 0;
-      padding-top: 0;
-      margin-top: var(--navbar-height);
-      margin-bottom: 0;
+      margin-inline-start: 0;
+      margin-inline-end: 0;
+      padding-block-start: 0;
+      margin-block-start: var(--navbar-block-size);
+      margin-block-end: 0;
     }
 
     .panel-heading,
@@ -306,8 +309,8 @@ nav {
     .panel-heading::before,
     .panel,
     .panel::after {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
     }
 
     #sidebar,
@@ -435,7 +438,7 @@ nav {
   }
 
   &.-fullwidth {
-    width: 100%;
+    inline-size: 100%;
   }
 
   &.-hover-highlight {
@@ -453,7 +456,7 @@ textarea,
     border-radius: 0;
     background: none;
     box-shadow: none;
-    height: unset;
+    block-size: unset;
   }
 
   --_padding: 0.5em;
@@ -476,7 +479,8 @@ textarea,
   position: relative;
   line-height: 2;
   hyphens: none;
-  padding: 0 var(--_padding);
+  padding-block: 0;
+  padding-inline: var(--_padding);
 
   &:disabled,
   &[disabled=disabled],
@@ -515,12 +519,12 @@ textarea,
       display: inline-block;
       content: '';
       transition: box-shadow 200ms;
-      width: 1.1em;
-      height: 1.1em;
+      inline-size: 1.1em;
+      block-size: 1.1em;
       border-radius: 100%; // Radio buttons should always be circle
       box-shadow: 0 0 2px black inset;
       box-shadow: var(--inputShadow);
-      margin-right: 0.5em;
+      margin-inline-end: 0.5em;
       background-color: $fallback--fg;
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
@@ -554,13 +558,13 @@ textarea,
       display: inline-block;
       content: '✓';
       transition: color 200ms;
-      width: 1.1em;
-      height: 1.1em;
+      inline-size: 1.1em;
+      block-size: 1.1em;
       border-radius: $fallback--checkboxRadius;
       border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
       box-shadow: 0 0 2px black inset;
       box-shadow: var(--inputShadow);
-      margin-right: 0.5em;
+      margin-inline-end: 0.5em;
       background-color: $fallback--fg;
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
@@ -573,7 +577,7 @@ textarea,
     }
   }
 
-  &.resize-height {
+  &.resize-block-size {
     resize: vertical;
   }
 }
@@ -603,7 +607,7 @@ option {
 
 .btn-block {
   display: block;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .btn-group {
@@ -616,13 +620,13 @@ option {
     flex: 1 1 auto;
 
     &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
     }
 
     &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
     }
   }
 }
@@ -641,10 +645,11 @@ option {
   box-sizing: border-box;
   display: inline-block;
   border-radius: 99px;
-  max-width: 10em;
-  min-width: 1.7em;
-  height: 1.3em;
-  padding: 0.15em 0.15em;
+  max-inline-size: 10em;
+  min-inline-size: 1.7em;
+  block-size: 1.3em;
+  padding-block: 0.15em;
+  padding-inline: 0.15em;
   vertical-align: middle;
   font-weight: normal;
   font-style: normal;
@@ -664,8 +669,10 @@ option {
 }
 
 .alert {
-  margin: 0 0.35em;
-  padding: 0 0.25em;
+  margin-block: 0;
+  margin-inline: 0.35em;
+  padding-block: 0;
+  padding-inline: 0.25em;
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
 
@@ -726,13 +733,13 @@ option {
 }
 
 .notice-dismissible {
-  padding-right: 4rem;
+  padding-inline-end: 4rem;
   position: relative;
 
   .dismiss {
     position: absolute;
-    top: 0;
-    right: 0;
+    inset-block-start: 0;
+    inset-inline-end: 0;
     padding: 0.5em;
     color: inherit;
   }
@@ -746,7 +753,8 @@ option {
 
 .fa-old-padding {
   &.svg-inline--fa {
-    padding: 0 0.3em;
+    padding-block: 0;
+    padding-inline: 0.3em;
   }
 }
 
@@ -759,13 +767,14 @@ option {
 
   a {
     display: inline-block;
-    padding: 1em 0;
-    width: 100%;
+    padding-block: 1em;
+    padding-inline: 0;
+    inline-size: 100%;
   }
 }
 
 .btn.button-default {
-  min-height: 2em;
+  min-block-size: 2em;
 }
 
 .new-status-notification {
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 126f6fa9..1919f345 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -110,9 +110,11 @@
 @import '../../_variables.scss';
 .AccountActions {
   .ellipsis-button {
-    width: 2.5em;
-    margin: -0.5em 0;
-    padding: 0.5em 0;
+    inline-size: 2.5em;
+    margin-block: -0.5em;
+    margin-inline: 0;
+    padding-block: 0.5em;
+    padding-inline: 0;
     text-align: center;
 
     &:not(:hover) .icon {
diff --git a/src/components/announcement/announcement.vue b/src/components/announcement/announcement.vue
index 5f64232a..42eeb72d 100644
--- a/src/components/announcement/announcement.vue
+++ b/src/components/announcement/announcement.vue
@@ -102,14 +102,14 @@
 @import "../../variables";
 
 .announcement {
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  border-bottom-color: var(--border, $fallback--border);
+  border-block-end-width: 1px;
+  border-block-end-style: solid;
+  border-block-end-color: var(--border, $fallback--border);
   border-radius: 0;
   padding: var(--status-margin, $status-margin);
 
   .heading, .body {
-    margin-bottom: var(--status-margin, $status-margin);
+    margin-block-end: var(--status-margin, $status-margin);
   }
 
   .footer {
@@ -129,7 +129,7 @@
     .btn {
       flex: 1;
       margin: 1em;
-      max-width: 10em;
+      max-inline-size: 10em;
     }
   }
 }
diff --git a/src/components/announcement_editor/announcement_editor.vue b/src/components/announcement_editor/announcement_editor.vue
index 0f29f9f7..04b6fd00 100644
--- a/src/components/announcement_editor/announcement_editor.vue
+++ b/src/components/announcement_editor/announcement_editor.vue
@@ -47,12 +47,12 @@
   flex-direction: column;
 
   .announcement-metadata {
-    margin-top: 0.5em;
+    margin-block-start: 0.5em;
   }
 
   .post-textarea {
     resize: vertical;
-    height: 10em;
+    block-size: 10em;
     overflow: none;
     box-sizing: content-box;
   }
diff --git a/src/components/announcements_page/announcements_page.vue b/src/components/announcements_page/announcements_page.vue
index a548a8a0..aabff556 100644
--- a/src/components/announcements_page/announcements_page.vue
+++ b/src/components/announcements_page/announcements_page.vue
@@ -68,11 +68,11 @@
     padding: var(--status-margin, $status-margin);
 
     .heading, .body {
-      margin-bottom: var(--status-margin, $status-margin);
+      margin-block-end: var(--status-margin, $status-margin);
     }
 
     .post-button {
-      min-width: 10em;
+      min-inline-size: 10em;
     }
   }
 }
diff --git a/src/components/async_component_error/async_component_error.vue b/src/components/async_component_error/async_component_error.vue
index 26ab5d21..795ac855 100644
--- a/src/components/async_component_error/async_component_error.vue
+++ b/src/components/async_component_error/async_component_error.vue
@@ -31,12 +31,13 @@ export default {
 <style lang="scss">
 .async-component-error {
   display: flex;
-  height: 100%;
+  block-size: 100%;
   align-items: center;
   justify-content: center;
   .btn {
     margin: .5em;
-    padding: .5em 2em;
+    padding-block: .5em;
+    padding-inline: 2em;
   }
 }
 </style>
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 484ca0c4..1288d896 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -6,7 +6,7 @@
   position: relative;
   align-self: flex-start;
   line-height: 0;
-  height: 100%;
+  block-size: 100%;
   border-style: solid;
   border-width: 1px;
   border-radius: $fallback--attachmentRadius;
@@ -16,7 +16,7 @@
 
   .attachment-wrapper {
     flex: 1 1 auto;
-    height: 200px;
+    block-size: 200px;
     position: relative;
     overflow: hidden;
   }
@@ -24,9 +24,9 @@
   .description-container {
     flex: 0 1 0;
     display: flex;
-    padding-top: 0.5em;
+    padding-block-start: 0.5em;
     z-index: 1;
-    max-height: 50%;
+    max-block-size: 50%;
 
     p {
       flex: 1;
@@ -42,10 +42,10 @@
 
     &.-static {
       position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      padding-top: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
+      inset-block-end: 0;
+      padding-block-start: 0;
       background: var(--popover);
       box-shadow: var(--popupShadow);
     }
@@ -53,15 +53,15 @@
 
   .description-field {
     flex: 1;
-    min-width: 0;
+    min-inline-size: 0;
 
     box-sizing: content-box;
     overflow: hidden;
-    transition: min-height 200ms 100ms;
+    transition: min-block-size 200ms 100ms;
 
-    padding-bottom: var(--_padding);
-    height: calc(var(--post-line-height) * 1em);
-    min-height: calc(var(--post-line-height) * 1em);
+    padding-block-end: var(--_padding);
+    block-size: calc(var(--post-line-height) * 1em);
+    min-block-size: calc(var(--post-line-height) * 1em);
     resize: none;
 
     &.scrollable-form {
@@ -77,14 +77,14 @@
   & .oembed-container {
     display: flex;
     justify-content: center;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
   }
 
   .image-container {
     .image {
-      width: 100%;
-      height: 100%;
+      inline-size: 100%;
+      block-size: 100%;
     }
   }
 
@@ -92,8 +92,8 @@
   & .video-container {
     & .flash,
     & video {
-      width: 100%;
-      height: 100%;
+      inline-size: 100%;
+      block-size: 100%;
       object-fit: contain;
       align-self: center;
     }
@@ -104,8 +104,8 @@
     align-items: flex-end;
 
     audio {
-      width: 100%;
-      height: 100%;
+      inline-size: 100%;
+      block-size: 100%;
     }
   }
 
@@ -114,15 +114,15 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding-top: 0.5em;
+    padding-block-start: 0.5em;
   }
 
 
   .play-icon {
     position: absolute;
     font-size: 64px;
-    top: calc(50% - 32px);
-    left: calc(50% - 32px);
+    inset-block-start: calc(50% - 32px);
+    inset-inline-start: calc(50% - 32px);
     color: rgba(255, 255, 255, 0.75);
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
 
@@ -134,10 +134,10 @@
   .attachment-buttons {
     display: flex;
     position: absolute;
-    right: 0;
-    top: 0;
-    margin-top: 0.5em;
-    margin-right: 0.5em;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+    margin-block-start: 0.5em;
+    margin-inline-end: 0.5em;
     z-index: 1;
 
     .attachment-button {
@@ -145,9 +145,9 @@
       border-radius: $fallback--tooltipRadius;
       border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
       text-align: center;
-      width: 2em;
-      height: 2em;
-      margin-left: 0.5em;
+      inline-size: 2em;
+      block-size: 2em;
+      margin-inline-start: 0.5em;
       font-size: 1.25em;
       // TODO: theming? hard to theme with unknown background image color
       background: rgba(230, 230, 230, 0.7);
@@ -165,12 +165,12 @@
   .oembed-container {
     line-height: 1.2em;
     flex: 1 0 100%;
-    width: 100%;
-    margin-right: 15px;
+    inline-size: 100%;
+    margin-inline-end: 15px;
     display: flex;
 
     img {
-      width: 100%;
+      inline-size: 100%;
     }
 
     .image {
@@ -178,7 +178,7 @@
       img {
         border: 0px;
         border-radius: 5px;
-        height: 100%;
+        block-size: 100%;
         object-fit: cover;
       }
     }
@@ -221,7 +221,7 @@
     color: var(--postLink, $fallback--link);
     overflow: hidden;
     white-space: nowrap;
-    height: auto;
+    block-size: auto;
     line-height: 1.5;
 
     &:not(.-editable) {
@@ -242,7 +242,7 @@
 
       .description-container {
         flex: 1;
-        padding-left: 0.5em;
+        padding-inline-start: 0.5em;
       }
 
       .attachment-buttons {
@@ -253,7 +253,7 @@
 
     a {
       display: inline-block;
-      max-width: 100%;
+      max-inline-size: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
     }
diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index f283ab82..89308895 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -31,15 +31,15 @@
 
   &-input {
     display: block;
-    width: 100%;
+    inline-size: 100%;
   }
 
   &-results {
     position: absolute;
-    left: 0;
-    top: 100%;
-    right: 0;
-    max-height: 400px;
+    inset-inline-start: 0;
+    inset-block-start: 100%;
+    inset-inline-end: 0;
+    max-block-size: 400px;
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg);
     border-style: solid;
@@ -48,8 +48,8 @@
     border-color: var(--border, $fallback--border);
     border-radius: $fallback--inputRadius;
     border-radius: var(--inputRadius, $fallback--inputRadius);
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
     overflow-y: auto;
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index e1b6e971..4160870a 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -26,20 +26,21 @@
 
   // For hiding overflowing elements
   flex-wrap: wrap;
-  height: 24px;
+  block-size: 24px;
 
   .avatars-item {
-    margin: 0 0 5px 5px;
+    margin-block: 0 5px;
+    margin-inline: 5px 0;
 
     &:first-child {
-      padding-left: 5px;
+      padding-inline-start: 5px;
     }
 
     .avatar-small {
       border-radius: $fallback--avatarAltRadius;
       border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-      height: 24px;
-      width: 24px;
+      block-size: 24px;
+      inline-size: 24px;
     }
   }
 }
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index eeca7828..b5811557 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -51,20 +51,21 @@
   display: flex;
   flex: 1 0;
   margin: 0;
-  padding: 0.6em 1em;
+  padding-block: 0.6em;
+  padding-inline: 1em;
 
   &-collapsed-content {
-    margin-left: 0.7em;
-    text-align: left;
+    margin-inline-start: 0.7em;
+    text-align: start;
     flex: 1;
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   &-user-name {
     img {
       object-fit: contain;
-      height: 16px;
-      width: 16px;
+      block-size: 16px;
+      inline-size: 16px;
       vertical-align: middle;
     }
   }
@@ -72,7 +73,7 @@
   &-user-name-value,
   &-screen-name {
     display: inline-block;
-    max-width: 100%;
+    max-inline-size: 100%;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -80,8 +81,8 @@
 
   &-expanded-content {
     flex: 1;
-    margin-left: 0.7em;
-    min-width: 0;
+    margin-inline-start: 0.7em;
+    min-inline-size: 0;
   }
 }
 </style>
diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue
index 2fe66d4c..d0a15530 100644
--- a/src/components/block_card/block_card.vue
+++ b/src/components/block_card/block_card.vue
@@ -35,10 +35,10 @@
 
 <style lang="scss">
 .block-card-content-container {
-  margin-top: 0.5em;
-  text-align: right;
+  margin-block-start: 0.5em;
+  text-align: end;
   button {
-    width: 10em;
+    inline-size: 10em;
   }
 }
 </style>
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 83695912..5989772b 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -37,22 +37,22 @@ export default {
 .checkbox {
   position: relative;
   display: inline-block;
-  min-height: 1.2em;
+  min-block-size: 1.2em;
 
   &-indicator {
     position: relative;
-    padding-left: 1.2em;
+    padding-inline-start: 1.2em;
   }
 
   &-indicator::before {
     position: absolute;
-    right: 0;
-    top: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
     display: block;
     content: '✓';
     transition: color 200ms;
-    width: 1.1em;
-    height: 1.1em;
+    inline-size: 1.1em;
+    block-size: 1.1em;
     border-radius: $fallback--checkboxRadius;
     border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
     box-shadow: 0px 0px 2px black inset;
@@ -96,7 +96,7 @@ export default {
   }
 
   & > span {
-    margin-left: .5em;
+    margin-inline-start: .5em;
   }
 }
 </style>
diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index 3451c5d9..641b86fd 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -6,9 +6,10 @@
   &-field.input {
     display: inline-flex;
     flex: 0 0 0;
-    max-width: 9em;
+    max-inline-size: 9em;
     align-items: stretch;
-    padding: .2em 8px;
+    padding-block: .2em;
+    padding-inline: 8px;
 
     input {
       background: none;
@@ -20,23 +21,23 @@
 
       &.textColor {
         flex: 1 0 3em;
-        min-width: 3em;
+        min-inline-size: 3em;
         padding: 0;
       }
 
       &.nativeColor {
         flex: 0 0 2em;
-        min-width: 2em;
+        min-inline-size: 2em;
         align-self: center;
-        height: 2em;
+        block-size: 2em;
       }
     }
     .computedIndicator,
     .transparentIndicator {
       flex: 0 0 2em;
-      min-width: 2em;
+      min-inline-size: 2em;
       align-self: center;
-      height: 100%;
+      block-size: 100%;
     }
     .transparentIndicator {
       // forgot to install counter-strike source, ooops
@@ -47,16 +48,16 @@
         content: '';
         background-color: #000000;
         position: absolute;
-        height: 50%;
-        width: 50%;
+        block-size: 50%;
+        inline-size: 50%;
       }
       &::after {
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
       }
       &::before {
-        bottom: 0;
-        right: 0;
+        inset-block-end: 0;
+        inset-inline-end: 0;
       }
     }
   }
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index e84603c3..faf915d4 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -112,7 +112,7 @@ export default {
 <style lang="scss">
 .color-control {
   input.text-input {
-    max-width: 7em;
+    max-inline-size: 7em;
     flex: 1;
   }
 }
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index 374cb9ba..a7e16d01 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -88,17 +88,17 @@ export default {
   display: flex;
   justify-content: flex-end;
 
-  margin-top: -4px;
-  margin-bottom: 5px;
+  margin-block-start: -4px;
+  margin-block-end: 5px;
 
   .label {
-    margin-right: 1em;
+    margin-inline-end: 1em;
   }
 
   .rating {
     display: inline-block;
     text-align: center;
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
   }
 }
 </style>
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 1adbe250..7910c86a 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -205,9 +205,9 @@
 
   .conversation-dive-to-top-level-box {
     padding: var(--status-margin, $status-margin);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
+    border-block-end-width: 1px;
+    border-block-end-style: solid;
+    border-block-end-color: var(--border, $fallback--border);
     border-radius: 0;
     /* Make the button stretch along the whole row */
     display: flex;
@@ -216,8 +216,8 @@
   }
 
   .thread-ancestors {
-    margin-left: var(--status-margin, $status-margin);
-    border-left: 2px solid var(--border, $fallback--border);
+    margin-inline-start: var(--status-margin, $status-margin);
+    border-inline-start: 2px solid var(--border, $fallback--border);
   }
 
   .thread-ancestor.-faded .StatusContent {
@@ -227,10 +227,10 @@
   }
 
   .thread-ancestor-dive-box {
-    padding-left: var(--status-margin, $status-margin);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
+    padding-inline-start: var(--status-margin, $status-margin);
+    border-block-end-width: 1px;
+    border-block-end-style: solid;
+    border-block-end-color: var(--border, $fallback--border);
     border-radius: 0;
     /* Make the button stretch along the whole row */
     &, &-inner {
@@ -244,9 +244,9 @@
   }
 
   .conversation-status {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
+    border-block-end-width: 1px;
+    border-block-end-style: solid;
+    border-block-end-color: var(--border, $fallback--border);
     border-radius: 0;
   }
 
@@ -255,24 +255,30 @@
   .thread-ancestor:last-child .thread-ancestor-dive-box,
   &:last-child .conversation-status,
   &.-expanded .thread-tree .conversation-status {
-    border-bottom: none;
+    border-block-end: none;
   }
 
   .thread-ancestors + .thread-tree > .conversation-status {
-    border-top-width: 1px;
-    border-top-style: solid;
-    border-top-color: var(--border, $fallback--border);
+    border-block-start-width: 1px;
+    border-block-start-style: solid;
+    border-block-start-color: var(--border, $fallback--border);
   }
 
   /* expanded conversation in timeline */
   &.status-fadein.-expanded .thread-body {
-    border-left-width: 4px;
-    border-left-style: solid;
-    border-left-color: $fallback--cRed;
-    border-left-color: var(--cRed, $fallback--cRed);
-    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-inline-start-width: 4px;
+    border-inline-start-style: solid;
+    border-inline-start-color: $fallback--cRed;
+    border-inline-start-color: var(--cRed, $fallback--cRed);
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: $fallback--panelRadius;
+    border-end-end-radius: $fallback--panelRadius;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: var(--panelRadius, $fallback--panelRadius);
+    border-end-end-radius: var(--panelRadius, $fallback--panelRadius);
+    border-block-end: 1px solid var(--border, $fallback--border);
   }
 
   &.-expanded.status-fadein {
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 4d8c40e3..7d254948 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -1,7 +1,7 @@
 @import '../../_variables.scss';
 
 .DesktopNav {
-  width: 100%;
+  inline-size: 100%;
 
   input {
     color: var(--inputTopbarText, var(--inputText));
@@ -13,13 +13,14 @@
 
   .inner-nav {
     display: grid;
-    grid-template-rows: var(--navbar-height);
+    grid-template-rows: var(--navbar-block-size);
     grid-template-columns: 2fr auto 2fr;
     grid-template-areas: "nav-left logo actions";
     box-sizing: border-box;
-    padding: 0 1.2em;
+    padding-block: 0;
+    padding-inline: 1.2em;
     margin: auto;
-    max-width: 1110px;
+    max-inline-size: 1110px;
   }
 
   &.-logoLeft .inner-nav {
@@ -71,27 +72,27 @@
       background-color: $fallback--fg;
       background-color: var(--topBarText, $fallback--fg);
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
     }
 
     img {
       display: inline-block;
-      height: var(--navbar-height);
+      block-size: var(--navbar-block-size);
     }
   }
 
   .nav-icon {
-    margin-left: 0.2em;
-    width: 2em;
-    height: 100%;
+    margin-inline-start: 0.2em;
+    inline-size: 2em;
+    block-size: 100%;
     text-align: center;
 
     &.router-link-active {
       font-size: 1.2em;
-      margin-top: 0.05em;
+      margin-block-start: 0.05em;
 
       .svg-inline--fa {
         font-weight: bolder;
@@ -109,12 +110,12 @@
 
   .-wide {
     .nav-icon {
-      margin-left: 0.7em;
+      margin-inline-start: 0.7em;
     }
   }
 
   .left {
-    padding-left: 5px;
+    padding-inline-start: 5px;
     display: flex;
   }
 
@@ -122,9 +123,9 @@
     grid-area: nav-left;
 
     .favicon {
-      height: 28px;
+      block-size: 28px;
       vertical-align: middle;
-      padding-right: 5px;
+      padding-inline-end: 5px;
     }
   }
 
@@ -134,15 +135,15 @@
 
   .item {
     flex: 1;
-    line-height: var(--navbar-height);
-    height: var(--navbar-height);
+    line-height: var(--navbar-block-size);
+    block-size: var(--navbar-block-size);
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
 
     &.right {
       justify-content: flex-end;
-      text-align: right;
+      text-align: end;
     }
   }
 }
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 0feef27b..4cbfea47 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -30,31 +30,32 @@
 // TODO: unify with other modals.
 .dark-overlay {
   &::before {
-    bottom: 0;
+    inset-block-end: 0;
     content: " ";
     display: block;
     cursor: default;
-    left: 0;
+    inset-inline-start: 0;
     position: fixed;
-    right: 0;
-    top: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
     background: rgba(27,31,35,.5);
     z-index: 2000;
   }
 }
 
 .dialog-modal.panel {
-  top: 0;
-  left: 50%;
-  max-height: 80vh;
-  max-width: 90vw;
-  margin: 15vh auto;
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+  max-block-size: 80vb;
+  max-inline-size: 90vi;
+  margin-block: 15vb;
+  margin-inline: auto;
   position: fixed;
   transform: translateX(-50%);
   z-index: 2001;
   cursor: default;
   display: block;
-  width: max-content;
+  inline-size: max-content;
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 
@@ -66,7 +67,8 @@
 
   .dialog-modal-content {
     margin: 0;
-    padding: 1rem 1rem;
+    padding-block: 1rem;
+    padding-inline: 1rem;
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg);
     white-space: normal;
@@ -74,17 +76,18 @@
 
   .dialog-modal-footer {
     margin: 0;
-    padding: .5em .5em;
+    padding-block: .5em;
+    padding-inline: .5em;
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg);
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
+    border-block-start: 1px solid $fallback--border;
+    border-block-start: 1px solid var(--border, $fallback--border);
     display: flex;
     justify-content: flex-end;
 
     button {
-      width: auto;
-      margin-left: .5rem;
+      inline-size: auto;
+      margin-inline-start: .5rem;
     }
   }
 }
diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue
index 836688aa..1015ee5b 100644
--- a/src/components/domain_mute_card/domain_mute_card.vue
+++ b/src/components/domain_mute_card/domain_mute_card.vue
@@ -34,20 +34,21 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.6em 1em 0.6em 0;
+  padding-block: 0.6em 0.6em;
+  padding-inline: 0 1em;
 
   &-domain {
-    margin-right: 1em;
+    margin-inline-end: 1em;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   button {
-    width: 10em;
+    inline-size: 10em;
   }
 
   .autosuggest-results & {
-    padding-left: 1em;
+    padding-inline-start: 1em;
   }
 }
 </style>
diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/src/components/edit_status_modal/edit_status_modal.vue
index 00dde7de..5d34fee3 100644
--- a/src/components/edit_status_modal/edit_status_modal.vue
+++ b/src/components/edit_status_modal/edit_status_modal.vue
@@ -28,17 +28,17 @@
 }
 .edit-form-modal-panel {
   flex-shrink: 0;
-  margin-top: 25%;
-  margin-bottom: 2em;
-  width: 100%;
-  max-width: 700px;
+  margin-block-start: 25%;
+  margin-block-end: 2em;
+  inline-size: 100%;
+  max-inline-size: 700px;
 
   @media (orientation: landscape) {
-    margin-top: 8%;
+    margin-block-start: 8%;
   }
 
   .form-bottom-left {
-    max-width: 6.5em;
+    max-inline-size: 6.5em;
 
     .emoji-icon {
       justify-content: right;
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 078253c2..93910a5b 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -70,14 +70,15 @@
   position: relative;
 
   &.with-picker input {
-    padding-right: 30px;
+    padding-inline-end: 30px;
   }
 
   .emoji-picker-icon {
     position: absolute;
-    top: 0;
-    right: 0;
-    margin: .2em .25em;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    margin-block: .2em;
+    margin-inline: .25em;
     font-size: 1.3em;
     cursor: pointer;
     line-height: 24px;
@@ -90,7 +91,7 @@
   .emoji-picker-panel {
     position: absolute;
     z-index: 20;
-    margin-top: 2px;
+    margin-block-start: 2px;
 
     &.hide {
       display: none
@@ -101,19 +102,20 @@
     &-panel {
       position: absolute;
       z-index: 20;
-      margin-top: 2px;
+      margin-block-start: 2px;
 
       &.hide {
         display: none
       }
 
       &-body {
-        margin: 0 0.5em 0 0.5em;
+        margin-block: 0 0;
+        margin-inline: 0.5em 0.5em;
         border-radius: $fallback--tooltipRadius;
         border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
         box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
         box-shadow: var(--popupShadow);
-        min-width: 75%;
+        min-inline-size: 75%;
         background-color: $fallback--bg;
         background-color: var(--popover, $fallback--bg);
         color: $fallback--link;
@@ -130,22 +132,23 @@
     &-item {
       display: flex;
       cursor: pointer;
-      padding: 0.2em 0.4em;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-      height: 32px;
+      padding-block: 0.2em;
+      padding-inline: 0.4em;
+      border-block-end: 1px solid rgba(0, 0, 0, 0.4);
+      block-size: 32px;
 
       .image {
-        width: 32px;
-        height: 32px;
+        inline-size: 32px;
+        block-size: 32px;
         line-height: 32px;
         text-align: center;
         font-size: 32px;
 
-        margin-right: 4px;
+        margin-inline-end: 4px;
 
         img {
-          width: 32px;
-          height: 32px;
+          inline-size: 32px;
+          block-size: 32px;
           object-fit: contain;
         }
       }
@@ -154,7 +157,8 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        margin: 0 0.1em 0 0.2em;
+        margin-block: 0 0;
+        margin-inline: 0.2em 0.1em;
 
         .displayText {
           line-height: 1.5;
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index ac7b8b5d..58a2f2d6 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -2,21 +2,21 @@
 
 .Notification {
   .emoji-picker {
-    min-width: 160%;
-    width: 150%;
+    min-inline-size: 160%;
+    inline-size: 150%;
     overflow: hidden;
-    left: -70%;
-    max-width: 100%;
+    inset-inline-start: -70%;
+    max-inline-size: 100%;
     @media (min-width: 800px) and (max-width: 1300px) {
-      left: -50%;
-      min-width: 50%;
-      max-width: 130%;
+      inset-inline-start: -50%;
+      min-inline-size: 50%;
+      max-inline-size: 130%;
     }
 
     @media (max-width: 800px) {
-      left: -10%;
-      min-width: 50%;
-      max-width: 130%;
+      inset-inline-start: -10%;
+      min-inline-size: 50%;
+      max-inline-size: 130%;
     }
   }
 }
@@ -24,9 +24,10 @@
   display: flex;
   flex-direction: column;
   position: absolute;
-  right: 0;
-  left: 0;
-  margin: 0 !important;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  margin-block: 0;
+  margin-inline: !important;
   z-index: 100;
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
@@ -50,20 +51,21 @@
   }
 
   .keep-open-label {
-    padding: 0 7px;
+    padding-block: 0;
+    padding-inline: 7px;
     display: flex;
   }
 
   .heading {
-    margin-top: 10px;
-    height: 4.8em;
+    margin-block-start: 10px;
+    block-size: 4.8em;
   }
 
   .content {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
-    min-height: 0px;
+    min-block-size: 0px;
   }
 
   .emoji-tabs {
@@ -71,14 +73,14 @@
   }
 
   .emoji-groups {
-    min-height: 200px;
+    min-block-size: 200px;
   }
 
   .additional-tabs {
-    border-left: 1px solid;
-    border-left-color: $fallback--icon;
-    border-left-color: var(--icon, $fallback--icon);
-    padding-left: 7px;
+    border-inline-start: 1px solid;
+    border-inline-start-color: $fallback--icon;
+    border-inline-start-color: var(--icon, $fallback--icon);
+    padding-inline-start: 7px;
     flex: 0 0 auto;
   }
 
@@ -89,7 +91,7 @@
     flex-wrap: nowrap;
 
     overflow: auto;
-    width: 100%;
+    inline-size: 100%;
 
     white-space: nowrap;
 
@@ -98,14 +100,14 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 32px;
-      height: 32px;
+      inline-size: 32px;
+      block-size: 32px;
       padding: .4em;
       cursor: pointer;
 
       img {
-        max-width: 100%;
-        max-height: 100%;
+        max-inline-size: 100%;
+        max-block-size: 100%;
         object-fit: contain;
       }
 
@@ -119,7 +121,7 @@
       }
 
       &.active {
-        border-bottom: 4px solid;
+        border-block-end: 4px solid;
 
         svg {
           color: $fallback--lightText;
@@ -142,7 +144,7 @@
       display: flex;
       flex-direction: column;
       flex: 1 1 auto;
-      min-height: 0;
+      min-block-size: 0;
 
       &.hidden {
         opacity: 0;
@@ -158,7 +160,7 @@
       flex: 0 0 auto;
 
       input {
-        width: 100%;
+        inline-size: 100%;
       }
     }
 
@@ -189,12 +191,12 @@
       display: flex;
       align-items: center;
       flex-wrap: wrap;
-      padding-left: 5px;
+      padding-inline-start: 5px;
       justify-content: left;
 
       &-title {
         font-size: 0.85em;
-        width: 100%;
+        inline-size: 100%;
         margin: 0;
 
         &.disabled {
@@ -204,8 +206,8 @@
     }
 
     &-item {
-      width: 32px;
-      height: 32px;
+      inline-size: 32px;
+      block-size: 32px;
       box-sizing: border-box;
       display: flex;
       font-size: 32px;
@@ -217,8 +219,8 @@
 
       img {
         object-fit: contain;
-        max-width: 100%;
-        max-height: 100%;
+        max-inline-size: 100%;
+        max-block-size: 100%;
       }
     }
 
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index d9c568f6..e33188bc 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -47,7 +47,7 @@
 
 .emoji-reactions {
   display: flex;
-  margin-top: 0.25em;
+  margin-block-start: 0.25em;
   flex-wrap: wrap;
 }
 
@@ -56,16 +56,17 @@
 }
 
 .emoji-reaction {
-  padding: 0 0.5em;
-  margin-right: 0.5em;
-  margin-top: 0.5em;
+  padding-block: 0;
+  padding-inline: 0.5em;
+  margin-inline-end: 0.5em;
+  margin-block-start: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   .reaction-emoji {
-    width: 2.55em !important;
-    margin-right: 0.25em;
+    inline-size: 2.55em !important;
+    margin-inline-end: 0.25em;
   }
   &:focus {
     outline: none;
@@ -81,9 +82,10 @@
 }
 
 .emoji-reaction-expand {
-  padding: 0 0.5em;
-  margin-right: 0.5em;
-  margin-top: 0.5em;
+  padding-block: 0;
+  padding-inline: 0.5em;
+  margin-inline-end: 0.5em;
+  margin-block-start: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -94,8 +96,8 @@
 
 .button-default.picked-reaction {
   border: 1px solid var(--accent, $fallback--link);
-  margin-left: -1px; // offset the border, can't use inset shadows either
-  margin-right: calc(0.5em - 1px);
+  margin-inline-start: -1px; // offset the border, can't use inset shadows either
+  margin-inline-end: calc(0.5em - 1px);
 }
 
 </style>
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 9da2ad8c..9c65ad8d 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -213,7 +213,7 @@
 .ExtraButtons {
   /* override of popover internal stuff */
   .popover-trigger-button {
-    width: auto;
+    inline-size: auto;
   }
 
   .popover-trigger {
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 7d23572e..aeb56857 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -45,7 +45,8 @@
 
   > :first-child {
     padding: 10px;
-    margin: -10px -8px -10px -10px;
+    margin-block: -10px -10px;
+    margin-inline: -10px -8px;
   }
 
   .action-counter {
diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index 95f71950..bc486b37 100644
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@@ -45,18 +45,18 @@
 @import '../../_variables.scss';
 .Flash {
   display: inline-block;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   position: relative;
 
   .player {
-    height: 100%;
-    width: 100%;
+    block-size: 100%;
+    inline-size: 100%;
   }
 
   .placeholder {
-    height: 100%;
-    width: 100%;
+    block-size: 100%;
+    inline-size: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -65,7 +65,7 @@
   }
 
   .hider {
-    top: 0;
+    inset-block-start: 0;
   }
 
   .label {
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index c919b11a..7104237b 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -46,15 +46,16 @@
   }
 
   &-button {
-    margin-top: 0.5em;
-    padding: 0 1.5em;
-    margin-left: 1em;
+    margin-block-start: 0.5em;
+    padding-block: 0;
+    padding-inline: 1.5em;
+    margin-inline-start: 1em;
   }
 
   &-follow-button {
-    margin-top: 0.5em;
-    margin-left: auto;
-    width: 10em;
+    margin-block-start: 0.5em;
+    margin-inline-start: auto;
+    inline-size: 10em;
   }
 }
 </style>
diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
index 835471e7..bd13f092 100644
--- a/src/components/follow_request_card/follow_request_card.vue
+++ b/src/components/follow_request_card/follow_request_card.vue
@@ -47,14 +47,14 @@
   flex-direction: row;
   flex-wrap: wrap;
   button {
-    margin-top: 0.5em;
-    margin-right: 0.5em;
+    margin-block-start: 0.5em;
+    margin-inline-end: 0.5em;
     flex: 1 1;
-    max-width: 12em;
-    min-width: 8em;
+    max-inline-size: 12em;
+    min-inline-size: 8em;
 
     &:last-child {
-      margin-right: 0;
+      margin-inline-end: 0;
     }
   }
 }
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index f100c3a9..bc256f2b 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -53,17 +53,17 @@
 @import '../../_variables.scss';
 .font-control {
   input.custom-font {
-    min-width: 10em;
+    min-inline-size: 10em;
   }
   &.custom {
     /* TODO Should make proper joiners... */
     .font-switcher {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
     }
     .custom-font {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
     }
   }
 }
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 3e0d23b6..776d78af 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -96,18 +96,18 @@
 
   .gallery-row {
     position: relative;
-    height: 0;
-    width: 100%;
+    block-size: 0;
+    inline-size: 100%;
     flex-grow: 1;
 
     &:not(:first-child) {
-      margin-top: 0.5em;
+      margin-block-start: 0.5em;
     }
   }
 
   &.-long {
     .gallery-rows {
-      max-height: 25em;
+      max-block-size: 25em;
       overflow: hidden;
       mask:
         linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
@@ -135,14 +135,15 @@
     line-height: 2;
 
     button {
-      padding: 0 2em;
+      padding-block: 0;
+      padding-inline: 2em;
     }
   }
 
   .gallery-row {
     &.-grid,
     &.-minimal {
-      height: auto;
+      block-size: auto;
       .gallery-row-inner {
         position: relative;
       }
@@ -151,18 +152,18 @@
 
   .gallery-row-inner {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     align-content: stretch;
 
     &.-grid {
-      width: 100%;
-      height: auto;
+      inline-size: 100%;
+      block-size: auto;
       position: relative;
       display: grid;
       grid-column-gap: 0.5em;
@@ -176,12 +177,13 @@
   }
 
   .gallery-item {
-    margin: 0 0.5em 0 0;
+    margin-block: 0 0;
+    margin-inline: 0 0.5em;
     flex-grow: 1;
-    height: 100%;
+    block-size: 100%;
     box-sizing: border-box;
     // to make failed images a bit more noticeable on chromium
-    min-width: 2em;
+    min-inline-size: 2em;
     &:last-child {
       margin: 0;
     }
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index ddc45b81..da2bd804 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -29,8 +29,8 @@
 
 .global-notice-list {
   position: fixed;
-  top: 50px;
-  width: 100%;
+  inset-block-start: 50px;
+  inline-size: 100%;
   pointer-events: none;
   z-index: 1001;
   display: flex;
@@ -40,12 +40,12 @@
   .global-notice {
     pointer-events: auto;
     text-align: center;
-    width: 40em;
-    max-width: calc(100% - 3em);
+    inline-size: 40em;
+    max-inline-size: calc(100% - 3em);
     display: flex;
-    padding-left: 1.5em;
+    padding-inline-start: 1.5em;
     line-height: 2;
-    margin-bottom: 0.5em;
+    margin-block-end: 0.5em;
 
     .notice-message {
       flex: 1 1 100%;
@@ -87,7 +87,7 @@
   }
 
   .close-notice {
-    padding-right: 0.2em;
+    padding-inline-end: 0.2em;
     .svg-inline--fa:hover {
       opacity: 0.6;
     }
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 8c48a387..57225c8b 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -60,15 +60,15 @@
 
     img {
       display: block;
-      max-width: 100%;
+      max-inline-size: 100%;
     }
   }
 
   &-buttons-wrapper {
-    margin-top: 10px;
+    margin-block-start: 10px;
 
     button {
-      margin-top: 5px;
+      margin-block-start: 5px;
     }
   }
 }
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 220527f2..174c3cbe 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -40,15 +40,15 @@
   flex-direction: row;
   cursor: pointer;
   overflow: hidden;
-  margin-top: 0.5em;
+  margin-block-start: 0.5em;
 
   .card-image {
     flex-shrink: 0;
-    width: 120px;
-    max-width: 25%;
+    inline-size: 120px;
+    max-inline-size: 25%;
     img {
-      width: 100%;
-      height: 100%;
+      inline-size: 100%;
+      block-size: 100%;
       object-fit: cover;
       border-radius: $fallback--attachmentRadius;
       border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
@@ -56,7 +56,7 @@
   }
 
   .card-content {
-    max-height: 100%;
+    max-block-size: 100%;
     margin: 0.5em;
     display: flex;
     flex-direction: column;
@@ -67,18 +67,20 @@
   }
 
   .card-description {
-    margin: 0.5em 0 0 0;
+    margin-block: 0.5em 0;
+    margin-inline: 0 0;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-word;
     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?
-    max-height: calc(1.2em * 3 - 1px);
+    max-block-size: calc(1.2em * 3 - 1px);
   }
 
   .nsfw-alert {
-    margin: 2em 0;
+    margin-block: 2em;
+    margin-inline: 0;
   }
 
   color: $fallback--text;
diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index a6223cce..7c537e79 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -39,9 +39,9 @@ export default {
 
 .list {
   &-item:not(:last-child) {
-    border-bottom: 1px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
+    border-block-end: 1px solid;
+    border-block-end-color: $fallback--border;
+    border-block-end-color: var(--border, $fallback--border);
   }
 
   &-empty-content {
diff --git a/src/components/list_edit/list_edit.vue b/src/components/list_edit/list_edit.vue
index af46c4b8..243548a1 100644
--- a/src/components/list_edit/list_edit.vue
+++ b/src/components/list_edit/list_edit.vue
@@ -72,19 +72,20 @@
 .list-edit {
   .input-wrap {
     display: flex;
-    margin: 0.7em 0.5em 0.7em 0.5em;
+    margin-block: 0.7em 0.7em;
+    margin-inline: 0.5em 0.5em;
 
     input {
-      width: 100%;
+      inline-size: 100%;
     }
   }
 
   .search-icon {
-    margin-right: 0.3em;
+    margin-inline-end: 0.3em;
   }
 
   .member-list {
-    padding-bottom: 0.7rem;
+    padding-block-end: 0.7rem;
   }
 
   .basic-user-card:hover,
@@ -96,9 +97,9 @@
   .go-back-button {
     text-align: center;
     line-height: 1;
-    height: 100%;
+    block-size: 100%;
     align-self: start;
-    width: var(--__panel-heading-height-inner);
+    inline-size: var(--__panel-heading-block-size-inner);
   }
 
   .btn {
diff --git a/src/components/list_new/list_new.vue b/src/components/list_new/list_new.vue
index a713b852..2d8e1f03 100644
--- a/src/components/list_new/list_new.vue
+++ b/src/components/list_new/list_new.vue
@@ -67,11 +67,11 @@
 
 .list-new {
   .search-icon {
-    margin-right: 0.3em;
+    margin-inline-end: 0.3em;
   }
 
   .member-list {
-    padding-bottom: 0.7rem;
+    padding-block-end: 0.7rem;
   }
 
   .basic-user-card:hover,
@@ -83,9 +83,9 @@
   .go-back-button {
     text-align: center;
     line-height: 1;
-    height: 100%;
+    block-size: 100%;
     align-self: start;
-    width: var(--__panel-heading-height-inner);
+    inline-size: var(--__panel-heading-block-size-inner);
   }
 
   .btn {
diff --git a/src/components/list_user_search/list_user_search.vue b/src/components/list_user_search/list_user_search.vue
index fcd2f7da..532e1fe8 100644
--- a/src/components/list_user_search/list_user_search.vue
+++ b/src/components/list_user_search/list_user_search.vue
@@ -31,15 +31,16 @@
 
 .input-wrap {
   display: flex;
-  margin: 0.7em 0.5em 0.7em 0.5em;
+  margin-block: 0.7em 0.7em;
+  margin-inline: 0.5em 0.5em;
 
   input {
-    width: 100%;
+    inline-size: 100%;
   }
 }
 
 .search-icon {
-  margin-right: 0.3em;
+  margin-inline-end: 0.3em;
 }
 
 </style>
diff --git a/src/components/local_bubble_panel/local_bubble_panel.scss b/src/components/local_bubble_panel/local_bubble_panel.scss
index 80ea01d4..421be4da 100644
--- a/src/components/local_bubble_panel/local_bubble_panel.scss
+++ b/src/components/local_bubble_panel/local_bubble_panel.scss
@@ -2,20 +2,20 @@
   margin: 1em;
 
   table {
-    width:100%;
-    text-align: left;
-    padding-left:10px;
-    padding-bottom:20px;
+    inline-size:100%;
+    text-align: start;
+    padding-inline-start:10px;
+    padding-block-end:20px;
 
     th, td {
-      width: 180px;
-      max-width: 360px;
+      inline-size: 180px;
+      max-inline-size: 360px;
       overflow:  hidden;
-      vertical-align: text-top;
+      vertical-align: text-block-start;
     }
 
     th+th, td+td {
-      width: auto;
+      inline-size: auto;
     }
   }
 }
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 21482977..83deb5a3 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -101,8 +101,8 @@
   padding: 0.6em;
 
   .btn {
-    min-height: 2em;
-    width: 10em;
+    min-block-size: 2em;
+    inline-size: 10em;
   }
 
   .register {
@@ -110,7 +110,7 @@
   }
 
   .login-bottom {
-    margin-top: 1.0em;
+    margin-block-start: 1.0em;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -120,17 +120,18 @@
   .form-group {
     display: flex;
     flex-direction: column;
-    padding: 0.3em 0.5em 0.6em;
+    padding-block: 0.3em 0.6em;
+    padding-inline: 0.5em;
     line-height:24px;
   }
 
   .form-bottom {
     display: flex;
     padding: 0.5em;
-    height: 32px;
+    block-size: 32px;
 
     button {
-      width: 10em;
+      inline-size: 10em;
     }
 
     p {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 802a60b3..ed0b1b54 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -74,7 +74,7 @@
     >
       <FAIcon
         class="button-icon arrow-icon"
-        icon="chevron-right"
+        icon="chevron-inline-end"
       />
     </button>
     <button
@@ -115,9 +115,9 @@
 <script src="./media_modal.js"></script>
 
 <style lang="scss">
-$modal-view-button-icon-height: 3em;
-$modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2);
-$modal-view-button-icon-width: 3em;
+$modal-view-button-icon-block-size: 3em;
+$modal-view-button-icon-half-block-size: calc(#{$modal-view-button-icon-block-size} / 2);
+$modal-view-button-icon-block-size: 3em;
 $modal-view-button-icon-margin: 0.5em;
 
 .modal-view.media-modal-view {
@@ -156,16 +156,16 @@ $modal-view-button-icon-margin: 0.5em;
     overflow: hidden;
     align-items: center;
     flex-direction: column;
-    max-width: 100%;
-    max-height: 100%;
-    width: 100%;
-    height: 100%;
+    max-inline-size: 100%;
+    max-block-size: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     flex-grow: 1;
     justify-content: center;
 
     &-inner {
-      width: 100%;
-      height: 100%;
+      inline-size: 100%;
+      block-size: 100%;
       flex-grow: 1;
       display: flex;
       flex-direction: column;
@@ -178,24 +178,25 @@ $modal-view-button-icon-margin: 0.5em;
   .counter {
     /* Hardcoded since background is also hardcoded */
     color: white;
-    margin-top: 1em;
+    margin-block-start: 1em;
     text-shadow: 0 0 10px black, 0 0 10px black;
-    padding: 0.2em 2em;
+    padding-block: 0.2em;
+    padding-inline: 2em;
   }
 
   .description {
     flex: 0 0 auto;
     overflow-y: auto;
-    min-height: 1em;
-    max-width: 500px;
-    max-height: 9.5em;
+    min-block-size: 1em;
+    max-inline-size: 500px;
+    max-block-size: 9.5em;
     word-break: break-word;
     white-space: pre-line;
   }
 
   .modal-image {
-    max-width: 100%;
-    max-height: 100%;
+    max-inline-size: 100%;
+    max-block-size: 100%;
     image-orientation: from-image; // NOTE: only FF supports this
     animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
 
@@ -205,8 +206,8 @@ $modal-view-button-icon-margin: 0.5em;
   }
 
   .loading-spinner {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     position: absolute;
     pointer-events: none;
     display: flex;
@@ -228,15 +229,15 @@ $modal-view-button-icon-margin: 0.5em;
     overflow: visible;
     cursor: pointer;
     transition: opacity 333ms cubic-bezier(.4,0,.22,1);
-    height: $modal-view-button-icon-height;
-    width: $modal-view-button-icon-width;
+    block-size: $modal-view-button-icon-block-size;
+    inline-size: $modal-view-button-icon-block-size;
 
     .button-icon {
       position: absolute;
-      height: $modal-view-button-icon-height;
-      width: $modal-view-button-icon-width;
+      block-size: $modal-view-button-icon-block-size;
+      inline-size: $modal-view-button-icon-block-size;
       font-size: 1rem;
-      line-height: $modal-view-button-icon-height;
+      line-height: $modal-view-button-icon-block-size;
       color: #FFF;
       text-align: center;
       background-color: rgba(0,0,0,.3);
@@ -246,42 +247,42 @@ $modal-view-button-icon-margin: 0.5em;
   .modal-view-button-arrow {
     position: absolute;
     display: block;
-    top: 50%;
-    margin-top: $modal-view-button-icon-half-height;
-    width: $modal-view-button-icon-width;
-    height: $modal-view-button-icon-height;
+    inset-block-start: 50%;
+    margin-block-start: $modal-view-button-icon-half-block-size;
+    inline-size: $modal-view-button-icon-block-size;
+    block-size: $modal-view-button-icon-block-size;
 
     .arrow-icon {
       position: absolute;
-      top: 0;
-      line-height: $modal-view-button-icon-height;
+      inset-block-start: 0;
+      line-height: $modal-view-button-icon-block-size;
       color: #FFF;
       text-align: center;
       background-color: rgba(0,0,0,.3);
     }
 
     &--prev {
-      left: 0;
+      inset-inline-start: 0;
       .arrow-icon {
-        left: $modal-view-button-icon-margin;
+        inset-inline-start: $modal-view-button-icon-margin;
       }
     }
 
     &--next {
-      right: 0;
+      inset-inline-end: 0;
       .arrow-icon {
-        right: $modal-view-button-icon-margin;
+        inset-inline-end: $modal-view-button-icon-margin;
       }
     }
   }
 
   .modal-view-button-hide {
     position: absolute;
-    top: 0;
-    right: 0;
+    inset-block-start: 0;
+    inset-inline-end: 0;
     .button-icon {
-      top: $modal-view-button-icon-margin;
-      right: $modal-view-button-icon-margin;
+      inset-block-start: $modal-view-button-icon-margin;
+      inset-inline-end: $modal-view-button-icon-margin;
     }
   }
 }
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index cbc68d17..37e150e4 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -15,11 +15,11 @@
 
   .mention-avatar {
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-    width: 1.5em;
-    height: 1.5em;
+    inline-size: 1.5em;
+    block-size: 1.5em;
     vertical-align: middle;
     user-select: none;
-    margin-right: 0.2em;
+    margin-inline-end: 0.2em;
   }
 
   .full {
@@ -27,14 +27,14 @@
     display: inline-block;
     pointer-events: none;
     opacity: 0;
-    top: 100%;
-    left: 0;
-    height: 100%;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
+    block-size: 100%;
     word-wrap: normal;
     white-space: nowrap;
     transition: opacity 0.2s ease;
     z-index: 1;
-    margin-top: 0.25em;
+    margin-block-start: 0.25em;
     padding: 0.5em;
     user-select: all;
   }
@@ -66,7 +66,8 @@
       opacity: 0.8;
       display: inline-block;
       line-height: 1;
-      padding: 0 0.1em;
+      padding-block: 0;
+      padding-inline: 0.1em;
       vertical-align: -25%;
       margin: 0;
     }
diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss
index 9a622e75..68925656 100644
--- a/src/components/mentions_line/mentions_line.scss
+++ b/src/components/mentions_line/mentions_line.scss
@@ -6,7 +6,7 @@
   }
 
   .showMoreLess {
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
     white-space: normal;
     color: var(--link);
   }
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index e6a8e694..ca437cc6 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -99,10 +99,10 @@
 .MobileNav {
   .mobile-nav {
     display: grid;
-    line-height: var(--navbar-height);
+    line-height: var(--navbar-block-size);
     grid-template-rows: 50px;
     grid-template-columns: 2fr auto;
-    width: 100%;
+    inline-size: 100%;
     box-sizing: border-box;
     a {
       color: var(--topBarLink, $fallback--link);
@@ -110,7 +110,7 @@
   }
 
   .mobile-inner-nav {
-    width: 100%;
+    inline-size: 100%;
     display: flex;
     align-items: center;
   }
@@ -118,13 +118,15 @@
   .mobile-nav-button {
     display: inline-block;
     text-align: center;
-    padding: 0 1em;
+    padding-block: 0;
+    padding-inline: 1em;
     position: relative;
     cursor: pointer;
   }
 
   .site-name {
-    padding: 0 .3em;
+    padding-block: 0;
+    padding-inline: .3em;
     display: inline-block;
   }
 
@@ -135,24 +137,24 @@
 
   .alert-dot {
     border-radius: 100%;
-    height: 8px;
-    width: 8px;
+    block-size: 8px;
+    inline-size: 8px;
     position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
+    inset-inline-start: calc(50% - 4px);
+    inset-block-start: calc(50% - 4px);
+    margin-inline-start: 6px;
+    margin-block-start: -6px;
     background-color: $fallback--cRed;
     background-color: var(--badgeNotification, $fallback--cRed);
   }
 
   .mobile-notifications-drawer {
-    width: 100%;
-    height: 100vh;
+    inline-size: 100%;
+    block-size: 100vb;
     overflow-x: hidden;
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     box-shadow: 1px 1px 4px rgba(0,0,0,.6);
     box-shadow: var(--panelShadow);
     transition-property: transform;
@@ -172,8 +174,8 @@
     align-items: center;
     justify-content: space-between;
     z-index: 1;
-    width: 100%;
-    height: 50px;
+    inline-size: 100%;
+    block-size: 50px;
     line-height: 50px;
     position: absolute;
     color: var(--topBarText);
@@ -184,14 +186,14 @@
 
     .title {
       font-size: 1.3em;
-      margin-left: 0.6em;
+      margin-inline-start: 0.6em;
     }
   }
 
   .mobile-notifications {
-    margin-top: 50px;
-    width: 100vw;
-    height: calc(100vh - var(--navbar-height));
+    margin-block-start: 50px;
+    inline-size: 100vi;
+    block-size: calc(100vb - var(--navbar-block-size));
     overflow-x: hidden;
     overflow-y: scroll;
 
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index 9fcdf6f8..5438e5e1 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -16,12 +16,12 @@
 
 .MobilePostButton {
   &.button-default {
-    width: 5em;
-    height: 5em;
+    inline-size: 5em;
+    block-size: 5em;
     border-radius: 100%;
     position: fixed;
-    bottom: 1.5em;
-    right: 1.5em;
+    inset-block-end: 1.5em;
+    inset-inline-end: 1.5em;
     // TODO: this needs its own color, it has to stand out enough and link color
     // is not very optimal for this particular use.
     background-color: $fallback--fg;
diff --git a/src/components/mod_modal/mod_modal.scss b/src/components/mod_modal/mod_modal.scss
index 4821df74..dd908216 100644
--- a/src/components/mod_modal/mod_modal.scss
+++ b/src/components/mod_modal/mod_modal.scss
@@ -6,13 +6,13 @@
     .mod-modal-panel {
       /* Explanation:
        * Modal is positioned vertically centered.
-       * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
-       * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
+       * 100vb - 100% = Distance between modal's top+bottom boundaries and screen
+       * (100vb - 100%) / 2 = Distance between bottom (or top) boundary and screen
        * + 100% - we move modal completely off-screen, it's top boundary touches
        *   bottom of the screen
        * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
        */
-      transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
+      transform: translateY(calc(((100vb - 100%) / 2 + 100%) - 50px));
 
       @media all and (max-width: 800px) {
         /* For mobile, the modal takes 100% of the available screen.
@@ -28,17 +28,17 @@
     transition: transform;
     transition-timing-function: ease-in-out;
     transition-duration: 300ms;
-    width: 1000px;
-    max-width: 90vw;
-    height: 90vh;
+    inline-size: 1000px;
+    max-inline-size: 90vi;
+    block-size: 90vb;
 
     @media all and (max-width: 800px) {
-      max-width: 100vw;
-      height: 100%;
+      max-inline-size: 100vi;
+      block-size: 100%;
     }
 
     .panel-body {
-      height: inherit;
+      block-size: inherit;
     }
   }
 }
diff --git a/src/components/mod_modal/mod_modal_content.scss b/src/components/mod_modal/mod_modal_content.scss
index b1aeba38..329d70e3 100644
--- a/src/components/mod_modal/mod_modal_content.scss
+++ b/src/components/mod_modal/mod_modal_content.scss
@@ -1,21 +1,22 @@
 @import 'src/_variables.scss';
 .mod_tab-switcher {
-  height: 100%;
+  block-size: 100%;
 
   .content {
-    margin: 1em 1em 1.4em;
+    margin-block: 1em 1.4em;
+    margin-inline: 1em;
 
     > div {
-      margin-bottom: .5em;
+      margin-block-end: .5em;
       &:last-child {
-        margin-bottom: 0;
+        margin-block-end: 0;
       }
     }
 
     textarea {
-      width: 100%;
-      max-width: 100%;
-      height: 100px;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      block-size: 100px;
     }
   }
 }
diff --git a/src/components/mod_modal/tabs/reports_tab/reports_tab.scss b/src/components/mod_modal/tabs/reports_tab/reports_tab.scss
index 607f6726..eea4287f 100644
--- a/src/components/mod_modal/tabs/reports_tab/reports_tab.scss
+++ b/src/components/mod_modal/tabs/reports_tab/reports_tab.scss
@@ -6,8 +6,8 @@
     }
 
     & > :not(:last-child) {
-      border-bottom: 1px solid;
-      border-bottom-color: var(--border, #222);
+      border-block-end: 1px solid;
+      border-block-end-color: var(--border, #222);
     }
 
     .report-content {
@@ -15,12 +15,12 @@
     }
 
     .report-author {
-      padding-top: 0.5em;
+      padding-block-start: 0.5em;
     }
     .small-avatar {
-      height: 25px;
-      width: 25px;
-      padding-right: 0.4em;
+      block-size: 25px;
+      inline-size: 25px;
+      padding-inline-end: 0.4em;
       vertical-align: middle;
     }
 
@@ -46,11 +46,11 @@
       .note-header {
         display: flex;
         justify-content: space-between;
-        padding-bottom: 0.5em;
+        padding-block-end: 0.5em;
       }
 
       button {
-        margin-left: 0.5em;
+        margin-inline-start: 0.5em;
       }
     }
 
@@ -60,10 +60,11 @@
       }
 
       button {
-        min-height: 2em;
-        min-width: 10em;
-        padding: 0 2em;
-        margin-top: 0.5em;
+        min-block-size: 2em;
+        min-inline-size: 10em;
+        padding-block: 0;
+        padding-inline: 2em;
+        margin-block-start: 0.5em;
       }
     }
   }
@@ -71,7 +72,7 @@
   .panel-footer {
     display: flex;
     & > * {
-      margin-right: 0.5em;
+      margin-inline-end: 0.5em;
     }
   }
 }
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 9394efff..68e128de 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -37,10 +37,10 @@ export default {
 .modal-view {
   z-index: 2000;
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 75ea08cc..002bcf2f 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -166,11 +166,11 @@
 @import '../../_variables.scss';
 
 .moderation-tools-popover {
-  height: 100%;
+  block-size: 100%;
   z-index: 999;
   .trigger {
     display: flex !important;
-    height: 100%;
+    block-size: 100%;
   }
 }
 
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.scss b/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
index 80ea01d4..421be4da 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
@@ -2,20 +2,20 @@
   margin: 1em;
 
   table {
-    width:100%;
-    text-align: left;
-    padding-left:10px;
-    padding-bottom:20px;
+    inline-size:100%;
+    text-align: start;
+    padding-inline-start:10px;
+    padding-block-end:20px;
 
     th, td {
-      width: 180px;
-      max-width: 360px;
+      inline-size: 180px;
+      max-inline-size: 360px;
       overflow:  hidden;
-      vertical-align: text-top;
+      vertical-align: text-block-start;
     }
 
     th+th, td+td {
-      width: auto;
+      inline-size: auto;
     }
   }
 }
diff --git a/src/components/mute_card/mute_card.vue b/src/components/mute_card/mute_card.vue
index ca33c6c5..cbb64501 100644
--- a/src/components/mute_card/mute_card.vue
+++ b/src/components/mute_card/mute_card.vue
@@ -35,10 +35,10 @@
 
 <style lang="scss">
 .mute-card-content-container {
-  margin-top: 0.5em;
-  text-align: right;
+  margin-block-start: 0.5em;
+  text-align: end;
   button {
-    width: 10em;
+    inline-size: 10em;
   }
 }
 </style>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 66dae37a..fef29e7f 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -121,23 +121,23 @@
 
   li {
     position: relative;
-    border-bottom: 1px solid;
+    border-block-end: 1px solid;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
     padding: 0;
 
     &:first-child .menu-item {
-      border-top-right-radius: $fallback--panelRadius;
-      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-top-left-radius: $fallback--panelRadius;
-      border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+      border-start-end-radius: $fallback--panelRadius;
+      border-start-end-radius: var(--panelRadius, $fallback--panelRadius);
+      border-start-start-radius: $fallback--panelRadius;
+      border-start-start-radius: var(--panelRadius, $fallback--panelRadius);
     }
 
     &:last-child .menu-item {
-      border-bottom-right-radius: $fallback--panelRadius;
-      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-bottom-left-radius: $fallback--panelRadius;
-      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
+      border-end-end-radius: $fallback--panelRadius;
+      border-end-end-radius: var(--panelRadius, $fallback--panelRadius);
+      border-end-start-radius: $fallback--panelRadius;
+      border-end-start-radius: var(--panelRadius, $fallback--panelRadius);
     }
   }
 
@@ -148,10 +148,11 @@
   .menu-item {
     display: block;
     box-sizing: border-box;
-    height: 3.5em;
+    block-size: 3.5em;
     line-height: 3.5em;
-    padding: 0 1em;
-    width: 100%;
+    padding-block: 0;
+    padding-inline: 1em;
+    inline-size: 100%;
     color: $fallback--link;
     color: var(--link, $fallback--link);
 
@@ -184,15 +185,16 @@
   }
 
   .timelines-chevron {
-    margin-left: 0.8em;
+    margin-inline-start: 0.8em;
     font-size: 1.1em;
   }
 
   .timelines-background {
-    padding: 0 0 0 0.6em;
+    padding-block: 0 0;
+    padding-inline: 0.6em 0;
     background-color: $fallback--lightBg;
     background-color: var(--selectedMenu, $fallback--lightBg);
-    border-top: 1px solid;
+    border-block-start: 1px solid;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
   }
@@ -203,13 +205,13 @@
   }
 
   .fa-scale-110 {
-    margin-right: 0.8em;
+    margin-inline-end: 0.8em;
   }
 
   .badge {
     position: absolute;
-    right: 0.6rem;
-    top: 1.25em;
+    inset-inline-end: 0.6rem;
+    inset-block-start: 1.25em;
   }
 }
 </style>
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index b0da18f9..9a560b24 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -1,7 +1,7 @@
 @import '../../_variables.scss';
 
 .notification-reaction-emoji {
-  width: 40px;
+  inline-size: 40px;
   display: inline-flex;
   vertical-align: middle;
   flex-direction: column;
@@ -9,7 +9,7 @@
 
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
-   border-bottom: 1px solid;
+   border-block-end: 1px solid;
    border-color: $fallback--border;
    border-color: var(--border, $fallback--border);
    word-wrap: break-word;
@@ -23,8 +23,9 @@
   }
 
   &.-muted {
-    padding: 0.25em 0.6em;
-    height: 1.2em;
+    padding-block: 0.25em;
+    padding-inline: 0.6em;
+    block-size: 1.2em;
     line-height: 1.2em;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -48,7 +49,7 @@
     .status-username {
       font-weight: normal;
       flex: 0 1 auto;
-      margin-right: 0.2em;
+      margin-inline-end: 0.2em;
       font-size: smaller;
     }
 
@@ -58,7 +59,7 @@
 
     .mute-words {
       flex: 1 0 5em;
-      margin-left: 0.2em;
+      margin-inline-start: 0.2em;
 
       &::before {
         content: ' ';
@@ -67,13 +68,14 @@
 
     .unmute {
       flex: 0 0 auto;
-      margin-left: auto;
+      margin-inline-start: auto;
       display: block;
     }
   }
 
   .type-icon {
-    margin: 0 0.1em;
+    margin-block: 0;
+    margin-inline: 0.1em;
   }
 
   &.-type--repeat .type-icon {
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index 00a531b3..62b2945f 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -117,8 +117,8 @@ export default {
 
   > button {
     line-height: 100%;
-    height: 100%;
-    width: var(--__panel-heading-height-inner);
+    block-size: 100%;
+    inline-size: var(--__panel-heading-block-size-inner);
     text-align: center;
 
     svg {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 3d3408f7..09e277f6 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -3,7 +3,7 @@
 .Notifications {
   &:not(.minimal) {
     // a bit of a hack to allow scrolling below notifications
-    padding-bottom: 15em;
+    padding-block-end: 15em;
   }
 
   .loadmore-error {
@@ -16,10 +16,10 @@
 
     .notification-overlay {
       position: absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-      bottom: 0;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      inset-inline-start: 0;
+      inset-block-end: 0;
       pointer-events: none;
     }
 
@@ -44,7 +44,7 @@
   }
 
   &:last-child .Notification {
-    border-bottom: none;
+    border-block-end: none;
   }
 
   .non-mention {
@@ -52,11 +52,11 @@
     flex: 1;
     flex-wrap: nowrap;
     padding: 0.6em;
-    min-width: 0;
+    min-inline-size: 0;
 
     .avatar-container {
-      width: 32px;
-      height: 32px;
+      inline-size: 32px;
+      block-size: 32px;
     }
 
     --link: var(--faintLink);
@@ -78,14 +78,15 @@
   }
 
   .follow-text, .move-text {
-    padding: 0.5em 0;
+    padding-block: 0.5em;
+    padding-inline: 0;
     overflow-wrap: break-word;
     display: flex;
     justify-content: space-between;
 
     .follow-name {
       display: block;
-      max-width: 100%;
+      max-inline-size: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -101,14 +102,14 @@
     white-space: nowrap;
   }
 
-  .notification-right {
+  .notification-inline-end {
     flex: 1;
-    padding-left: 0.8em;
-    min-width: 0;
+    padding-inline-start: 0.8em;
+    min-inline-size: 0;
 
     .timeago {
-      min-width: 3em;
-      text-align: right;
+      min-inline-size: 3em;
+      text-align: end;
     }
   }
 
@@ -117,12 +118,12 @@
   }
 
   .notification-details {
-    min-width: 0;
+    min-inline-size: 0;
     word-wrap: break-word;
     line-height: var(--post-line-height);
     position: relative;
     overflow: hidden;
-    width: 100%;
+    inline-size: 100%;
     flex: 1 1 0;
     display: flex;
     flex-wrap: nowrap;
@@ -136,23 +137,24 @@
 
     .username {
       font-weight: bolder;
-      max-width: 100%;
+      max-inline-size: 100%;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     .timeago {
-      margin-right: 0.2em;
+      margin-inline-end: 0.2em;
     }
 
     .status-content {
       margin: 0;
-      max-height: 300px;
+      max-block-size: 300px;
     }
 
     h1 {
       word-break: break-all;
-      margin: 0 0 0.3em;
+      margin-block: 0 0.3em;
+      margin-inline: 0;
       padding: 0;
       font-size: 1em;
       line-height: 1.5;
@@ -164,8 +166,8 @@
 
     p {
       margin: 0;
-      margin-top: 0;
-      margin-bottom: 0.3em;
+      margin-block-start: 0;
+      margin-block-end: 0.3em;
     }
   }
 }
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index d916d8a6..570c6527 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -27,7 +27,7 @@ export default {}
 
 .panel-loading {
   display: flex;
-  height: 100%;
+  block-size: 100%;
   align-items: center;
   justify-content: center;
   font-size: 2em;
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 90673f44..c7375839 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -89,19 +89,20 @@
     display: flex;
     flex: 1 0;
     flex-direction: column;
-    margin-top: 0.6em;
-    max-width: 18rem;
+    margin-block-start: 0.6em;
+    max-inline-size: 18rem;
 
     > * {
-      min-width: 0;
+      min-inline-size: 0;
     }
   }
 
   .form-group {
     display: flex;
     flex-direction: column;
-    margin-bottom: 1em;
-    padding: 0.3em 0;
+    margin-block-end: 1em;
+    padding-block: 0.3em;
+    padding-inline: 0;
     line-height: 1.85em;
   }
 
@@ -114,16 +115,18 @@
 
   .alert {
     padding: 0.5em;
-    margin: 0.3em 0 1em;
+    margin-block: 0.3em 1em;
+    margin-inline: 0;
   }
 
   .password-reset-required {
     background-color: var(--alertError, $fallback--alertError);
-    padding: 10px 0;
+    padding-block: 10px;
+    padding-inline: 0;
   }
 
   .notice-dismissible {
-    padding-right: 2rem;
+    padding-inline-end: 2rem;
   }
 
   .dismiss {
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index f6b12a54..c9e8bad5 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -25,7 +25,7 @@
         </div>
         <div
           class="result-fill"
-          :style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
+          :style="{ 'block-size': `${percentageForOption(option.votes_count)}%` }"
         />
       </div>
       <div
@@ -96,13 +96,15 @@
   .votes {
     display: flex;
     flex-direction: column;
-    margin: 0 0 0.5em;
+    margin-block: 0 0.5em;
+    margin-inline: 0;
   }
   .poll-option {
-    margin: 0.75em 0.5em;
+    margin-block: 0.75em;
+    margin-inline: 0.5em;
   }
   .option-result {
-    height: 100%;
+    block-size: 100%;
     display: flex;
     flex-direction: row;
     position: relative;
@@ -112,16 +114,17 @@
   .option-result-label {
     display: flex;
     align-items: center;
-    padding: 0.1em 0.25em;
+    padding-block: 0.1em;
+    padding-inline: 0.25em;
     z-index: 1;
     word-break: break-word;
   }
   .result-percentage {
-    width: 3.5em;
+    inline-size: 3.5em;
     flex-shrink: 0;
   }
   .result-fill {
-    height: 100%;
+    block-size: 100%;
     position: absolute;
     color: $fallback--text;
     color: var(--pollText, $fallback--text);
@@ -129,16 +132,16 @@
     background-color: var(--poll, $fallback--lightBg);
     border-radius: $fallback--panelRadius;
     border-radius: var(--panelRadius, $fallback--panelRadius);
-    top: 0;
-    left: 0;
-    transition: width 0.5s;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    transition: block-size 0.5s;
   }
   .option-vote {
     display: flex;
     align-items: center;
   }
   input {
-    width: 3.5em;
+    inline-size: 3.5em;
   }
   .footer {
     display: flex;
@@ -148,8 +151,9 @@
     cursor: progress;
   }
   .poll-vote-button {
-    padding: 0 0.5em;
-    margin-right: 0.5em;
+    padding-block: 0;
+    padding-inline: 0.5em;
+    margin-inline-end: 0.5em;
   }
 }
 </style>
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 146754db..20e88999 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -100,49 +100,50 @@
 .poll-form {
   display: flex;
   flex-direction: column;
-  padding: 0 0.5em 0.5em;
+  padding-block: 0 0.5em;
+  padding-inline: 0.5em;
 
   .add-option {
     align-self: flex-start;
-    padding-top: 0.25em;
-    padding-left: 0.1em;
+    padding-block-start: 0.25em;
+    padding-inline-start: 0.1em;
   }
 
   .poll-option {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
-    margin-bottom: 0.25em;
+    margin-block-end: 0.25em;
   }
 
   .input-container {
-    width: 100%;
+    inline-size: 100%;
     input {
       // Hack: dodge the floating X icon
-      padding-right: 2.5em;
-      width: 100%;
+      padding-inline-end: 2.5em;
+      inline-size: 100%;
     }
   }
 
   .delete-option {
     // Hack: Move the icon over the input box
-    width: 1.5em;
-    margin-left: -1.5em;
+    inline-size: 1.5em;
+    margin-inline-start: -1.5em;
     z-index: 1;
   }
 
   .poll-type-expiry {
-    margin-top: 0.5em;
+    margin-block-start: 0.5em;
     display: flex;
-    width: 100%;
+    inline-size: 100%;
   }
 
   .poll-type {
-    margin-right: 0.75em;
+    margin-inline-end: 0.75em;
     flex: 1 1 60%;
 
     .poll-type-select {
-      padding-right: 0.75em;
+      padding-inline-end: 0.75em;
     }
   }
 
@@ -150,8 +151,8 @@
     display: flex;
 
     .expiry-amount {
-      width: 3em;
-      text-align: right;
+      inline-size: 3em;
+      text-align: end;
     }
   }
 }
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index c2a3e801..af7be82c 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -39,7 +39,7 @@
 .popover {
   z-index: 500;
   position: absolute;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .popover-default {
@@ -48,10 +48,10 @@
   &:after {
     content: '';
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     z-index: 3;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
@@ -75,27 +75,30 @@
 
 .dropdown-menu {
   display: block;
-  padding: .5rem 0;
+  padding-block: .5rem;
+  padding-inline: 0;
   font-size: 1em;
-  text-align: left;
+  text-align: start;
   list-style: none;
-  max-width: 100vw;
+  max-inline-size: 100vi;
   z-index: 200;
   white-space: nowrap;
 
   .dropdown-divider {
-    height: 0;
-    margin: .5rem 0;
+    block-size: 0;
+    margin-block: .5rem;
+    margin-inline: 0;
     overflow: hidden;
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
+    border-block-start: 1px solid $fallback--border;
+    border-block-start: 1px solid var(--border, $fallback--border);
   }
 
   .dropdown-item {
     line-height: 21px;
     overflow: hidden;
     display: block;
-    padding: 0.5em 0.75em;
+    padding-block: 0.5em;
+    padding-inline: 0.75em;
     clear: both;
     font-weight: 400;
     text-align: inherit;
@@ -104,16 +107,16 @@
     border-radius: 0px;
     background-color: transparent;
     box-shadow: none;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     box-sizing: border-box;
 
     --btnText: var(--popoverText, $fallback--text);
 
     &-icon {
       svg {
-        width: 22px;
-        margin-right: 0.75rem;
+        inline-size: 22px;
+        margin-inline-end: 0.75rem;
         color: var(--menuPopoverIcon, $fallback--icon)
       }
     }
@@ -136,10 +139,10 @@
     .menu-checkbox {
       display: inline-block;
       vertical-align: middle;
-      min-width: 22px;
-      max-width: 22px;
-      min-height: 22px;
-      max-height: 22px;
+      min-inline-size: 22px;
+      max-inline-size: 22px;
+      min-block-size: 22px;
+      max-block-size: 22px;
       line-height: 22px;
       text-align: center;
       border-radius: 0px;
@@ -147,7 +150,7 @@
       background-color: var(--input, $fallback--fg);
       box-shadow: 0px 0px 2px black inset;
       box-shadow: var(--inputShadow);
-      margin-right: 0.75em;
+      margin-inline-end: 0.75em;
 
       &.menu-checkbox-checked::after {
         font-size: 1.25em;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index b6516585..30004483 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -230,7 +230,7 @@
       />
       <div
         ref="bottom"
-        class="form-bottom"
+        class="form-block-end"
       >
         <div class="form-bottom-left">
           <media-upload
@@ -346,17 +346,17 @@
   position: relative;
 
   .attachments {
-    margin-bottom: 0.5em;
+    margin-block-end: 0.5em;
   }
 
-  .form-bottom {
+  .form-block-end {
     display: flex;
     justify-content: space-between;
     padding: 0.5em;
-    height: 2.5em;
+    block-size: 2.5em;
 
     button {
-      width: 10em;
+      inline-size: 10em;
     }
 
     p {
@@ -366,17 +366,17 @@
     }
   }
 
-  .form-bottom-left {
+  .form-block-end-left {
     display: flex;
     flex: 1;
-    padding-right: 7px;
-    margin-right: 7px;
-    max-width: 10em;
+    padding-inline-end: 7px;
+    margin-inline-end: 7px;
+    max-inline-size: 10em;
   }
 
   .preview-heading {
     display: flex;
-    padding-left: 0.5em;
+    padding-inline-start: 0.5em;
   }
 
   .preview-toggle {
@@ -388,14 +388,14 @@
       text-decoration: underline;
     }
     svg, i {
-      margin-left: 0.2em;
+      margin-inline-start: 0.2em;
       font-size: 0.8em;
       transform: rotate(90deg);
     }
   }
 
   .preview-container {
-    margin-bottom: 1em;
+    margin-block-end: 1em;
   }
 
   .preview-error {
@@ -423,17 +423,17 @@
   .visibility-tray {
     display: flex;
     justify-content: space-between;
-    padding-top: 5px;
+    padding-block-start: 5px;
     align-items: baseline;
   }
 
   .visibility-notice.edit-warning {
     > :first-child {
-      margin-top: 0;
+      margin-block-start: 0;
     }
 
     > :last-child {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
   }
 
@@ -441,7 +441,8 @@
     font-size: 1.85em;
     line-height: 1.1;
     flex: 1;
-    padding: 0 0.1em;
+    padding-block: 0;
+    padding-inline: 0.1em;
     display: flex;
     align-items: center;
 
@@ -488,29 +489,29 @@
   }
 
   .media-upload-wrapper {
-    margin-right: .2em;
-    margin-bottom: .5em;
-    width: 18em;
+    margin-inline-end: .2em;
+    margin-block-end: .5em;
+    inline-size: 18em;
 
     img, video {
       object-fit: contain;
-      max-height: 10em;
+      max-block-size: 10em;
     }
 
     .video {
-      max-height: 10em;
+      max-block-size: 10em;
     }
 
     input {
       flex: 1;
-      width: 100%;
+      inline-size: 100%;
     }
   }
 
   .status-input-wrapper {
     display: flex;
     position: relative;
-    width: 100%;
+    inline-size: 100%;
     flex-direction: column;
   }
 
@@ -528,7 +529,8 @@
   .form-group {
     display: flex;
     flex-direction: column;
-    padding: 0.25em 0.5em 0.5em;
+    padding-block: 0.25em 0.5em;
+    padding-inline: 0.5em;
     line-height: 1.85;
   }
 
@@ -536,12 +538,12 @@
     // TODO: make a resizable textarea component?
     box-sizing: content-box; // needed for easier computation of dynamic size
     overflow: hidden;
-    transition: min-height 200ms 100ms;
+    transition: min-block-size 200ms 100ms;
     // stock padding + 1 line of text (for counter)
-    padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
+    padding-block-end: calc(var(--_padding) + var(--post-line-height) * 1em);
     // two lines of text
-    height: calc(var(--post-line-height) * 1em);
-    min-height: calc(var(--post-line-height) * 1em);
+    block-size: calc(var(--post-line-height) * 1em);
+    min-block-size: calc(var(--post-line-height) * 1em);
     resize: none;
 
     &.scrollable-form {
@@ -555,10 +557,11 @@
 
   .character-counter {
     position: absolute;
-    bottom: 0;
-    right: 0;
+    inset-block-end: 0;
+    inset-inline-end: 0;
     padding: 0;
-    margin: 0 0.5em;
+    margin-block: 0;
+    margin-inline: 0.5em;
 
     &.error {
       color: $fallback--cRed;
@@ -582,8 +585,8 @@
 
   .drop-indicator {
     position: absolute;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     font-size: 5em;
     display: flex;
     align-items: center;
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index dbcd321e..6196214b 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -27,13 +27,13 @@
 
 .post-form-modal-panel {
   flex-shrink: 0;
-  margin-top: 25%;
-  margin-bottom: 2em;
-  width: 100%;
-  max-width: 700px;
+  margin-block-start: 25%;
+  margin-block-end: 2em;
+  inline-size: 100%;
+  max-inline-size: 700px;
 
   @media (orientation: landscape) {
-    margin-top: 8%;
+    margin-block-start: 8%;
   }
 }
 </style>
diff --git a/src/components/quote_button/quote_button.vue b/src/components/quote_button/quote_button.vue
index 4367f495..c16e3b6d 100644
--- a/src/components/quote_button/quote_button.vue
+++ b/src/components/quote_button/quote_button.vue
@@ -27,7 +27,8 @@
 
   > :first-child {
     padding: 10px;
-    margin: -10px -8px -10px -10px;
+    margin-block: -10px -10px;
+    margin-inline: -10px -8px;
   }
 
   .action-counter {
diff --git a/src/components/quote_card/quote_card.vue b/src/components/quote_card/quote_card.vue
index 8cd7eb23..7f915480 100644
--- a/src/components/quote_card/quote_card.vue
+++ b/src/components/quote_card/quote_card.vue
@@ -21,15 +21,15 @@
   flex-direction: column;
   cursor: pointer;
   overflow: hidden;
-  margin-top: 0.5em;
+  margin-block-start: 0.5em;
 
   .card-image {
     flex-shrink: 0;
-    width: 120px;
-    max-width: 25%;
+    inline-size: 120px;
+    max-inline-size: 25%;
     img {
-      width: 100%;
-      height: 100%;
+      inline-size: 100%;
+      block-size: 100%;
       object-fit: cover;
       border-radius: $fallback--attachmentRadius;
       border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
@@ -37,7 +37,7 @@
   }
 
   .card-content {
-    max-height: 100%;
+    max-block-size: 100%;
     margin: 0.5em;
     display: flex;
     flex-direction: column;
@@ -48,18 +48,20 @@
   }
 
   .card-description {
-    margin: 0.5em 0 0 0;
+    margin-block: 0.5em 0;
+    margin-inline: 0 0;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-word;
     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?
-    max-height: calc(1.2em * 3 - 1px);
+    max-block-size: calc(1.2em * 3 - 1px);
   }
 
   .nsfw-alert {
-    margin: 2em 0;
+    margin-block: 2em;
+    margin-inline: 0;
   }
 
   color: $fallback--text;
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index c196417c..b5fc89d3 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -34,7 +34,7 @@
 @import '../../_variables.scss';
 
 .custom-reaction {
-  width: 30px !important;
+  inline-size: 30px !important;
 }
 
 .ReactButton {
@@ -48,15 +48,15 @@
   }
 
   .reaction-picker-divider {
-    height: 1px;
-    width: 100%;
+    block-size: 1px;
+    inline-size: 100%;
     margin: 0.5em;
     background-color: var(--border, $fallback--border);
   }
 
   .reaction-picker {
-    width: 10em;
-    height: 9em;
+    inline-size: 10em;
+    block-size: 9em;
     font-size: 1.5em;
     overflow-y: scroll;
     display: flex;
@@ -91,7 +91,7 @@
 
   /* override of popover internal stuff */
   .popover-trigger-button {
-    width: auto;
+    inline-size: auto;
   }
 
   .popover-trigger {
@@ -106,7 +106,7 @@
 
   .popover {
     transform: translateX(-64px) translateY(5px);
-    min-width: 70%;
+    min-inline-size: 70%;
   }
 }
 
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 9a88d68d..e9083fe0 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -286,7 +286,7 @@ $validations-cRed: #f04124;
     flex-direction: row;
 
     > * {
-      min-width: 0;
+      min-inline-size: 0;
     }
   }
 
@@ -296,23 +296,24 @@ $validations-cRed: #f04124;
   }
 
   .text-fields {
-    margin-top: 0.6em;
+    margin-block-start: 0.6em;
     flex: 1 0;
     display: flex;
     flex-direction: column;
   }
 
   textarea {
-    min-height: 100px;
+    min-block-size: 100px;
     resize: vertical;
   }
 
   .form-group {
     display: flex;
     flex-direction: column;
-    padding: 0.3em 0;
+    padding-block: 0.3em;
+    padding-inline: 0;
     line-height: 2;
-    margin-bottom: 1em;
+    margin-block-end: 1em;
   }
 
   .form-group--error {
@@ -327,8 +328,8 @@ $validations-cRed: #f04124;
   }
 
   .form-error {
-    margin-top: -0.7em;
-    text-align: left;
+    margin-block-start: -0.7em;
+    text-align: start;
 
     span {
       font-size: 0.85em;
@@ -337,8 +338,9 @@ $validations-cRed: #f04124;
 
   .form-error ul {
     list-style: none;
-    padding: 0 0 0 5px;
-    margin-top: 0;
+    padding-block: 0 0;
+    padding-inline: 5px 0;
+    margin-block-start: 0;
 
     li::before {
       content: "• ";
@@ -351,13 +353,13 @@ $validations-cRed: #f04124;
   }
 
   .captcha {
-    max-width: 350px;
-    margin-bottom: 0.4em;
+    max-inline-size: 350px;
+    margin-block-end: 0.4em;
   }
 
   .btn {
-    margin-top: 0.6em;
-    height: 2em;
+    margin-block-start: 0.6em;
+    block-size: 2em;
   }
 
   .error {
diff --git a/src/components/remote_follow/remote_follow.vue b/src/components/remote_follow/remote_follow.vue
index e17aa2e9..6277ca69 100644
--- a/src/components/remote_follow/remote_follow.vue
+++ b/src/components/remote_follow/remote_follow.vue
@@ -28,11 +28,11 @@
 
 <style lang="scss">
 .remote-follow {
-  max-width: 220px;
+  max-inline-size: 220px;
 
   .remote-button {
-    width: 100%;
-    min-height: 2em;
+    inline-size: 100%;
+    min-block-size: 2em;
   }
 }
 </style>
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index ab493311..20d4ca26 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -44,7 +44,8 @@
 
   > :first-child {
     padding: 10px;
-    margin: -10px -8px -10px -10px;
+    margin-block: -10px -10px;
+    margin-inline: -10px -8px;
   }
 
   .action-counter {
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index c574f4cb..3f89b2a0 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -64,7 +64,8 @@
 
   > :first-child {
     padding: 10px;
-    margin: -10px -8px -10px -10px;
+    margin-block: -10px -10px;
+    margin-inline: -10px -8px;
   }
 
   .action-counter {
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index db08ef1e..185d09b0 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -1,6 +1,7 @@
 .RichContent {
   blockquote {
-    margin: 0.2em 0 0.2em 2em;
+    margin-block: 0.2em 0.2em;
+    margin-inline: 2em 0;
     font-style: italic;
   }
 
@@ -17,31 +18,37 @@
   }
 
   p {
-    margin: 0 0 1em 0;
+    margin-block: 0 1em;
+    margin-inline: 0 0;
   }
 
   p:last-child {
-    margin: 0 0 0 0;
+    margin-block: 0 0;
+    margin-inline: 0 0;
   }
 
   h1 {
     font-size: 1.1em;
     line-height: 1.2em;
-    margin: 1.4em 0;
+    margin-block: 1.4em;
+    margin-inline: 0;
   }
 
   h2 {
     font-size: 1.1em;
-    margin: 1em 0;
+    margin-block: 1em;
+    margin-inline: 0;
   }
 
   h3 {
     font-size: 1em;
-    margin: 1.2em 0;
+    margin-block: 1.2em;
+    margin-inline: 0;
   }
 
   h4 {
-    margin: 1.1em 0;
+    margin-block: 1.1em;
+    margin-inline: 0;
   }
 
   .img {
@@ -50,14 +57,14 @@
 
   .emoji {
     display: inline-block;
-    width: var(--emoji-size, 32px);
-    height: var(--emoji-size, 32px);
+    inline-size: var(--emoji-size, 32px);
+    block-size: var(--emoji-size, 32px);
   }
 
   .img,
   video {
-    max-width: 100%;
-    max-height: 400px;
+    max-inline-size: 100%;
+    max-block-size: 400px;
     vertical-align: middle;
     object-fit: contain;
   }
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 64c34fb1..d8154bcc 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -81,10 +81,10 @@
   .scope {
     display: inline-block;
     cursor: pointer;
-    min-width: 1.3em;
-    min-height: 1.3em;
+    min-inline-size: 1.3em;
+    min-block-size: 1.3em;
     text-align: center;
-    margin-right: 0.4em;
+    margin-inline-end: 0.4em;
 
     &.selected svg {
       color: $fallback--lightText;
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index b7bfc1f3..9f5833c8 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -149,7 +149,7 @@
 
 .search-result {
   box-sizing: border-box;
-  border-bottom: 1px solid;
+  border-block-end: 1px solid;
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
 }
@@ -169,7 +169,7 @@
   justify-content: center;
 
   .search-input {
-    width: 100%;
+    inline-size: 100%;
     line-height: 1.125rem;
     font-size: 1rem;
     padding: 0.5rem;
@@ -177,7 +177,7 @@
   }
 
   .search-button {
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
   }
 }
 
@@ -200,7 +200,7 @@
 
   .count {
     flex: 0 0 auto;
-    width: 2rem;
+    inline-size: 2rem;
     font-size: 1.5rem;
     line-height: 2.25rem;
     font-weight: 500;
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 831c47ae..b56a7951 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -63,21 +63,21 @@
   justify-content: flex-end;
 
   &.-expanded {
-    width: 100%;
+    inline-size: 100%;
   }
 
   .search-bar-input,
   .search-button {
-    height: 29px;
+    block-size: 29px;
   }
 
   .search-bar-input {
     flex: 1 0 auto;
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
   }
 
   .cancel-search {
-    height: 50px;
+    block-size: 50px;
   }
 
   .cancel-icon {
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 92493b0b..cf933fc4 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -36,23 +36,24 @@ label.Select {
     color: $fallback--text;
     color: var(--inputText, --text, $fallback--text);
     margin: 0;
-    padding: 0 2em 0 .2em;
+    padding-block: 0 0;
+    padding-inline: .2em 2em;
     font-family: sans-serif;
     font-family: var(--inputFont, sans-serif);
     font-size: 1em;
-    width: 100%;
+    inline-size: 100%;
     z-index: 1;
-    height: 2em;
+    block-size: 2em;
     line-height: 16px;
   }
 
   .select-down-icon {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 5px;
-    height: 100%;
-    width: 0.875em;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-end: 5px;
+    block-size: 100%;
+    inline-size: 0.875em;
     color: $fallback--text;
     color: var(--inputText, $fallback--text);
     line-height: 2;
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 3c80660e..28b0a126 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -59,7 +59,7 @@
     align-items: center;
 
     > * {
-      min-width: 0;
+      min-inline-size: 0;
     }
   }
 
@@ -76,10 +76,11 @@
   &-header {
     display: flex;
     align-items: center;
-    padding: 0.6em 0;
-    border-bottom: 2px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
+    padding-block: 0.6em;
+    padding-inline: 0;
+    border-block-end: 2px solid;
+    border-block-end-color: $fallback--border;
+    border-block-end-color: var(--border, $fallback--border);
 
     &-actions {
       flex: 1;
@@ -87,7 +88,8 @@
   }
 
   &-checkbox-wrapper {
-    padding: 0 10px;
+    padding-block: 0;
+    padding-inline: 10px;
     flex: none;
   }
 }
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index ad212db9..0e4cffc0 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -43,8 +43,9 @@ export default {
   position: relative;
 
   .modified-tooltip {
-    margin: 0.5em 1em;
-    min-width: 10em;
+    margin-block: 0.5em;
+    margin-inline: 1em;
+    min-inline-size: 10em;
     text-align: center;
   }
 }
diff --git a/src/components/settings_modal/helpers/server_side_indicator.vue b/src/components/settings_modal/helpers/server_side_indicator.vue
index 143a86a1..1adc6813 100644
--- a/src/components/settings_modal/helpers/server_side_indicator.vue
+++ b/src/components/settings_modal/helpers/server_side_indicator.vue
@@ -43,8 +43,9 @@ export default {
   position: relative;
 
   .serverside-tooltip {
-    margin: 0.5em 1em;
-    min-width: 10em;
+    margin-block: 0.5em;
+    margin-inline: 1em;
+    min-inline-size: 10em;
     text-align: center;
   }
 }
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 15dae7fd..993f30b3 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -5,12 +5,12 @@
   .setting-list,
   .option-list {
     list-style-type: none;
-    padding-left: 2em;
+    padding-inline-start: 2em;
     li {
-      margin-bottom: 0.5em;
+      margin-block-end: 0.5em;
     }
     .suboptions {
-      margin-top: 0.3em
+      margin-block-start: 0.3em
     }
   }
 
@@ -18,13 +18,13 @@
     .settings-modal-panel {
       /* Explanation:
        * Modal is positioned vertically centered.
-       * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
-       * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
+       * 100vb - 100% = Distance between modal's top+bottom boundaries and screen
+       * (100vb - 100%) / 2 = Distance between bottom (or top) boundary and screen
        * + 100% - we move modal completely off-screen, it's top boundary touches
        *   bottom of the screen
        * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
        */
-      transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
+      transform: translateY(calc(((100vb - 100%) / 2 + 100%) - 50px));
 
       @media all and (max-width: 800px) {
         /* For mobile, the modal takes 100% of the available screen.
@@ -40,23 +40,24 @@
     transition: transform;
     transition-timing-function: ease-in-out;
     transition-duration: 300ms;
-    width: 1000px;
-    max-width: 90vw;
-    height: 90vh;
+    inline-size: 1000px;
+    max-inline-size: 90vi;
+    block-size: 90vb;
 
     @media all and (max-width: 800px) {
-      max-width: 100vw;
-      height: 100%;
+      max-inline-size: 100vi;
+      block-size: 100%;
     }
 
     >.panel-body {
-      height: 100%;
+      block-size: 100%;
       overflow-y: hidden;
 
       .btn {
-        min-height: 2em;
-        min-width: 10em;
-        padding: 0 2em;
+        min-block-size: 2em;
+        min-inline-size: 10em;
+        padding-block: 0;
+        padding-inline: 2em;
       }
     }
   }
@@ -64,7 +65,7 @@
   .settings-footer {
     display: flex;
     >* {
-      margin-right: 0.5em;
+      margin-inline-end: 0.5em;
     }
 
     .extra-content {
@@ -74,8 +75,8 @@
 
     .logout-button {
       position: absolute;
-      right: 20px;
-      padding-right: 10px;
+      inset-inline-end: 20px;
+      padding-inline-end: 10px;
 
       @media all and (max-width: 800px) {
         display: none;
diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
index 81ab434b..fba2f5a5 100644
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@@ -1,18 +1,19 @@
 @import 'src/_variables.scss';
 .settings_tab-switcher {
-  height: 100%;
+  block-size: 100%;
 
   .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
-    margin: 1em 1em 1.4em;
-    padding-bottom: 1.4em;
+    border-block-end: 2px solid var(--fg, $fallback--fg);
+    margin-block: 1em 1.4em;
+    margin-inline: 1em;
+    padding-block-end: 1.4em;
 
     > div,
     > label {
       display: block;
-      margin-bottom: .5em;
+      margin-block-end: .5em;
       &:last-child {
-        margin-bottom: 0;
+        margin-block-end: 0;
       }
     }
 
@@ -21,24 +22,24 @@
 
       .option-list {
         margin: 0;
-        padding-left: .5em;
+        padding-inline-start: .5em;
       }
     }
 
     &:last-child {
-      border-bottom: none;
-      padding-bottom: 0;
-      margin-bottom: 1em;
+      border-block-end: none;
+      padding-block-end: 0;
+      margin-block-end: 1em;
     }
 
     select {
-      min-width: 10em;
+      min-inline-size: 10em;
     }
 
     textarea {
-      width: 100%;
-      max-width: 100%;
-      height: 100px;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      block-size: 100px;
     }
 
     .unavailable,
@@ -48,7 +49,7 @@
     }
 
     .number-input {
-      max-width: 6em;
+      max-inline-size: 6em;
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 7160b1fd..101057d7 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -76,7 +76,7 @@
           <textarea
             id="muteWords"
             v-model="muteWordsString"
-            class="resize-height"
+            class="resize-block-size"
           />
           <div>{{ $t('settings.filtering_explanation') }}</div>
         </li>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 2fa20742..27eeae96 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -612,11 +612,11 @@
 <script src="./general_tab.js"></script>
 <style lang="scss">
 .settings-profile {
-  margin-bottom: 1em;
+  margin-block-end: 1em;
 }
 
 #settings-profile-new-name {
-  margin-left: 1em;
-  margin-right: 1em;
+  margin-inline-start: 1em;
+  margin-inline-end: 1em;
 }
 </style>
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
index 2adff847..ef63af89 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
@@ -1,18 +1,19 @@
 .mutes-and-blocks-tab {
-    height: 100%;
+    block-size: 100%;
 
     .usersearch-wrapper {
         padding: 1em;
     }
 
     .bulk-actions {
-        text-align: right;
-        padding: 0 1em;
-        min-height: 2em;
+        text-align: end;
+        padding-block: 0;
+        padding-inline: 1em;
+        min-block-size: 2em;
     }
 
     .bulk-action-button {
-        width: 10em
+        inline-size: 10em
     }
 
     .domain-mute-form {
@@ -23,7 +24,7 @@
 
     .domain-mute-button {
         align-self: flex-end;
-        margin-top: 1em;
-        width: 10em
+        margin-block-start: 1em;
+        inline-size: 10em
     }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 8b9a35e1..bea5300f 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -5,25 +5,25 @@
   }
 
   .expire-posts-days {
-    margin-left: 1em;
+    margin-inline-start: 1em;
   }
 
   .visibility-tray {
-    padding-top: 5px;
+    padding-block-start: 5px;
   }
 
   input[type=file] {
     padding: 5px;
-    height: auto;
+    block-size: auto;
   }
 
   .banner-background-preview {
-    max-width: 100%;
-    width: 300px;
+    max-inline-size: 100%;
+    inline-size: 300px;
     position: relative;
 
     img {
-      width: 100%;
+      inline-size: 100%;
     }
   }
 
@@ -33,33 +33,33 @@
   }
 
   .name-changer {
-    width: 100%;
+    inline-size: 100%;
   }
 
   .current-avatar-container {
     position: relative;
-    width: 150px;
-    height: 150px;
+    inline-size: 150px;
+    block-size: 150px;
   }
 
   .current-avatar {
     display: block;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     border-radius: $fallback--avatarRadius;
     border-radius: var(--avatarRadius, $fallback--avatarRadius);
   }
 
   .reset-button {
     position: absolute;
-    top: 0.2em;
-    right: 0.2em;
+    inset-block-start: 0.2em;
+    inset-inline-end: 0.2em;
     border-radius: $fallback--tooltipRadius;
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     background-color: rgba(0, 0, 0, 0.6);
     opacity: 0.7;
-    width: 1.5em;
-    height: 1.5em;
+    inline-size: 1.5em;
+    block-size: 1.5em;
     text-align: center;
     line-height: 1.5em;
     font-size: 1.5em;
@@ -75,14 +75,14 @@
   }
 
   .oauth-tokens {
-    width: 100%;
+    inline-size: 100%;
 
     th {
-      text-align: left;
+      text-align: start;
     }
 
     .actions {
-      text-align: right;
+      text-align: end;
     }
   }
 
@@ -91,12 +91,13 @@
   }
 
   &-bulk-actions {
-    text-align: right;
-    padding: 0 1em;
-    min-height: 2em;
+    text-align: end;
+    padding-block: 0;
+    padding-inline: 1em;
+    min-block-size: 2em;
 
     button {
-      width: 10em;
+      inline-size: 10em;
     }
   }
 
@@ -107,13 +108,13 @@
 
     button {
       align-self: flex-end;
-      margin-top: 1em;
-      width: 10em;
+      margin-block-start: 1em;
+      inline-size: 10em;
     }
   }
 
   .setting-subitem {
-    margin-left: 1.75em;
+    margin-inline-start: 1.75em;
   }
 
   .profile-fields {
@@ -121,15 +122,18 @@
 
     & > .emoji-input {
       flex: 1 1 auto;
-      margin: 0 0.2em 0.5em;
-      min-width: 0;
+      margin-block: 0 0.5em;
+      margin-inline: 0.2em;
+      min-inline-size: 0;
     }
 
     .delete-field {
-      width: 20px;
+      inline-size: 20px;
       align-self: center;
-      margin: 0 0.2em 0.5em;
-      padding: 0 0.5em;
+      margin-block: 0 0.5em;
+      margin-inline: 0.2em;
+      padding-block: 0;
+      padding-inline: 0.5em;
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 8748b685..8107b92b 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -22,7 +22,7 @@
       >
         <textarea
           v-model="newBio"
-          class="bio resize-height"
+          class="bio resize-block-size"
         />
       </EmojiInput>
       <p v-if="role === 'admin' || role === 'moderator'">
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
index 455d17b6..ae4717af 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
@@ -157,14 +157,14 @@
     flex-wrap: wrap;
     .qr-code {
       flex: 1;
-      padding-right: 10px;
+      padding-inline-end: 10px;
     }
     .verify { flex: 1; }
     .error { margin: 4px 0 0 0; }
     .confirm-otp-actions {
       button {
-        width: 15em;
-        margin-top: 5px;
+        inline-size: 15em;
+        margin-block-start: 5px;
       }
 
     }
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index ba6bd529..74bc2c8b 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -140,9 +140,9 @@ export default {}
 }
 .underlay-preview {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 10px;
-  right: 10px;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 10px;
+  inset-inline-end: 10px;
 }
 </style>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 0427e42f..b03a7e34 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -1,24 +1,24 @@
 @import 'src/_variables.scss';
 .theme-tab {
-  padding-bottom: 2em;
+  padding-block-end: 2em;
   .theme-warning {
     display: flex;
     align-items: baseline;
-    margin-bottom: .5em;
+    margin-block-end: .5em;
     .buttons {
       .btn {
-        margin-bottom: .5em;
+        margin-block-end: .5em;
       }
     }
   }
   .preset-switcher {
-    margin-right: 1em;
+    margin-inline-end: 1em;
   }
 
   .style-control {
     display: flex;
     align-items: baseline;
-    margin-bottom: 5px;
+    margin-block-end: 5px;
 
     .label {
       flex: 1;
@@ -39,17 +39,17 @@
     }
 
     input, select {
-      min-width: 3em;
+      min-inline-size: 3em;
       margin: 0;
       flex: 0;
 
       &[type=number] {
-        min-width: 5em;
+        min-inline-size: 5em;
       }
 
       &[type=range] {
         flex: 1;
-        min-width: 3em;
+        min-inline-size: 3em;
         align-self: flex-start;
       }
     }
@@ -75,7 +75,7 @@
 
   .color-container{
     > h4 {
-      width: 99%;
+      inline-size: 99%;
     }
     flex-wrap: wrap;
     justify-content: space-between;
@@ -86,21 +86,22 @@
   .shadow-container,
   .radius-container,
   .presets-container {
-    margin: 1em 1em 0;
+    margin-block: 1em 0;
+    margin-inline: 1em;
   }
 
   .tab-header {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
-    width: 100%;
-    min-height: 30px;
-    margin-bottom: 1em;
+    inline-size: 100%;
+    min-block-size: 30px;
+    margin-block-end: 1em;
 
     p {
       flex: 1;
       margin: 0;
-      margin-right: .5em;
+      margin-inline-end: .5em;
     }
   }
 
@@ -109,21 +110,22 @@
     flex-direction: column;
 
     .btn {
-      min-width: 1px;
+      min-inline-size: 1px;
       flex: 0 auto;
-      padding: 0 1em;
-      margin-bottom: .5em;
+      padding-block: 0;
+      padding-inline: 1em;
+      margin-block-end: .5em;
     }
   }
 
   .shadow-selector {
     .override {
       flex: 1;
-      margin-left: .5em;
+      margin-inline-start: .5em;
     }
     .select-container {
-      margin-top: -4px;
-      margin-bottom: -3px;
+      margin-block-start: -4px;
+      margin-block-end: -3px;
     }
   }
 
@@ -136,7 +138,7 @@
 
     .presets,
     .import-export {
-      margin-bottom: .5em;
+      margin-block-end: .5em;
     }
 
     .import-export {
@@ -144,26 +146,28 @@
     }
 
     .override {
-      margin-left: .5em;
+      margin-inline-start: .5em;
     }
   }
 
   .save-load-options {
     flex-wrap: wrap;
-    margin-top: .5em;
+    margin-block-start: .5em;
     justify-content: center;
     .keep-option {
-      margin: 0 .5em .5em;
-      min-width: 25%;
+      margin-block: 0 .5em;
+      margin-inline: .5em;
+      min-inline-size: 25%;
     }
   }
 
   .preview-container {
-    border-top: 1px dashed;
-    border-bottom: 1px dashed;
+    border-block-start: 1px dashed;
+    border-block-end: 1px dashed;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
-    margin: 1em 0;
+    margin-block: 1em;
+    margin-inline: 0;
     padding: 1em;
     background-color: var(--wallpaper);
     background-image: var(--body-background-image);
@@ -179,22 +183,22 @@
           flex: 1;
 
           h4 {
-            margin-bottom: .25em;
+            margin-block-end: .25em;
           }
 
           .icons {
-            margin-top: .5em;
+            margin-block-start: .5em;
             display: flex;
 
             i {
-              margin-right: 1em;
+              margin-inline-end: 1em;
             }
           }
         }
       }
 
       .after-post {
-        margin-top: 1em;
+        margin-block-start: 1em;
         display: flex;
         align-items: center;
       }
@@ -204,15 +208,15 @@
         color: black;
         font-family: sans-serif;
         text-align: center;
-        margin-right: 1em;
+        margin-inline-end: 1em;
       }
 
       .avatar-alt {
         flex: 0 auto;
-        margin-left: 28px;
+        margin-inline-start: 28px;
         font-size: 12px;
-        min-width: 20px;
-        min-height: 20px;
+        min-inline-size: 20px;
+        min-block-size: 20px;
         line-height: 20px;
         border-radius: $fallback--avatarAltRadius;
         border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
@@ -220,8 +224,8 @@
 
       .avatar {
         flex: 0 auto;
-        width: 48px;
-        height: 48px;
+        inline-size: 48px;
+        block-size: 48px;
         font-size: 14px;
         line-height: 48px;
       }
@@ -233,38 +237,39 @@
         .checkbox {
           display: inline-flex;
           align-items: baseline;
-          margin-right: 1em;
+          margin-inline-end: 1em;
           flex: 1;
         }
       }
 
       .separator {
         margin: 1em;
-        border-bottom: 1px solid;
+        border-block-end: 1px solid;
         border-color: $fallback--border;
         border-color: var(--border, $fallback--border);
       }
 
       .btn {
-        min-width: 3em;
+        min-inline-size: 3em;
       }
     }
   }
 
   .radius-item,
   .color-item {
-    min-width: 20em;
-    margin: 5px 6px 0 0;
+    min-inline-size: 20em;
+    margin-block: 5px 0;
+    margin-inline: 0 6px;
     display:flex;
     flex-direction: column;
     flex: 1 1 0;
 
     &.wide {
-      min-width: 60%
+      min-inline-size: 60%
     }
 
     &:not(.wide):nth-child(2n+1) {
-      margin-right: 7px;
+      margin-inline-end: 7px;
 
     }
 
@@ -289,20 +294,20 @@
   .theme-color-cl,
   .theme-radius-in,
   .theme-color-in {
-    margin-left: 4px;
+    margin-inline-start: 4px;
   }
 
   .theme-radius-in {
-    min-width: 1em;
+    min-inline-size: 1em;
   }
 
   .theme-radius-in {
-    max-width: 7em;
+    max-inline-size: 7em;
     flex: 1;
   }
 
   .theme-radius-lb{
-    max-width: 50em;
+    max-inline-size: 50em;
   }
 
   .theme-preview-content {
@@ -310,23 +315,23 @@
   }
 
   .btn {
-    margin-left: .25em;
-    margin-right: .25em;
+    margin-inline-start: .25em;
+    margin-inline-end: .25em;
   }
 }
 
 .extra-content {
   .apply-container {
-    padding-left: 15vw;
+    padding-inline-start: 15vi;
     display: flex;
     flex-direction: row;
     justify-content: space-evenly;
     flex-grow: 1;
     .btn {
       flex-grow: 1;
-      min-height: 2em;
-      min-width: 0;
-      max-width: 10em;
+      min-block-size: 2em;
+      min-inline-size: 0;
+      max-inline-size: 10em;
       padding: 0;
     }
   }
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index f2fc7b99..48ceda6f 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -223,11 +223,12 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  margin-bottom: 1em;
+  margin-block-end: 1em;
 
   .shadow-preview-container,
   .shadow-tweak {
-    margin: 5px 6px 0 0;
+    margin-block: 5px 0;
+    margin-inline: 0 6px;
   }
   .shadow-preview-container {
     flex: 0;
@@ -237,8 +238,8 @@
     $side: 15em;
 
     input[type=number] {
-      width: 5em;
-      min-width: 2em;
+      inline-size: 5em;
+      min-inline-size: 2em;
     }
     .x-shift-control,
     .y-shift-control {
@@ -258,15 +259,15 @@
     .x-shift-control .wrap,
     input[type=range] {
       margin: 0;
-      width: $side;
-      height: 2em;
+      inline-size: $side;
+      block-size: 2em;
     }
     .y-shift-control {
       flex-direction: column;
       align-items: flex-end;
       .wrap {
-        width: 2em;
-        height: $side;
+        inline-size: 2em;
+        block-size: $side;
       }
       input[type=range] {
         transform-origin: 1em 1em;
@@ -291,8 +292,8 @@
       border-radius: var(--inputRadius, $fallback--inputRadius);
 
       .preview-block {
-        width: 33%;
-        height: 33%;
+        inline-size: 33%;
+        block-size: 33%;
         background-color: $fallback--bg;
         background-color: var(--bg, $fallback--bg);
         border-radius: $fallback--panelRadius;
@@ -303,7 +304,7 @@
 
   .shadow-tweak {
     flex: 1;
-    min-width: 280px;
+    min-inline-size: 280px;
 
     .id-control {
       align-items: stretch;
@@ -313,13 +314,15 @@
       }
 
       .shadow-switcher, .btn {
-        min-width: 1px;
-        margin-right: 5px;
+        min-inline-size: 1px;
+        margin-inline-end: 5px;
       }
 
       .btn {
-        padding: 0 .4em;
-        margin: 0 .1em;
+        padding-block: 0;
+        padding-inline: .4em;
+        margin-block: 0;
+        margin-inline: .1em;
       }
     }
   }
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 86943e27..1c6a3a1b 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -226,10 +226,10 @@
 .side-drawer-container {
   position: fixed;
   z-index: 1000;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: 100%;
   display: flex;
   align-items: stretch;
   transition-duration: 0s;
@@ -246,10 +246,10 @@
 }
 
 .side-drawer-darken {
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 100vi;
+  block-size: 100vb;
   position: fixed;
   z-index: -1;
   transition: 0.35s;
@@ -270,10 +270,12 @@
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
   transition: 0.35s;
   transition-property: transform;
-  margin: 0 0 0 -100px;
-  padding: 0 0 1em 100px;
-  width: 80%;
-  max-width: 20em;
+  margin-block: 0 0;
+  margin-inline: -100px 0;
+  padding-block: 0 1em;
+  padding-inline: 100px 0;
+  inline-size: 80%;
+  max-inline-size: 20em;
   flex: 0 0 80%;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
   box-shadow: var(--panelShadow);
@@ -287,7 +289,7 @@
   --icon: var(--popoverIcon, $fallback--icon);
 
   .badge {
-    margin-left: 10px;
+    margin-inline-start: 10px;
   }
 }
 
@@ -298,8 +300,8 @@
 
   img {
     flex: none;
-    height: 50px;
-    margin-right: 0.85em;
+    block-size: 50px;
+    margin-inline-end: 0.85em;
   }
 
   span {
@@ -331,7 +333,7 @@
   margin: 0;
   padding: 0;
 
-  border-bottom: 1px solid;
+  border-block-end: 1px solid;
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
 }
@@ -346,9 +348,10 @@
   a, button {
     box-sizing: border-box;
     display: block;
-    height: 3em;
+    block-size: 3em;
     line-height: 3em;
-    padding: 0 0.7em;
+    padding-block: 0;
+    padding-inline: 0.7em;
 
     &:hover {
       background-color: $fallback--lightBg;
diff --git a/src/components/staff_panel/staff_panel.vue b/src/components/staff_panel/staff_panel.vue
index c52ade42..02633a48 100644
--- a/src/components/staff_panel/staff_panel.vue
+++ b/src/components/staff_panel/staff_panel.vue
@@ -29,11 +29,11 @@
 <style lang="scss">
 
 .staff-group {
-  padding-left: 1em;
-  padding-top: 1em;
+  padding-inline-start: 1em;
+  padding-block-start: 1em;
 
   .basic-user-card {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 }
 
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index cd65b890..8f38e65c 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -1,7 +1,7 @@
 @import "../../_variables.scss";
 
 .Status {
-  min-width: 0;
+  min-inline-size: 0;
   white-space: normal;
   word-wrap: break-word;
   word-break: break-word;
@@ -33,7 +33,8 @@
     display: flex;
 
     .deleted-text {
-      margin: 0.5em 0;
+      margin-block: 0.5em;
+      margin-inline: 0;
       align-items: center;
     }
   }
@@ -47,16 +48,17 @@
     }
 
     > * {
-      min-width: 0;
+      min-inline-size: 0;
     }
 
     &.-repeat {
-      padding-top: 0;
+      padding-block-start: 0;
     }
   }
 
   .pin {
-    padding: var(--status-margin, $status-margin) var(--status-margin, $status-margin) 0;
+    padding-block: var(--status-margin, $status-margin) 0;
+    padding-inline: var(--status-margin, $status-margin);
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -72,25 +74,25 @@
   }
 
   .left-side {
-    margin-right: var(--status-margin, $status-margin);
+    margin-inline-end: var(--status-margin, $status-margin);
   }
 
   .right-side {
     flex: 1;
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   .usercard {
-    margin-bottom: var(--status-margin, $status-margin);
+    margin-block-end: var(--status-margin, $status-margin);
   }
 
   .status-username {
     white-space: nowrap;
     overflow: hidden;
-    max-width: 85%;
+    max-inline-size: 85%;
     font-weight: bold;
     flex-shrink: 1;
-    margin-right: 0.4em;
+    margin-inline-end: 0.4em;
     text-overflow: ellipsis;
 
     --_still_image-label-scale: 0.25;
@@ -98,13 +100,13 @@
   }
 
   .status-favicon {
-    height: 18px;
-    width: 18px;
-    margin-right: 0.4em;
+    block-size: 18px;
+    inline-size: 18px;
+    margin-inline-end: 0.4em;
   }
 
   .status-heading {
-    margin-bottom: 0.5em;
+    margin-block-end: 0.5em;
 
     .emoji {
       --emoji-size: 16px;
@@ -123,17 +125,17 @@
   }
 
   .account-name {
-    min-width: 1.6em;
-    margin-right: 0.4em;
+    min-inline-size: 1.6em;
+    margin-inline-end: 0.4em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 1 1 0;
   }
 
-  .heading-left {
+  .heading-inline-start {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     flex-wrap: wrap;
 
     img {
@@ -145,14 +147,14 @@
     }
   }
 
-  .heading-right {
+  .heading-inline-end {
     display: flex;
     flex-shrink: 0;
 
     .button-unstyled {
       padding: 5px;
       margin: -5px;
-      height: min-content;
+      block-size: min-content;
 
       &:hover svg {
         color: $fallback--lightText;
@@ -161,7 +163,7 @@
     }
 
     .svg-inline--fa {
-      margin-left: 0.25em;
+      margin-inline-start: 0.25em;
     }
   }
 
@@ -171,7 +173,7 @@
   }
 
   .timeago {
-    margin-right: 0.2em;
+    margin-inline-end: 0.2em;
   }
 
   & .heading-reply-row,
@@ -179,22 +181,22 @@
     position: relative;
     align-content: baseline;
     font-size: 0.85em;
-    margin-top: 0.2em;
+    margin-block-start: 0.2em;
     line-height: 130%;
-    max-width: 100%;
+    max-inline-size: 100%;
     align-items: stretch;
   }
 
   & .reply-to-popover,
   & .reply-to-no-popover,
   & .mentions {
-    min-width: 0;
-    margin-right: 0.4em;
+    min-inline-size: 0;
+    margin-inline-end: 0.4em;
     flex-shrink: 0;
   }
 
   .reply-glued-label {
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
   }
 
   .reply-to-popover {
@@ -202,9 +204,9 @@
       content: "";
       display: block;
       position: absolute;
-      bottom: 0;
-      width: 100%;
-      border-bottom: 1px solid var(--faint);
+      inset-block-end: 0;
+      inline-size: 100%;
+      border-block-end: 1px solid var(--faint);
       pointer-events: none;
     }
 
@@ -217,9 +219,9 @@
         content: "";
         display: block;
         position: absolute;
-        top: 50%;
-        width: 100%;
-        border-bottom: 1px solid var(--faint);
+        inset-block-start: 50%;
+        inline-size: 100%;
+        border-block-end: 1px solid var(--faint);
         pointer-events: none;
       }
     }
@@ -244,23 +246,24 @@
   }
 
   .replies {
-    margin-top: 0.25em;
+    margin-block-start: 0.25em;
     line-height: 1.3;
     font-size: 0.85em;
     display: flex;
     flex-wrap: wrap;
 
     & > * {
-      margin-right: 0.4em;
+      margin-inline-end: 0.4em;
     }
   }
 
   .reply-link {
-    height: 17px;
+    block-size: 17px;
   }
 
   .repeat-info {
-    padding: 0.4em var(--status-margin, $status-margin);
+    padding-block: 0.4em;
+    padding-inline: var(--status-margin, $status-margin);
 
     .repeat-icon {
       color: $fallback--cGreen;
@@ -270,18 +273,18 @@
 
   .repeater-avatar {
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-    margin-left: 28px;
-    width: 20px;
-    height: 20px;
+    margin-inline-start: 28px;
+    inline-size: 20px;
+    block-size: 20px;
   }
 
   .repeater-name {
     text-overflow: ellipsis;
-    margin-right: 0;
+    margin-inline-end: 0;
 
     .emoji {
-      width: 14px;
-      height: 14px;
+      inline-size: 14px;
+      block-size: 14px;
       vertical-align: middle;
       object-fit: contain;
     }
@@ -304,21 +307,22 @@
 
   .status-actions {
     position: relative;
-    width: 100%;
+    inline-size: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: left;
-    margin-top: var(--status-margin, $status-margin);
+    margin-block-start: var(--status-margin, $status-margin);
 
     > * {
-      min-width: fit-content;
+      min-inline-size: fit-content;
       flex: 1;
     }
   }
 
   .muted {
-    padding: 0.25em 0.6em;
-    height: 1.2em;
+    padding-block: 0.25em;
+    padding-inline: 0.6em;
+    block-size: 1.2em;
     line-height: 1.2em;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -342,7 +346,7 @@
     .status-username {
       font-weight: normal;
       flex: 0 1 auto;
-      margin-right: 0.2em;
+      margin-inline-end: 0.2em;
       font-size: smaller;
     }
 
@@ -352,7 +356,7 @@
 
     .mute-words {
       flex: 1 0 5em;
-      margin-left: 0.2em;
+      margin-inline-start: 0.2em;
 
       &::before {
         content: " ";
@@ -361,14 +365,14 @@
 
     .unmute {
       flex: 0 0 auto;
-      margin-left: auto;
+      margin-inline-start: auto;
       display: block;
     }
   }
 
   .reply-form {
-    padding-top: 0;
-    padding-bottom: 0;
+    padding-block-start: 0;
+    padding-block-end: 0;
   }
 
   .reply-body {
@@ -376,8 +380,8 @@
   }
 
   .quote-form {
-    padding-top: 0;
-    padding-bottom: 0;
+    padding-block-start: 0;
+    padding-block-end: 0;
   }
 
   .quote-body {
@@ -385,11 +389,11 @@
   }
 
   .favs-repeated-users {
-    margin-top: var(--status-margin, $status-margin);
+    margin-block-start: var(--status-margin, $status-margin);
   }
 
   .stats {
-    width: 100%;
+    inline-size: 100%;
     display: flex;
     line-height: 1em;
   }
@@ -404,15 +408,15 @@
     &::before {
       content: "";
       position: absolute;
-      height: 100%;
-      width: 1px;
-      left: 0;
+      block-size: 100%;
+      inline-size: 1px;
+      inset-inline-start: 0;
       background-color: var(--faint, $fallback--faint);
     }
   }
 
   .stat-count {
-    margin-right: var(--status-margin, $status-margin);
+    margin-inline-end: var(--status-margin, $status-margin);
     user-select: none;
 
     .stat-title {
@@ -435,18 +439,18 @@
 
   @media all and (max-width: 800px) {
     .repeater-avatar {
-      margin-left: 20px;
+      margin-inline-start: 20px;
     }
 
     .post-avatar {
-      width: 40px;
-      height: 40px;
+      inline-size: 40px;
+      block-size: 40px;
 
       // TODO define those other way somehow?
       // stylelint-disable rscss/class-format
       &.-compact {
-        width: 32px;
-        height: 32px;
+        inline-size: 32px;
+        block-size: 32px;
       }
     }
   }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index c9ce4a8a..919a2c54 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -148,7 +148,7 @@
             class="status-heading"
           >
             <div class="heading-name-row">
-              <div class="heading-left">
+              <div class="heading-inline-start">
                 <h4
                   v-if="status.user.name_html"
                   class="status-username"
@@ -267,7 +267,7 @@
                   v-if="!isPreview"
                   :status-id="status.parent_visible && status.in_reply_to_status_id"
                   class="reply-to-popover"
-                  style="min-width: 0"
+                  style="min-inline-size: 0"
                   :class="{ '-strikethrough': !status.parent_visible }"
                 >
                   <button
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 230a27ac..8807b100 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -7,7 +7,7 @@
   .translation {
     border: 1px solid var(--accent, $fallback--link);
     border-radius: var(--panelRadius, $fallback--panelRadius);
-    margin-top: 1em;
+    margin-block-start: 1em;
     padding: 0.5em;
   }
   .emoji {
@@ -22,27 +22,27 @@
 
   ._mfm_x2_ {
     .emoji {
-      width: 100px;
-      height: 100px;
+      inline-size: 100px;
+      block-size: 100px;
     }
   }
 
   ._mfm_x3_ {
     .emoji {
-      width: 150px;
-      height: 150px;
+      inline-size: 150px;
+      block-size: 150px;
     }
   }
 
   ._mfm_x4_ {
     .emoji {
-      width: 200px;
-      height: 200px;
+      inline-size: 200px;
+      block-size: 200px;
     }
   }
 
   .attachments {
-    margin-top: 0.5em;
+    margin-block-start: 0.5em;
   }
 
   & .text,
@@ -57,7 +57,7 @@
   .summary {
     display: block;
     font-style: italic;
-    padding-bottom: 0.5em;
+    padding-block-end: 0.5em;
   }
 
   .text {
@@ -68,12 +68,12 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      height: 1.4em;
+      block-size: 1.4em;
     }
   }
 
   .summary-wrapper {
-    margin-bottom: 0.5em;
+    margin-block-end: 0.5em;
     border-style: solid;
     border-width: 0 0 1px 0;
     border-color: var(--border, $fallback--border);
@@ -83,7 +83,7 @@
       position: relative;
 
       .summary {
-        max-height: 2em;
+        max-block-size: 2em;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -98,13 +98,13 @@
 
     &.-tall-status {
       position: relative;
-      height: 220px;
+      block-size: 220px;
       overflow-x: hidden;
       overflow-y: hidden;
       z-index: 1;
 
       .media-body-wrapper {
-        min-height: 0;
+        min-block-size: 0;
         mask:
           linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
           linear-gradient(to top, white, white);
@@ -122,21 +122,21 @@
   & .cw-status-hider {
     display: inline-block;
     word-break: break-all;
-    width: 100%;
+    inline-size: 100%;
     text-align: center;
   }
 
   .tall-status-hider {
     position: absolute;
-    height: 70px;
-    margin-top: 150px;
+    block-size: 70px;
+    margin-block-start: 150px;
     line-height: 110px;
     z-index: 2;
   }
 
   .tall-subject-hider {
     // position: absolute;
-    padding-bottom: 0.5em;
+    padding-block-end: 0.5em;
   }
 
   & .status-unhider,
@@ -165,12 +165,12 @@
 
     & .body:not(:active),
     & .attachments {
-      max-height: 3.25em;
+      max-block-size: 3.25em;
     }
 
     .body {
       white-space: normal;
-      min-width: 5em;
+      min-inline-size: 5em;
       flex: 5 1 auto;
     }
 
@@ -187,11 +187,11 @@
     }
 
     .attachments {
-      margin-top: 0;
+      margin-block-start: 0;
       flex: 1 1 0;
-      min-width: 5em;
-      height: 100%;
-      margin-left: 0.5em;
+      min-inline-size: 5em;
+      block-size: 100%;
+      margin-inline-start: 0.5em;
     }
 
     .summary-wrapper {
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index ab13141e..0656622d 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -67,12 +67,12 @@
 <style lang="scss">
 .StatusContent {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 
   img, video {
     &.emoji {
-      width: 50px;
-      height: 50px;
+      inline-size: 50px;
+      block-size: 50px;
     }
   }
 
@@ -89,8 +89,8 @@
       animation: none !important;
     }
     .emoji {
-      width: 32px !important;
-      height: 32px !important;
+      inline-size: 32px !important;
+      block-size: 32px !important;
     }
   }
 }
diff --git a/src/components/status_history_modal/status_history_modal.vue b/src/components/status_history_modal/status_history_modal.vue
index e2729369..6cdc390d 100644
--- a/src/components/status_history_modal/status_history_modal.vue
+++ b/src/components/status_history_modal/status_history_modal.vue
@@ -34,13 +34,13 @@
 }
 .status-history-modal-panel {
   flex-shrink: 0;
-  margin-top: 25%;
-  margin-bottom: 2em;
-  width: 100%;
-  max-width: 700px;
+  margin-block-start: 25%;
+  margin-block-end: 2em;
+  inline-size: 100%;
+  max-inline-size: 700px;
 
   @media (orientation: landscape) {
-    margin-top: 8%;
+    margin-block-start: 8%;
   }
 }
 </style>
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index fdca8c9c..6ba55931 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -43,8 +43,8 @@
 /* popover styles load on-demand, so we need to override */
 .status-popover.popover {
   font-size: 1rem;
-  min-width: 15em;
-  max-width: 95%;
+  min-inline-size: 15em;
+  max-inline-size: 95%;
 
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index bca1588c..99d0eec5 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -35,13 +35,14 @@
 @import '../../_variables.scss';
 
 .sticker-picker {
-  width: 100%;
+  inline-size: 100%;
   display: flex;
   flex-direction: column;
   position: absolute;
-  right: 0;
-  left: 0;
-  margin: 0 !important;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  margin-block: 0;
+  margin-inline: !important;
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--link;
@@ -53,19 +54,20 @@
   --icon: var(--popoverIcon, $fallback--icon);
 
   .contents {
-    min-height: 250px;
+    min-block-size: 250px;
     .sticker-picker-content {
       display: flex;
       flex-wrap: wrap;
-      padding: 0 4px;
+      padding-block: 0;
+      padding-inline: 4px;
       .sticker {
         display: flex;
         flex: 1 1 auto;
         margin: 4px;
-        width: 56px;
-        height: 56px;
+        inline-size: 56px;
+        block-size: 56px;
         img {
-          height: 100%;
+          block-size: 100%;
           &:hover {
             filter: drop-shadow(0 0 5px var(--accent, $fallback--link));
           }
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index fa3edacf..c8bdfd4b 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -37,19 +37,19 @@
 
   canvas {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inline-size: 100%;
+    block-size: 100%;
     object-fit: contain;
     visibility: var(--_still-image-canvas-visibility, visible);
   }
 
   img {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     object-fit: contain;
 
     &::before {
@@ -64,12 +64,13 @@
       position: absolute;
       line-height: 1;
       font-size: 0.7em;
-      top: 0.5em;
-      left: 0.5em;
+      inset-block-start: 0.5em;
+      inset-inline-start: 0.5em;
       background: rgba(127, 127, 127, 0.5);
       color: #fff;
       display: block;
-      padding: 2px 4px;
+      padding-block: 2px;
+      padding-inline: 4px;
       border-radius: $fallback--tooltipRadius;
       border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
       z-index: 2;
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 7a086b26..1c0da993 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -4,7 +4,8 @@
   display: flex;
 
   .tab-icon {
-    margin: 0.2em auto;
+    margin-block: 0.2em;
+    margin-inline: auto;
     display: block;
   }
 
@@ -12,39 +13,39 @@
     flex-direction: column;
 
     > .tabs {
-      width: 100%;
+      inline-size: 100%;
       overflow-y: hidden;
       overflow-x: auto;
-      padding-top: 5px;
+      padding-block-start: 5px;
       flex-direction: row;
 
       &::after, &::before {
         content: '';
         flex: 1 1 auto;
-        border-bottom: 1px solid;
-        border-bottom-color: $fallback--border;
-        border-bottom-color: var(--border, $fallback--border);
+        border-block-end: 1px solid;
+        border-block-end-color: $fallback--border;
+        border-block-end-color: var(--border, $fallback--border);
       }
 
       .tab-wrapper {
-        height: 2em;
+        block-size: 2em;
 
         &:not(.active)::after {
-          left: 0;
-          right: 0;
-          bottom: 0;
-          border-bottom: 1px solid;
-          border-bottom-color: $fallback--border;
-          border-bottom-color: var(--border, $fallback--border);
+          inset-inline-start: 0;
+          inset-inline-end: 0;
+          inset-block-end: 0;
+          border-block-end: 1px solid;
+          border-block-end-color: $fallback--border;
+          border-block-end-color: var(--border, $fallback--border);
         }
       }
       .tab {
-        width: 100%;
-        min-width: 1px;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        padding-bottom: 99px;
-        margin-bottom: 6px - 99px;
+        inline-size: 100%;
+        min-inline-size: 1px;
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
+        padding-block-end: 99px;
+        margin-block-end: 6px - 99px;
       }
     }
     .contents.scrollable-tabs {
@@ -73,9 +74,9 @@
         flex-shrink: 0;
         flex-basis: .5em;
         content: '';
-        border-right: 1px solid;
-        border-right-color: $fallback--border;
-        border-right-color: var(--border, $fallback--border);
+        border-inline-end: 1px solid;
+        border-inline-end-color: $fallback--border;
+        border-inline-end-color: var(--border, $fallback--border);
       }
 
       &::after {
@@ -87,53 +88,53 @@
       }
 
       .tab-wrapper {
-        min-width: 10em;
+        min-inline-size: 10em;
         display: flex;
         flex-direction: column;
 
         @media all and (max-width: 800px) {
-          min-width: 4em;
+          min-inline-size: 4em;
         }
 
         &:not(.active)::after {
-          top: 0;
-          right: 0;
-          bottom: 0;
-          border-right: 1px solid;
-          border-right-color: $fallback--border;
-          border-right-color: var(--border, $fallback--border);
+          inset-block-start: 0;
+          inset-inline-end: 0;
+          inset-block-end: 0;
+          border-inline-end: 1px solid;
+          border-inline-end-color: $fallback--border;
+          border-inline-end-color: var(--border, $fallback--border);
         }
 
         &::before {
           flex: 0 0 6px;
           content: '';
-          border-right: 1px solid;
-          border-right-color: $fallback--border;
-          border-right-color: var(--border, $fallback--border);
+          border-inline-end: 1px solid;
+          border-inline-end-color: $fallback--border;
+          border-inline-end-color: var(--border, $fallback--border);
         }
 
         &:last-child .tab {
-          margin-bottom: 0;
+          margin-block-end: 0;
         }
       }
 
       .tab {
         flex: 1;
         box-sizing: content-box;
-        min-width: 10em;
-        min-width: 1px;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        padding-left: 1em;
-        padding-right: calc(1em + 200px);
-        margin-right: -200px;
-        margin-left: 1em;
+        min-inline-size: 10em;
+        min-inline-size: 1px;
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+        padding-inline-start: 1em;
+        padding-inline-end: calc(1em + 200px);
+        margin-inline-end: -200px;
+        margin-inline-start: 1em;
 
         @media all and (max-width: 800px) {
-          padding-left: .25em;
-          padding-right: calc(.25em + 200px);
-          margin-right: calc(.25em - 200px);
-          margin-left: .25em;
+          padding-inline-start: .25em;
+          padding-inline-end: calc(.25em + 200px);
+          margin-inline-end: calc(.25em - 200px);
+          margin-inline-start: .25em;
           .text {
             display: none
           }
@@ -144,13 +145,13 @@
 
   .contents {
     flex: 1 0 auto;
-    min-height: 0px;
+    min-block-size: 0px;
 
     .hidden {
       display: none;
     }
     .full-height:not(.hidden) {
-      height: 100%;
+      block-size: 100%;
       display: flex;
       flex-direction: column;
       > *:not(.mobile-label) {
@@ -166,7 +167,8 @@
   .tab {
     position: relative;
     white-space: nowrap;
-    padding: 6px 1em;
+    padding-block: 6px;
+    padding-inline: 1em;
 
     &:not(.active) {
       z-index: 4;
@@ -184,9 +186,9 @@
     }
 
     img {
-      max-height: 26px;
+      max-block-size: 26px;
       vertical-align: top;
-      margin-top: -5px;
+      margin-block-start: -5px;
     }
   }
 
@@ -216,12 +218,12 @@
   }
 
   .mobile-label {
-    padding-left: .3em;
-    padding-bottom: .25em;
-    margin-top: .5em;
-    margin-left: .2em;
-    margin-bottom: .25em;
-    border-bottom: 1px solid var(--border, $fallback--border);
+    padding-inline-start: .3em;
+    padding-block-end: .25em;
+    margin-block-start: .5em;
+    margin-inline-start: .2em;
+    margin-block-end: .25em;
+    border-block-end: 1px solid var(--border, $fallback--border);
 
     @media all and (min-width: 800px) {
       display: none;
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index 4eaf597d..d2589008 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -121,8 +121,8 @@
 <style lang="scss">
 @import '../../_variables.scss';
 .thread-tree-replies {
-  margin-left: var(--status-margin, $status-margin);
-  border-left: 2px solid var(--border, $fallback--border);
+  margin-inline-start: var(--status-margin, $status-margin);
+  border-inline-start: 2px solid var(--border, $fallback--border);
 }
 
 .thread-tree-replies-hidden {
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 9e009fd3..96b7c8ef 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -10,7 +10,7 @@
   }
 
   .conversation-heading {
-    top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
+    inset-block-start: calc(var(--__panel-heading-block-size) * var(--currentPanelStack, 2));
     z-index: 2;
   }
 
@@ -18,13 +18,14 @@
     .timeline-heading {
       text-align: center;
       line-height: 2.75em;
-      padding: 0 0.5em;
+      padding-block: 0;
+      padding-inline: 0.5em;
     }
 
     .timeline-heading {
       .button-default, .alert {
         line-height: 2em;
-        width: 100%;
+        inline-size: 100%;
       }
     }
   }
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index 98fab926..93413ca0 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -96,8 +96,8 @@
 
   > button {
     line-height: 100%;
-    height: 100%;
-    width: var(--__panel-heading-height-inner);
+    block-size: 100%;
+    inline-size: var(--__panel-heading-block-size-inner);
     text-align: center;
 
     svg {
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 61119482..76379047 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -39,9 +39,9 @@
 
 .TimelineMenu {
   flex-shrink: 1;
-  margin-right: auto;
-  min-width: 0;
-  width: 24rem;
+  margin-inline-end: auto;
+  min-inline-size: 0;
+  inline-size: 24rem;
 
   .popover-trigger-button {
     vertical-align: bottom;
@@ -50,24 +50,25 @@
   .timeline-menu-popover-wrap {
     overflow: hidden;
     // Match panel heading padding to line up menu with bottom of heading
-    margin-top: 0.6rem;
-    padding: 0 15px 15px 15px;
+    margin-block-start: 0.6rem;
+    padding-block: 0 15px;
+    padding-inline: 15px 15px;
   }
 
   .timeline-menu-popover {
-    width: 24rem;
-    max-width: 100vw;
+    inline-size: 24rem;
+    max-inline-size: 100vi;
     margin: 0;
     font-size: 1rem;
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
+    border-start-end-radius: 0;
+    border-start-start-radius: 0;
     transform: translateY(-100%);
     transition: transform 100ms;
   }
 
   .panel::after {
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
+    border-start-end-radius: 0;
+    border-start-start-radius: 0;
   }
 
   &.open .timeline-menu-popover {
@@ -78,7 +79,7 @@
     margin: 0;
     cursor: pointer;
     user-select: none;
-    width: 100%;
+    inline-size: 100%;
     display: flex;
 
     .timeline-menu-name {
@@ -88,7 +89,7 @@
     }
 
     svg {
-      margin-left: 0.6em;
+      margin-inline-start: 0.6em;
       transition: transform 100ms;
     }
 
@@ -115,16 +116,16 @@
   }
 
   li {
-    border-bottom: 1px solid;
+    border-block-end: 1px solid;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
     padding: 0;
 
     &:last-child a {
-      border-bottom-right-radius: $fallback--panelRadius;
-      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-bottom-left-radius: $fallback--panelRadius;
-      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
+      border-end-end-radius: $fallback--panelRadius;
+      border-end-end-radius: var(--panelRadius, $fallback--panelRadius);
+      border-end-start-radius: $fallback--panelRadius;
+      border-end-start-radius: var(--panelRadius, $fallback--panelRadius);
     }
 
     &:last-child {
@@ -134,7 +135,8 @@
 
   a {
     display: block;
-    padding: 0.6em 0.65em;
+    padding-block: 0.6em;
+    padding-inline: 0.65em;
 
     &:hover {
       background-color: $fallback--lightBg;
@@ -164,8 +166,8 @@
     }
 
     svg {
-      margin-right: 0.4em;
-      margin-left: -0.2em;
+      margin-inline-end: 0.4em;
+      margin-inline-start: -0.2em;
     }
   }
 }
diff --git a/src/components/timeline_menu/timeline_menu_content.vue b/src/components/timeline_menu/timeline_menu_content.vue
index 27aece22..5b427d76 100644
--- a/src/components/timeline_menu/timeline_menu_content.vue
+++ b/src/components/timeline_menu/timeline_menu_content.vue
@@ -106,9 +106,9 @@
 .timeline-desc {
   text-decoration: none;
   color: var(--text, $fallback--text);
-  padding-left: 1em;
+  padding-inline-start: 1em;
   display: block;
   background-color: scale(var(--bg, $fallback--bg), 0.1);
-  padding-bottom: 0.4em;
+  padding-block-end: 0.4em;
 }
 </style>
diff --git a/src/components/timeline_menu_tabs/timeline_menu_content.vue b/src/components/timeline_menu_tabs/timeline_menu_content.vue
index 32548c49..46ece2b5 100644
--- a/src/components/timeline_menu_tabs/timeline_menu_content.vue
+++ b/src/components/timeline_menu_tabs/timeline_menu_content.vue
@@ -106,9 +106,9 @@
 .timeline-desc {
   text-decoration: none;
   color: var(--text, $fallback--text);
-  padding-left: 1em;
+  padding-inline-start: 1em;
   display: block;
   background-color: scale(var(--bg, $fallback--bg), 0.1);
-  padding-bottom: 0.4em;
+  padding-block-end: 0.4em;
 }
 </style>
diff --git a/src/components/timeline_menu_tabs/timeline_menu_tabs.vue b/src/components/timeline_menu_tabs/timeline_menu_tabs.vue
index f017fa1f..aac486f1 100644
--- a/src/components/timeline_menu_tabs/timeline_menu_tabs.vue
+++ b/src/components/timeline_menu_tabs/timeline_menu_tabs.vue
@@ -60,14 +60,14 @@
 
 .timeline-menu-tabs {
   .nav-icon {
-    margin-left: 0.7em;
-    width: 2em;
-    height: 100%;
+    margin-inline-start: 0.7em;
+    inline-size: 2em;
+    block-size: 100%;
     text-align: center;
 
     &.router-link-active {
-      border-bottom: 2px solid var(--selectedMenuText, $fallback--text);
-      padding-bottom: 0.8em;
+      border-block-end: 2px solid var(--selectedMenuText, $fallback--text);
+      padding-block-end: 0.8em;
 
       .svg-inline--fa {
         font-weight: bolder;
@@ -79,7 +79,7 @@
   }
 
   .timeline-title {
-    margin-left: 1em;
+    margin-inline-start: 1em;
     font-size: 1.2em;
     font-weight: bold;
     color: var(--selectedMenuText, $fallback--text);
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index f4d294df..ff742823 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -37,19 +37,19 @@
 
   display: inline-block;
   position: relative;
-  width: 48px;
-  height: 48px;
+  inline-size: 48px;
+  block-size: 48px;
 
   &.-compact {
-    width: 32px;
-    height: 32px;
+    inline-size: 32px;
+    block-size: 32px;
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
   }
 
   .avatar {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     box-shadow: var(--_avatarShadowBox);
     border-radius: $fallback--avatarRadius;
     border-radius: var(--avatarRadius, $fallback--avatarRadius);
@@ -75,14 +75,14 @@
   }
 
   img {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
   }
 
   .bot-indicator {
     position: absolute;
-    bottom: 0;
-    right: 0;
+    inset-block-end: 0;
+    inset-inline-end: 0;
     margin: -0.2em;
     padding: 0.2em;
     background: rgba(127, 127, 127, 0.5);
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index f7bff63f..e3c6b816 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -49,7 +49,7 @@ export default {
     },
     classes () {
       return [{
-        'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
+        'user-card-rounded-t': this.rounded === 'top', // set border-start-start-radius and border-start-end-radius
         'user-card-rounded': this.rounded === true, // set border-radius for all sides
         'user-card-bordered': this.bordered === true // set border for all sides
       }]
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 07ab7bec..2c27b9d3 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -11,7 +11,8 @@
   }
 
   .panel-heading {
-    padding: .5em 0;
+    padding-block: .5em;
+    padding-inline: 0;
     text-align: center;
     box-shadow: none;
     background: transparent;
@@ -23,18 +24,18 @@
 
   .panel-body {
     word-wrap: break-word;
-    border-bottom-right-radius: inherit;
-    border-bottom-left-radius: inherit;
+    border-end-end-radius: inherit;
+    border-end-start-radius: inherit;
     // create new stacking context
     position: relative;
   }
 
   .background-image {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 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
@@ -42,8 +43,8 @@
     mask-composite: exclude;
     background-size: cover;
     mask-size: 100% 60%;
-    border-top-left-radius: calc(var(--panelRadius) - 1px);
-    border-top-right-radius: calc(var(--panelRadius) - 1px);
+    border-start-start-radius: calc(var(--panelRadius) - 1px);
+    border-start-end-radius: calc(var(--panelRadius) - 1px);
     background-color: var(--profileBg);
     z-index: -2;
 
@@ -67,18 +68,18 @@
     img {
       object-fit: contain;
       vertical-align: middle;
-      max-width: 100%;
-      max-height: 400px;
+      max-inline-size: 100%;
+      max-block-size: 400px;
     }
   }
 
   // Modifiers
 
   &-rounded-t {
-    border-top-left-radius: $fallback--panelRadius;
-    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
-    border-top-right-radius: $fallback--panelRadius;
-    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+    border-start-start-radius: $fallback--panelRadius;
+    border-start-start-radius: var(--panelRadius, $fallback--panelRadius);
+    border-start-end-radius: $fallback--panelRadius;
+    border-start-end-radius: var(--panelRadius, $fallback--panelRadius);
   }
 
   &-rounded {
@@ -97,17 +98,19 @@
 .user-info {
   color: $fallback--lightText;
   color: var(--lightText, $fallback--lightText);
-  padding: 0 26px;
+  padding-block: 0;
+  padding-inline: 26px;
 
   .container {
-    min-width: 0;
-    padding: 16px 0 6px;
+    min-inline-size: 0;
+    padding-block: 16px 6px;
+    padding-inline: 0;
     display: flex;
     align-items: flex-start;
-    max-height: 56px;
+    max-block-size: 56px;
 
     > * {
-      min-width: 0;
+      min-inline-size: 0;
     }
 
     .Avatar {
@@ -116,8 +119,8 @@
       --_avatarShadowInset: var(--avatarShadowInset);
 
       flex: 1 0 100%;
-      width: 56px;
-      height: 56px;
+      inline-size: 56px;
+      block-size: 56px;
       object-fit: cover;
     }
   }
@@ -128,10 +131,10 @@
 
     &-overlay {
       position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
+      inset-inline-start: 0;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      inset-block-end: 0;
       background-color: rgba(0, 0, 0, 0.3);
       display: flex;
       justify-content: center;
@@ -153,10 +156,12 @@
 
   .external-link-button, .edit-profile-button {
     cursor: pointer;
-    width: 2.5em;
+    inline-size: 2.5em;
     text-align: center;
-    margin: -0.5em 0;
-    padding: 0.5em 0;
+    margin-block: -0.5em;
+    margin-inline: 0;
+    padding-block: 0.5em;
+    padding-inline: 0;
 
     &:not(:hover) .icon {
       color: $fallback--lightText;
@@ -166,8 +171,8 @@
 
   .user-summary {
     display: block;
-    margin-left: 0.6em;
-    text-align: left;
+    margin-inline-start: 0.6em;
+    text-align: start;
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1 1 0;
@@ -188,7 +193,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
     flex: 1 1 auto;
-    margin-right: 1em;
+    margin-inline-end: 1em;
     font-size: 1.1em;
   }
 
@@ -198,11 +203,11 @@
     align-items: baseline;
 
     .lock-icon {
-      margin-left: 0.5em;
+      margin-inline-start: 0.5em;
     }
 
     .user-screen-name {
-      min-width: 1px;
+      min-inline-size: 1px;
       flex: 0 1 auto;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -211,9 +216,9 @@
     }
 
     .dailyAvg {
-      min-width: 1px;
+      min-inline-size: 1px;
       flex: 0 0 auto;
-      margin-left: 1em;
+      margin-inline-start: 1em;
       font-size: 0.7em;
       color: $fallback--text;
       color: var(--text, $fallback--text);
@@ -229,7 +234,7 @@
   }
 
   .user-meta {
-    margin-bottom: .15em;
+    margin-block-end: .15em;
     display: flex;
     align-items: baseline;
     line-height: 22px;
@@ -238,30 +243,31 @@
     .following, .requested_by {
       flex: 1 0 auto;
       margin: 0;
-      margin-bottom: .25em;
-      text-align: left;
+      margin-block-end: .25em;
+      text-align: start;
     }
 
     .highlighter {
       flex: 0 1 auto;
       display: flex;
       flex-wrap: wrap;
-      margin-right: -.5em;
+      margin-inline-end: -.5em;
       align-self: start;
 
       .userHighlightCl {
-        padding: 2px 10px;
+        padding-block: 2px;
+        padding-inline: 10px;
         flex: 1 0 auto;
       }
 
       .userHighlightSel {
-        padding-top: 0;
-        padding-bottom: 0;
+        padding-block-start: 0;
+        padding-block-end: 0;
         flex: 1 0 auto;
       }
 
       .userHighlightText {
-        width: 70px;
+        inline-size: 70px;
         flex: 1 0 auto;
       }
 
@@ -269,8 +275,8 @@
       .userHighlightText,
       .userHighlightSel {
         vertical-align: top;
-        margin-right: .5em;
-        margin-bottom: .25em;
+        margin-inline-end: .5em;
+        margin-block-end: .25em;
       }
     }
   }
@@ -278,12 +284,13 @@
     position: relative;
     display: flex;
     flex-flow: row wrap;
-    margin-right: -.75em;
+    margin-inline-end: -.75em;
 
     > * {
-      margin: 0 .75em .6em 0;
+      margin-block: 0 .6em;
+      margin-inline: 0 .75em;
       white-space: nowrap;
-      min-width: 95px;
+      min-inline-size: 95px;
     }
 
     button {
@@ -299,7 +306,8 @@
 .user-counts {
   display: flex;
   line-height:16px;
-  padding: .5em 1.5em 0em 1.5em;
+  padding-block: .5em 0em;
+  padding-inline: 1.5em 1.5em;
   text-align: center;
   justify-content: space-between;
   color: $fallback--lightText;
@@ -309,13 +317,16 @@
 
 .user-count {
   flex: 1 0 auto;
-  padding: .5em 0 .5em 0;
-  margin: 0 .5em;
+  padding-block: .5em .5em;
+  padding-inline: 0 0;
+  margin-block: 0;
+  margin-inline: .5em;
 
   h5 {
     font-size:1em;
     font-weight: bolder;
-    margin: 0 0 0.25em;
+    margin-block: 0 0.25em;
+    margin-inline: 0;
   }
   a {
     text-decoration: none;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 2eefbad8..543d9062 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -8,7 +8,7 @@
       :style="style"
       class="background-image"
     />
-    <div class="panel-heading -flexible-height">
+    <div class="panel-heading -flexible-block-size">
       <div class="user-info">
         <div class="container">
           <a
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index bdc3aa92..e235e057 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -63,12 +63,12 @@
     .user-list-names {
       display: flex;
       flex-direction: column;
-      margin-left: 0.5em;
-      min-width: 5em;
+      margin-inline-start: 0.5em;
+      min-inline-size: 5em;
 
       img {
-        width: 1em;
-        height: 1em;
+        inline-size: 1em;
+        block-size: 1em;
       }
     }
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index d16483e2..9e36887f 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -46,7 +46,7 @@
       >
         <textarea
           v-model="note"
-          class="resize-height"
+          class="resize-block-size"
           :placeholder="$t('user_card.note')"
           @input="setNote"
         />
@@ -181,17 +181,18 @@
   --currentPanelStack: 1;
 
   .user-profile-fields {
-    margin: 0 0.5em;
+    margin-block: 0;
+    margin-inline: 0.5em;
 
     img {
       object-fit: contain;
       vertical-align: middle;
-      max-width: 100%;
-      max-height: 400px;
+      max-inline-size: 100%;
+      max-block-size: 400px;
 
       &.emoji {
-        width: 18px;
-        height: 18px;
+        inline-size: 18px;
+        block-size: 18px;
       }
     }
 
@@ -205,16 +206,17 @@
       .user-profile-field-name {
         flex: 0 1 30%;
         font-weight: 500;
-        text-align: right;
+        text-align: end;
         color: var(--lightText);
-        min-width: 120px;
-        border-right: 1px solid var(--border, $fallback--border);
+        min-inline-size: 120px;
+        border-inline-end: 1px solid var(--border, $fallback--border);
       }
 
       .user-profile-field-value {
         flex: 1 1 70%;
         color: var(--text);
-        margin: 0 0 0 0.25em;
+        margin-block: 0 0;
+        margin-inline: 0.25em 0;
       }
 
       .user-profile-field-name, .user-profile-field-value {
@@ -222,7 +224,8 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
-        padding: 0.5em 1.5em;
+        padding-block: 0.5em;
+        padding-inline: 1.5em;
         box-sizing: border-box;
       }
     }
@@ -237,17 +240,19 @@
 
   .note {
     position: relative;
-    margin: 0.5em 0.75em;
+    margin-block: 0.5em;
+    margin-inline: 0.75em;
 
     textarea {
-      width: 100%;
+      inline-size: 100%;
     }
 
     .preview-spinner {
       position: absolute;
-      top: 0;
-      right: 0;
-      margin: 0.5em 0.25em;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin-block: 0.5em;
+      margin-inline: 0.25em;
     }
   }
 }
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 030ce2c4..6792a10b 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -71,53 +71,56 @@
 @import '../../_variables.scss';
 
 .user-reporting-panel {
-  width: 90vw;
-  max-width: 700px;
-  min-height: 20vh;
-  max-height: 80vh;
+  inline-size: 90vi;
+  max-inline-size: 700px;
+  min-block-size: 20vb;
+  max-block-size: 80vb;
 
   .panel-body {
     display: flex;
     flex-direction: column-reverse;
-    border-top: 1px solid;
+    border-block-start: 1px solid;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
     overflow: hidden;
   }
 
   &-left {
-    padding: 1.1em 0.7em 0.7em;
+    padding-block: 1.1em 0.7em;
+    padding-inline: 0.7em;
     line-height: var(--post-line-height);
     box-sizing: border-box;
 
     > div {
-      margin-bottom: 1em;
+      margin-block-end: 1em;
 
       &:last-child {
-        margin-bottom: 0;
+        margin-block-end: 0;
       }
     }
 
     p {
-      margin-top: 0;
+      margin-block-start: 0;
     }
 
     textarea.form-control {
       line-height: 16px;
       resize: none;
       overflow: hidden;
-      transition: min-height 200ms 100ms;
-      min-height: 44px;
-      width: 100%;
+      transition: min-block-size 200ms 100ms;
+      min-block-size: 44px;
+      inline-size: 100%;
     }
 
     .btn {
-      min-width: 10em;
-      padding: 0 2em;
+      min-inline-size: 10em;
+      padding-block: 0;
+      padding-inline: 2em;
     }
 
     .alert {
-      margin: 1em 0 0 0;
+      margin-block: 1em 0;
+      margin-inline: 0 0;
       line-height: 1.3em;
     }
   }
@@ -148,22 +151,22 @@
     }
 
     &-left {
-      width: 50%;
-      max-width: 320px;
-      border-right: 1px solid;
+      inline-size: 50%;
+      max-inline-size: 320px;
+      border-inline-end: 1px solid;
       border-color: $fallback--border;
       border-color: var(--border, $fallback--border);
       padding: 1.1em;
 
       > div {
-        margin-bottom: 2em;
+        margin-block-end: 2em;
       }
     }
 
     &-right {
-      width: 50%;
+      inline-size: 50%;
       flex: 1 1 auto;
-      margin-bottom: 12px;
+      margin-block-end: 12px;
     }
   }
 }
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index 518acd97..b56a924b 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -34,11 +34,12 @@
     vertical-align: middle;
   }
   .who-to-follow img {
-    width: 32px;
-    height: 32px;
+    inline-size: 32px;
+    block-size: 32px;
   }
   .who-to-follow {
-    padding: 0em 1em;
+    padding-block: 0em;
+    padding-inline: 1em;
     margin: 0px;
   }
   .who-to-follow-items {
@@ -46,11 +47,13 @@
     overflow: hidden;
     text-overflow: ellipsis;
     padding: 0px;
-    margin: 1em 0em;
+    margin-block: 1em;
+    margin-inline: 0em;
   }
   .who-to-follow-more {
     padding: 0px;
-    margin: 1em 0em;
+    margin-block: 1em;
+    margin-inline: 0em;
     text-align: center;
   }
 </style>
diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
index de86ed4a..ffb80849 100644
--- a/src/hocs/with_load_more/with_load_more.scss
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -5,9 +5,9 @@
   &-footer {
     padding: 10px;
     text-align: center;
-    border-top: 1px solid;
-    border-top-color: $fallback--border;
-    border-top-color: var(--border, $fallback--border);
+    border-block-start: 1px solid;
+    border-block-start-color: $fallback--border;
+    border-block-start-color: var(--border, $fallback--border);
 
     .error {
       font-size: 1rem;
diff --git a/src/panel.scss b/src/panel.scss
index 3a814269..9211bf2a 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -14,10 +14,10 @@
   &::after {
     content: '';
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     z-index: 5;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
@@ -44,9 +44,9 @@
 
 .panel-heading,
 .panel-footer {
-  --panel-heading-height-padding: 0.6em;
-  --__panel-heading-height: 3.2em;
-  --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding));
+  --panel-heading-block-size-padding: 0.6em;
+  --__panel-heading-block-size: 3.2em;
+  --__panel-heading-block-size-inner: calc(var(--__panel-heading-block-size) - 2 * var(--panel-heading-block-size-padding));
 
   position: relative;
   box-sizing: border-box;
@@ -58,12 +58,12 @@
   flex: none;
   background-size: cover;
   padding: 0.6em;
-  height: var(--__panel-heading-height);
-  line-height: var(--__panel-heading-height-inner);
+  block-size: var(--__panel-heading-block-size);
+  line-height: var(--__panel-heading-block-size-inner);
   z-index: 4;
 
-  &.-flexible-height {
-    --__panel-heading-height: auto;
+  &.-flexible-block-size {
+    --__panel-heading-block-size: auto;
 
     &::after,
     &::before {
@@ -81,17 +81,17 @@
 
   &.-sticky {
     position: sticky;
-    top: var(--navbar-height);
+    inset-block-start: var(--navbar-block-size);
   }
 
   &::after,
   &::before {
     content: '';
     position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inset-inline-start: 0;
     pointer-events: none;
   }
 
@@ -105,16 +105,16 @@
     overflow-x: hidden;
   }
 
-  &:not(.-flexible-height) {
+  &:not(.-flexible-block-size) {
     > .button-default,
     > .alert {
-      height: var(--__panel-heading-height-inner);
-      min-height: 0;
+      block-size: var(--__panel-heading-block-size-inner);
+      min-block-size: 0;
       box-sizing: border-box;
       margin: 0;
-      min-width: 1px;
-      padding-top: 0;
-      padding-bottom: 0;
+      min-inline-size: 1px;
+      padding-block-start: 0;
+      padding-block-end: 0;
       align-self: stretch;
     }
   }
@@ -123,8 +123,14 @@
 // TODO Should refactor panels into separate component and utilize slots
 
 .panel-heading {
-  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+  border-start-start-radius: $fallback--panelRadius;
+  border-start-end-radius: $fallback--panelRadius;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  border-start-start-radius: var(--panelRadius, $fallback--panelRadius);
+  border-start-end-radius: var(--panelRadius, $fallback--panelRadius);
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
   border-width: 0 0 1px 0;
   align-items: start;
   // panel theme
@@ -136,8 +142,14 @@
     background-color: $fallback--fg;
     background-color: var(--panel, $fallback--fg);
     z-index: -2;
-    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+    border-start-start-radius: $fallback--panelRadius;
+    border-start-end-radius: $fallback--panelRadius;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    border-start-start-radius: var(--panelRadius, $fallback--panelRadius);
+    border-start-end-radius: var(--panelRadius, $fallback--panelRadius);
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
     box-shadow: var(--panelHeaderShadow);
   }
 
@@ -158,7 +170,7 @@
     color: var(--faintLink, $fallback--faint);
   }
 
-  &:not(.-flexible-height) {
+  &:not(.-flexible-block-size) {
     > .button-default {
       flex-shrink: 0;
 
@@ -189,8 +201,14 @@
 }
 
 .panel-footer {
-  border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-  border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: $fallback--panelRadius;
+  border-end-end-radius: $fallback--panelRadius;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--panelRadius, $fallback--panelRadius);
+  border-end-end-radius: var(--panelRadius, $fallback--panelRadius);
   align-items: center;
   border-width: 1px 0 0 0;
   border-style: solid;
-- 
2.34.1


From 5d168fe6890f9200a527e116c7068832d0f791b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yh=C3=ABhtozr?= <conlang2012@outlook.com>
Date: Sat, 17 Dec 2022 18:50:51 +0900
Subject: [PATCH 2/5] writing mode: unintended class replace hotfix

---
 src/components/notifications/notifications.scss      | 2 +-
 src/components/post_status_form/post_status_form.vue | 6 +++---
 src/components/status/status.scss                    | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 09e277f6..fd960e0a 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -102,7 +102,7 @@
     white-space: nowrap;
   }
 
-  .notification-inline-end {
+  .notification-right {
     flex: 1;
     padding-inline-start: 0.8em;
     min-inline-size: 0;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 30004483..d18ee3da 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -230,7 +230,7 @@
       />
       <div
         ref="bottom"
-        class="form-block-end"
+        class="form-bottom"
       >
         <div class="form-bottom-left">
           <media-upload
@@ -349,7 +349,7 @@
     margin-block-end: 0.5em;
   }
 
-  .form-block-end {
+  .form-bottom {
     display: flex;
     justify-content: space-between;
     padding: 0.5em;
@@ -366,7 +366,7 @@
     }
   }
 
-  .form-block-end-left {
+  .form-bottom-left {
     display: flex;
     flex: 1;
     padding-inline-end: 7px;
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 8f38e65c..af44cdf9 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -133,7 +133,7 @@
     flex: 1 1 0;
   }
 
-  .heading-inline-start {
+  .heading-left {
     display: flex;
     min-inline-size: 0;
     flex-wrap: wrap;
@@ -147,7 +147,7 @@
     }
   }
 
-  .heading-inline-end {
+  .heading-right {
     display: flex;
     flex-shrink: 0;
 
-- 
2.34.1


From f3b1b4de7b70a84b90aaa0b32d1a3ba777a15edd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yh=C3=ABhtozr?= <conlang2012@outlook.com>
Date: Sat, 17 Dec 2022 18:51:21 +0900
Subject: [PATCH 3/5] writing mode: RTL functionality w/ CSS values debug

---
 src/App.vue                                      |  1 +
 src/components/dialog_modal/dialog_modal.vue     |  3 +++
 .../edit_status_modal/edit_status_modal.vue      |  2 +-
 src/components/emoji_picker/emoji_picker.scss    |  5 ++---
 src/components/mobile_nav/mobile_nav.vue         |  3 +++
 src/components/popover/popover.js                | 16 +++++++++++-----
 .../post_status_form/post_status_form.vue        |  4 ++--
 src/components/react_button/react_button.vue     |  3 +++
 src/components/side_drawer/side_drawer.vue       |  6 ++++++
 src/components/status/status.scss                |  2 +-
 src/components/sticker_picker/sticker_picker.vue |  3 +--
 src/components/timeline_menu/timeline_menu.vue   |  2 +-
 src/i18n/ar.json                                 |  3 +++
 src/i18n/en.json                                 |  3 +++
 src/i18n/fa.json                                 |  3 +++
 src/i18n/he.json                                 |  3 +++
 16 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 80ebb525..d80bfe93 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
   <div
     id="app-loaded"
     :style="bgStyle"
+    :dir="$t('_locale.dir')"
   >
     <div
       id="app_bg_wrapper"
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 4cbfea47..aef99390 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -58,6 +58,9 @@
   inline-size: max-content;
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
+  [dir="rtl"] & {
+    transform: translateX(50%);
+  }
 
   .dialog-modal-heading {
     .title {
diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/src/components/edit_status_modal/edit_status_modal.vue
index 5d34fee3..0228a8c2 100644
--- a/src/components/edit_status_modal/edit_status_modal.vue
+++ b/src/components/edit_status_modal/edit_status_modal.vue
@@ -41,7 +41,7 @@
     max-inline-size: 6.5em;
 
     .emoji-icon {
-      justify-content: right;
+      justify-content: end;
     }
   }
 }
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 58a2f2d6..611dc933 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -26,8 +26,7 @@
   position: absolute;
   inset-inline-end: 0;
   inset-inline-start: 0;
-  margin-block: 0;
-  margin-inline: !important;
+  margin: 0 !important;
   z-index: 100;
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
@@ -192,7 +191,7 @@
       align-items: center;
       flex-wrap: wrap;
       padding-inline-start: 5px;
-      justify-content: left;
+      justify-content: start;
 
       &-title {
         font-size: 0.85em;
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index ca437cc6..5eb48b5b 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -166,6 +166,9 @@
     &.-closed {
       transform: translateX(100%);
       box-shadow: none;
+      [dir="rtl"] & {
+        transform: translate(-100%);
+      }
     }
   }
 
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index a30a37c9..2a0798bf 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -53,6 +53,11 @@ const Popover = {
         return
       }
 
+      const viewport = { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }
+      const isRTL = this.$t('_locale.dir') == "rtl"
+      const inlineStartOf = (box) => isRTL ? viewport.width - box.right : box.left
+      const inlineEndOf = (box) => isRTL ? viewport.width - box.left : box.right
+
       // Popover will be anchored around this element, trigger ref is the container, so
       // its children are what are inside the slot. Expect only one v-slot:trigger.
       const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
@@ -61,7 +66,7 @@ const Popover = {
       const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
       const screenBox = anchorEl.getBoundingClientRect()
       // Screen position of the origin point for popover
-      const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
+      const origin = { x: inlineStartOf(screenBox) + screenBox.width * 0.5, y: screenBox.top }
       const content = this.$refs.content
       // Minor optimization, don't call a slow reflow call if we don't have to
       const parentBounds = this.boundTo &&
@@ -73,11 +78,11 @@ const Popover = {
       // What are the screen bounds for the popover? Viewport vs container
       // when using viewport, using default margin values to dodge the navbar
       const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
-        min: parentBounds.left + (margin.left || 0),
-        max: parentBounds.right - (margin.right || 0)
+        min: inlineStartOf(parentBounds) + (margin.left || 0),
+        max: inlineEndOf(parentBounds) - (margin.right || 0)
       } : {
         min: 0 + (margin.left || 10),
-        max: window.innerWidth - (margin.right || 10)
+        max: viewport.width - (margin.right || 10)
       }
 
       const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
@@ -122,12 +127,13 @@ const Popover = {
 
       const xOffset = (this.offset && this.offset.x) || 0
       const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
+      const translateXLogical = isRTL ? -translateX : translateX
 
       // Note, separate translateX and translateY avoids blurry text on chromium,
       // single translate or translate3d resulted in blurry text.
       this.styles = {
         opacity: 1,
-        transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
+        transform: `translateX(${Math.round(translateXLogical)}px) translateY(${Math.round(translateY)}px)`
       }
     },
     showPopover () {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d18ee3da..afd51cb3 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -471,7 +471,7 @@
   // Order is not necessary but a good indicator
   .media-upload-icon {
     order: 1;
-    justify-content: left;
+    justify-content: start;
   }
 
   .emoji-icon {
@@ -481,7 +481,7 @@
 
   .poll-icon {
     order: 3;
-    justify-content: right;
+    justify-content: end;
   }
 
   .error {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index b5fc89d3..482fbf3a 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -107,6 +107,9 @@
   .popover {
     transform: translateX(-64px) translateY(5px);
     min-inline-size: 70%;
+    [dir="rtl"] & {
+      transform: translateX(64px) translateY(5px);
+    }
   }
 }
 
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 1c6a3a1b..18475bd9 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -243,6 +243,9 @@
 .side-drawer-container-closed {
   transition-delay: 0.35s;
   transform: translate(-100%);
+  [dir="rtl"] & {
+    transform: translate(200%);
+  }
 }
 
 .side-drawer-darken {
@@ -317,6 +320,9 @@
 
 .side-drawer-closed {
   transform: translate(-100%);
+  [dir="rtl"] & {
+    transform: translate(200%);
+  }
 }
 
 .side-drawer-heading {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index af44cdf9..30902d05 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -310,7 +310,7 @@
     inline-size: 100%;
     display: flex;
     flex-wrap: wrap;
-    justify-content: left;
+    justify-content: start;
     margin-block-start: var(--status-margin, $status-margin);
 
     > * {
diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index 99d0eec5..fca627e9 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -41,8 +41,7 @@
   position: absolute;
   inset-inline-end: 0;
   inset-inline-start: 0;
-  margin-block: 0;
-  margin-inline: !important;
+  margin: 0 !important;
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--link;
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 76379047..16038825 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -32,7 +32,7 @@
   </Popover>
 </template>
 
-<script src="./timeline_menu.js" ></script>
+<script src="./timeline_menu.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/i18n/ar.json b/src/i18n/ar.json
index a2121309..4983cf2b 100644
--- a/src/i18n/ar.json
+++ b/src/i18n/ar.json
@@ -1,4 +1,7 @@
 {
+    "_locale": {
+        "dir": "rtl"
+    },
     "features_panel": {
         "media_proxy": "بروكسي الوسائط",
         "scope_options": "",
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 32785561..53f02780 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1,4 +1,7 @@
 {
+    "_locale": {
+        "dir": "ltr"
+    },
     "about": {
         "bubble_instances": "Local Bubble Instances",
         "bubble_instances_description": "Instances chosen by the admins to represent the local area of this instance",
diff --git a/src/i18n/fa.json b/src/i18n/fa.json
index fab982df..72a4fd1a 100644
--- a/src/i18n/fa.json
+++ b/src/i18n/fa.json
@@ -1,4 +1,7 @@
 {
+    "_locale": {
+        "dir": "rtl"
+    },
     "about": {
         "mrf": {
             "federation": "فدراسیون",
diff --git a/src/i18n/he.json b/src/i18n/he.json
index d508e5bc..06f5a02c 100644
--- a/src/i18n/he.json
+++ b/src/i18n/he.json
@@ -1,4 +1,7 @@
 {
+    "_locale": {
+        "dir": "rtl"
+    },
     "about": {
         "mrf": {
             "federation": "פדרציה",
-- 
2.34.1


From d3652a649b541bb9774461306d53984351a53d10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yh=C3=ABhtozr?= <conlang2012@outlook.com>
Date: Sun, 18 Dec 2022 00:29:34 +0900
Subject: [PATCH 4/5] writing mode: unintended class replace fix 2

---
 src/components/media_modal/media_modal.vue | 2 +-
 src/components/status/status.vue           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index ed0b1b54..ae5275a0 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -74,7 +74,7 @@
     >
       <FAIcon
         class="button-icon arrow-icon"
-        icon="chevron-inline-end"
+        icon="chevron-right"
       />
     </button>
     <button
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 919a2c54..4f76df84 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -148,7 +148,7 @@
             class="status-heading"
           >
             <div class="heading-name-row">
-              <div class="heading-inline-start">
+              <div class="heading-left">
                 <h4
                   v-if="status.user.name_html"
                   class="status-username"
-- 
2.34.1


From 5ab3b678da7addac2d15f82ced21970ebf34fbf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yh=C3=ABhtozr?= <conlang2012@outlook.com>
Date: Sun, 18 Dec 2022 18:21:01 +0900
Subject: [PATCH 5/5] writing mode: bidi exceptions

---
 src/App.scss                                 | 23 ++++++++++++++++++++
 src/components/color_input/color_input.vue   |  1 +
 src/components/font_control/font_control.vue |  1 +
 3 files changed, 25 insertions(+)

diff --git a/src/App.scss b/src/App.scss
index 3e2c5419..478c7916 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -844,3 +844,26 @@ option {
 .fade-leave-active {
   opacity: 0;
 }
+
+// Those containers are not affected by
+// external directionality.
+.site-name,
+.status-username,
+.account-name,
+.shortName,
+.userNameFull,
+.userName,
+.serverName,
+.StatusBody > .body,
+.user-card-bio,
+.search-result .hashtag a,
+.panel-body::before,
+.form-control#username:not(:placeholder-shown), .form-control#password,
+.emoji-search > .form-control,
+.form-post-subject, .form-post-subject + .emoji-picker-icon, .main-input,
+.name-changer#username, textarea.bio, .profile-fields input:not(:placeholder-shown),
+.name-changer#username + .emoji-picker-icon, textarea.bio + .emoji-picker-icon,
+input[type=email], input[type=password], input[type=number] {
+  unicode-bidi: isolate;
+  direction: initial;
+}
\ No newline at end of file
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index faf915d4..f5b6a05d 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -21,6 +21,7 @@
         :id="name + '-t'"
         class="textColor unstyled"
         type="text"
+        dir="ltr"
         :value="modelValue || fallback"
         :disabled="!present || disabled"
         @input="$emit('update:modelValue', $event.target.value)"
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index bc256f2b..4cdc63ae 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -43,6 +43,7 @@
       v-model="family"
       class="custom-font"
       type="text"
+      dir="ltr"
     >
   </div>
 </template>
-- 
2.34.1