writing mode: popover vertical further fix

src/App.scss

@@ -1,8 +1,9 @@
 // stylelint-disable rscss/class-format
 @import './_variables.scss';
+@import './_logical.scss';
 
 :root {
-  --navbar-height: 3.5rem;
+  --navbar-block-size: 3.5rem;
   --post-line-height: 1.4;
 }
 
@@ -19,9 +20,9 @@ body {
   color: var(--text, $fallback--text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  overscroll-behavior-y: none;
+  @include overscroll-behavior-block(none);
-  overflow-x: clip;
+  @include overflow-inline(clip);
-  overflow-y: scroll;
+  @include overflow-block(scroll);
 
   &.hidden {
     display: none;
@@ -126,7 +127,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 +136,7 @@ nav {
 }
 
 .column.-scrollable {
-  top: var(--navbar-height);
+  inset-block-start: var(--navbar-block-size);
   position: sticky;
 }
 
@@ -150,11 +151,11 @@ nav {
 
 .app-bg-wrapper {
   position: fixed;
-  height: 100%;
+  block-size: 100%;
-  top: var(--navbar-height);
+  inset-block-start: var(--navbar-block-size);
   z-index: -1000;
-  left: 0;
+  inset-inline-start: 0;
-  right: -20px;
+  inset-inline-end: -20px;
   background-size: cover;
   background-repeat: no-repeat;
   background-color: var(--wallpaper);
@@ -185,12 +186,13 @@ 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;
+  @include overflow-inline(clip);
 
   .column {
     --___columnMargin: var(--columnGap);
@@ -200,13 +202,15 @@ nav {
     box-sizing: border-box;
     grid-row-start: 1;
     grid-row-end: 1;
-    margin: 0 calc(var(--___columnMargin) / 2);
+    margin-block: 0;
-    padding: calc(var(--___columnMargin)) 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 +218,46 @@ nav {
     }
 
     &.-full-height {
-      margin-bottom: 0;
+      margin-block-end: 0;
-      padding-top: 0;
+      padding-block-start: 0;
-      padding-bottom: 0;
+      padding-block-end: 0;
     }
 
     &.-scrollable {
       --___paddingIncrease: calc(var(--columnGap) / 2);
 
       position: sticky;
-      top: var(--navbar-height);
+      inset-block-start: var(--navbar-block-size);
-      max-height: calc(100vh - var(--navbar-height));
+      max-block-size: calc(100vb - var(--navbar-block-size));
-      overflow-y: auto;
+      @include overflow-block(auto);
-      overflow-x: hidden;
+      @include overflow-inline(hidden);
-      margin-left: calc(var(--___paddingIncrease) * -1);
+      margin-inline-start: calc(var(--___paddingIncrease) * -1);
-      padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
+      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);
+          margin-inline-end: calc(var(--___paddingIncrease) * -1);
-          padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
+          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 +265,7 @@ nav {
     .column {
       .panel-heading.-sticky {
         position: relative;
-        top: 0;
+        inset-block-start: 0;
       }
     }
   }
@@ -289,16 +293,16 @@ nav {
   }
 
   &.-mobile {
-    grid-template-columns: 100vw;
+    grid-template-columns: 100vi;
     grid-template-areas: "content";
     padding: 0;
 
     .column {
-      margin-left: 0;
+      margin-inline-start: 0;
-      margin-right: 0;
+      margin-inline-end: 0;
-      padding-top: 0;
+      padding-block-start: 0;
-      margin-top: var(--navbar-height);
+      margin-block-start: var(--navbar-block-size);
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
 
     .panel-heading,
@@ -306,8 +310,8 @@ nav {
     .panel-heading::before,
     .panel,
     .panel::after {
-      border-top-left-radius: 0;
+      border-start-start-radius: 0;
-      border-top-right-radius: 0;
+      border-start-end-radius: 0;
     }
 
     #sidebar,
@@ -435,7 +439,7 @@ nav {
   }
 
   &.-fullwidth {
-    width: 100%;
+    inline-size: 100%;
   }
 
   &.-hover-highlight {
@@ -453,7 +457,7 @@ textarea,
     border-radius: 0;
     background: none;
     box-shadow: none;
-    height: unset;
+    block-size: unset;
   }
 
   --_padding: 0.5em;
@@ -476,7 +480,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 +520,12 @@ textarea,
       display: inline-block;
       content: '';
       transition: box-shadow 200ms;
-      width: 1.1em;
+      inline-size: 1.1em;
-      height: 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 +559,13 @@ textarea,
       display: inline-block;
       content: '✓';
       transition: color 200ms;
-      width: 1.1em;
+      inline-size: 1.1em;
-      height: 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,8 +578,8 @@ textarea,
     }
   }
 
-  &.resize-height {
+  &.resize-block-size {
-    resize: vertical;
+    @include resize(block);
   }
 }
 
@@ -593,6 +598,7 @@ option {
 
 .hide-number-spinner {
   -moz-appearance: textfield;
+  appearance: textfield;
 
   &[type=number]::-webkit-inner-spin-button,
   &[type=number]::-webkit-outer-spin-button {
@@ -603,7 +609,7 @@ option {
 
 .btn-block {
   display: block;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .btn-group {
@@ -616,13 +622,13 @@ option {
     flex: 1 1 auto;
 
     &:not(:last-child) {
-      border-top-right-radius: 0;
+      border-start-end-radius: 0;
-      border-bottom-right-radius: 0;
+      border-end-end-radius: 0;
     }
 
     &:not(:first-child) {
-      border-top-left-radius: 0;
+      border-start-start-radius: 0;
-      border-bottom-left-radius: 0;
+      border-end-start-radius: 0;
     }
   }
 }
@@ -641,10 +647,11 @@ option {
   box-sizing: border-box;
   display: inline-block;
   border-radius: 99px;
-  max-width: 10em;
+  max-inline-size: 10em;
-  min-width: 1.7em;
+  min-inline-size: 1.7em;
-  height: 1.3em;
+  block-size: 1.3em;
-  padding: 0.15em 0.15em;
+  padding-block: 0.15em;
+  padding-inline: 0.15em;
   vertical-align: middle;
   font-weight: normal;
   font-style: normal;
@@ -664,8 +671,10 @@ option {
 }
 
 .alert {
-  margin: 0 0.35em;
+  margin-block: 0;
-  padding: 0 0.25em;
+  margin-inline: 0.35em;
+  padding-block: 0;
+  padding-inline: 0.25em;
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
 
@@ -726,13 +735,13 @@ option {
 }
 
 .notice-dismissible {
-  padding-right: 4rem;
+  padding-inline-end: 4rem;
   position: relative;
 
   .dismiss {
     position: absolute;
-    top: 0;
+    inset-block-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     padding: 0.5em;
     color: inherit;
   }
@@ -746,7 +755,8 @@ option {
 
 .fa-old-padding {
   &.svg-inline--fa {
-    padding: 0 0.3em;
+    padding-block: 0;
+    padding-inline: 0.3em;
   }
 }
 
@@ -756,16 +766,22 @@ option {
   @media all and (min-width: 801px) {
     display: none;
   }
+  @media all and (min-height: 801px) {
+    [class^=#{$writing-mode-vertical}] & {
+      display: none;
+    }
+  }
 
   a {
     display: inline-block;
-    padding: 1em 0;
+    padding-block: 1em;
-    width: 100%;
+    padding-inline: 0;
+    inline-size: 100%;
   }
 }
 
 .btn.button-default {
-  min-height: 2em;
+  min-block-size: 2em;
 }
 
 .new-status-notification {
@@ -780,6 +796,11 @@ option {
     display: none;
   }
 }
+@media all and (max-height: 800px) {
+  [class^=#{$writing-mode-vertical}] .mobile-hidden {
+    display: none;
+  }
+}
 
 @keyframes spin {
   0% {

src/App.vue

@@ -2,6 +2,7 @@
   <div
     id="app-loaded"
     :style="bgStyle"
+    :dir="$t('_locale.dir')"
   >
     <div
       id="app_bg_wrapper"

src/_logical.scss

@@ -0,0 +1,44 @@
+$writing-mode-prefix: "writing-mode-";
+$writing-mode-horizontal: "#{$writing-mode-prefix}h";
+$writing-mode-vertical: "#{$writing-mode-prefix}v";
+$writing-mode-sideways: "#{$writing-mode-prefix}s";
+
+.#{$writing-mode-horizontal}tb { writing-mode: horizontal-tb; }
+.#{$writing-mode-vertical}rl { writing-mode: vertical-rl; }
+.#{$writing-mode-vertical}lr { writing-mode: vertical-lr; }
+
+$resize-translate: ("block": ("vertical", "horizontal"), "inline": ("horizontal", "vertical"));
+$axis-translate: ("block": ("y", "x"), "inline": ("x", "y"));
+
+@mixin resize($value) {
+  resize: $value;
+
+  @if map-has-key($resize-translate, $value) {
+    @supports not (resize: $value) {
+      resize: nth(map-get($resize-translate, $value), 1);
+      [class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-horizontal}]) &,
+      &[class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-horizontal}]) {
+        resize: nth(map-get($resize-translate, $value), 2);
+      }
+    }
+  }
+}
+
+@mixin xy($prop, $axis, $value) {
+  #{$prop}-#{$axis}: $value;
+
+  @if map-has-key($axis-translate, $axis) {
+    @supports not (#{$prop}-#{$axis}: $value) {
+      #{$prop}-#{nth(map-get($axis-translate, $axis), 1)}: $value;
+      [class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-horizontal}]) &,
+      &[class^=#{$writing-mode-prefix}]:not([class^=#{$writing-mode-horizontal}]) {
+        #{$prop}-#{nth(map-get($axis-translate, $axis), 2)}: $value;
+      }
+    }
+  }
+}
+
+@mixin overflow-block($value) { @include xy("overflow", "block", $value); }
+@mixin overflow-inline($value) { @include xy("overflow", "inline", $value); }
+@mixin overscroll-behavior-block($value) { @include xy("overscroll-behavior", "block", $value); }
+@mixin overscroll-behavior-inline($value) { @include xy("overscroll-behavior", "inline", $value); }

src/components/account_actions/account_actions.vue

@@ -110,9 +110,11 @@
 @import '../../_variables.scss';
 .AccountActions {
   .ellipsis-button {
-    width: 2.5em;
+    inline-size: 2.5em;
-    margin: -0.5em 0;
+    margin-block: -0.5em;
-    padding: 0.5em 0;
+    margin-inline: 0;
+    padding-block: 0.5em;
+    padding-inline: 0;
     text-align: center;
 
     &:not(:hover) .icon {

src/components/announcement/announcement.vue

@@ -102,14 +102,14 @@
 @import "../../variables";
 
 .announcement {
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
-  border-bottom-style: solid;
+  border-block-end-style: solid;
-  border-bottom-color: var(--border, $fallback--border);
+  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;
     }
   }
 }

src/components/announcement_editor/announcement_editor.vue

@@ -41,18 +41,20 @@
 <script src="./announcement_editor.js"></script>
 
 <style lang="scss">
+@import '../../_logical.scss';
+
 .announcement-editor {
   display: flex;
   align-items: stretch;
   flex-direction: column;
 
   .announcement-metadata {
-    margin-top: 0.5em;
+    margin-block-start: 0.5em;
   }
 
   .post-textarea {
-    resize: vertical;
+    @include resize(block);
-    height: 10em;
+    block-size: 10em;
     overflow: none;
     box-sizing: content-box;
   }

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

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>

src/components/attachment/attachment.scss

@@ -1,4 +1,5 @@
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .Attachment {
   display: inline-flex;
@@ -6,7 +7,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 +17,7 @@
 
   .attachment-wrapper {
     flex: 1 1 auto;
-    height: 200px;
+    block-size: 200px;
     position: relative;
     overflow: hidden;
   }
@@ -24,9 +25,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 +43,10 @@
 
     &.-static {
       position: absolute;
-      left: 0;
+      inset-inline-start: 0;
-      right: 0;
+      inset-inline-end: 0;
-      bottom: 0;
+      inset-block-end: 0;
-      padding-top: 0;
+      padding-block-start: 0;
       background: var(--popover);
       box-shadow: var(--popupShadow);
     }
@@ -53,19 +54,19 @@
 
   .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);
+    padding-block-end: var(--_padding);
-    height: calc(var(--post-line-height) * 1em);
+    block-size: calc(var(--post-line-height) * 1em);
-    min-height: calc(var(--post-line-height) * 1em);
+    min-block-size: calc(var(--post-line-height) * 1em);
     resize: none;
 
     &.scrollable-form {
-      overflow-y: auto;
+      @include overflow-block(auto);
     }
   }
 
@@ -77,14 +78,14 @@
   & .oembed-container {
     display: flex;
     justify-content: center;
-    width: 100%;
+    inline-size: 100%;
-    height: 100%;
+    block-size: 100%;
   }
 
   .image-container {
     .image {
-      width: 100%;
+      inline-size: 100%;
-      height: 100%;
+      block-size: 100%;
     }
   }
 
@@ -92,8 +93,8 @@
   & .video-container {
     & .flash,
     & video {
-      width: 100%;
+      inline-size: 100%;
-      height: 100%;
+      block-size: 100%;
       object-fit: contain;
       align-self: center;
     }
@@ -104,8 +105,8 @@
     align-items: flex-end;
 
     audio {
-      width: 100%;
+      inline-size: 100%;
-      height: 100%;
+      block-size: 100%;
     }
   }
 
@@ -114,15 +115,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);
+    inset-block-start: calc(50% - 32px);
-    left: 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 +135,10 @@
   .attachment-buttons {
     display: flex;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
-    top: 0;
+    inset-block-start: 0;
-    margin-top: 0.5em;
+    margin-block-start: 0.5em;
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
     z-index: 1;
 
     .attachment-button {
@@ -145,9 +146,9 @@
       border-radius: $fallback--tooltipRadius;
       border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
       text-align: center;
-      width: 2em;
+      inline-size: 2em;
-      height: 2em;
+      block-size: 2em;
-      margin-left: 0.5em;
+      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 +166,12 @@
   .oembed-container {
     line-height: 1.2em;
     flex: 1 0 100%;
-    width: 100%;
+    inline-size: 100%;
-    margin-right: 15px;
+    margin-inline-end: 15px;
     display: flex;
 
     img {
-      width: 100%;
+      inline-size: 100%;
     }
 
     .image {
@@ -178,7 +179,7 @@
       img {
         border: 0px;
         border-radius: 5px;
-        height: 100%;
+        block-size: 100%;
         object-fit: cover;
       }
     }
@@ -221,7 +222,7 @@
     color: var(--postLink, $fallback--link);
     overflow: hidden;
     white-space: nowrap;
-    height: auto;
+    block-size: auto;
     line-height: 1.5;
 
     &:not(.-editable) {
@@ -242,7 +243,7 @@
 
       .description-container {
         flex: 1;
-        padding-left: 0.5em;
+        padding-inline-start: 0.5em;
       }
 
       .attachment-buttons {
@@ -253,7 +254,7 @@
 
     a {
       display: inline-block;
-      max-width: 100%;
+      max-inline-size: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
     }

src/components/autosuggest/autosuggest.vue

@@ -25,21 +25,22 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .autosuggest {
   position: relative;
 
   &-input {
     display: block;
-    width: 100%;
+    inline-size: 100%;
   }
 
   &-results {
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
-    top: 100%;
+    inset-block-start: 100%;
-    right: 0;
+    inset-inline-end: 0;
-    max-height: 400px;
+    max-block-size: 400px;
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg);
     border-style: solid;
@@ -48,11 +49,11 @@
     border-color: var(--border, $fallback--border);
     border-radius: $fallback--inputRadius;
     border-radius: var(--inputRadius, $fallback--inputRadius);
-    border-top-left-radius: 0;
+    border-start-start-radius: 0;
-    border-top-right-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;
+    @include overflow-block(auto);
     z-index: 1;
   }
 }

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;
+      block-size: 24px;
-      width: 24px;
+      inline-size: 24px;
     }
   }
 }

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;
+    margin-inline-start: 0.7em;
-    text-align: left;
+    text-align: start;
     flex: 1;
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   &-user-name {
     img {
       object-fit: contain;
-      height: 16px;
+      block-size: 16px;
-      width: 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;
+    margin-inline-start: 0.7em;
-    min-width: 0;
+    min-inline-size: 0;
   }
 }
 </style>

src/components/block_card/block_card.vue

@@ -35,10 +35,10 @@
 
 <style lang="scss">
 .block-card-content-container {
-  margin-top: 0.5em;
+  margin-block-start: 0.5em;
-  text-align: right;
+  text-align: end;
   button {
-    width: 10em;
+    inline-size: 10em;
   }
 }
 </style>

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;
+    inset-inline-end: 0;
-    top: 0;
+    inset-block-start: 0;
     display: block;
     content: '✓';
     transition: color 200ms;
-    width: 1.1em;
+    inline-size: 1.1em;
-    height: 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>

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%;
+        block-size: 50%;
-        width: 50%;
+        inline-size: 50%;
       }
       &::after {
-        top: 0;
+        inset-block-start: 0;
-        left: 0;
+        inset-inline-start: 0;
       }
       &::before {
-        bottom: 0;
+        inset-block-end: 0;
-        right: 0;
+        inset-inline-end: 0;
       }
     }
   }

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

src/components/contrast_ratio/contrast_ratio.vue

@@ -88,17 +88,17 @@ export default {
   display: flex;
   justify-content: flex-end;
 
-  margin-top: -4px;
+  margin-block-start: -4px;
-  margin-bottom: 5px;
+  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>

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-block-end-width: 1px;
-    border-bottom-style: solid;
+    border-block-end-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
+    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);
+    margin-inline-start: var(--status-margin, $status-margin);
-    border-left: 2px solid var(--border, $fallback--border);
+    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);
+    padding-inline-start: var(--status-margin, $status-margin);
-    border-bottom-width: 1px;
+    border-block-end-width: 1px;
-    border-bottom-style: solid;
+    border-block-end-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
+    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-block-end-width: 1px;
-    border-bottom-style: solid;
+    border-block-end-style: solid;
-    border-bottom-color: var(--border, $fallback--border);
+    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-block-start-width: 1px;
-    border-top-style: solid;
+    border-block-start-style: solid;
-    border-top-color: var(--border, $fallback--border);
+    border-block-start-color: var(--border, $fallback--border);
   }
 
   /* expanded conversation in timeline */
   &.status-fadein.-expanded .thread-body {
-    border-left-width: 4px;
+    border-inline-start-width: 4px;
-    border-left-style: solid;
+    border-inline-start-style: solid;
-    border-left-color: $fallback--cRed;
+    border-inline-start-color: $fallback--cRed;
-    border-left-color: var(--cRed, $fallback--cRed);
+    border-inline-start-color: var(--cRed, $fallback--cRed);
-    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+    border-start-start-radius: 0;
-    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+    border-start-end-radius: 0;
-    border-bottom: 1px solid var(--border, $fallback--border);
+    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 {

src/components/desktop_nav/desktop_nav.scss

@@ -1,7 +1,8 @@
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .DesktopNav {
-  width: 100%;
+  inline-size: 100%;
 
   input {
     color: var(--inputTopbarText, var(--inputText));
@@ -13,13 +14,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 {
@@ -63,6 +65,11 @@
     @media all and (min-width: 800px) {
       opacity: 1 !important;
     }
+    @media all and (min-height: 800px) {
+      [class^=#{$writing-mode-vertical}] & {
+        opacity: 1 !important;
+      }
+    }
 
     .mask {
       mask-repeat: no-repeat;
@@ -71,27 +78,27 @@
       background-color: $fallback--fg;
       background-color: var(--topBarText, $fallback--fg);
       position: absolute;
-      top: 0;
+      inset-block-start: 0;
-      bottom: 0;
+      inset-block-end: 0;
-      left: 0;
+      inset-inline-start: 0;
-      right: 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;
+    margin-inline-start: 0.2em;
-    width: 2em;
+    inline-size: 2em;
-    height: 100%;
+    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 +116,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 +129,9 @@
     grid-area: nav-left;
 
     .favicon {
-      height: 28px;
+      block-size: 28px;
       vertical-align: middle;
-      padding-right: 5px;
+      padding-inline-end: 5px;
     }
   }
 
@@ -134,15 +141,15 @@
 
   .item {
     flex: 1;
-    line-height: var(--navbar-height);
+    line-height: var(--navbar-block-size);
-    height: var(--navbar-height);
+    block-size: var(--navbar-block-size);
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
 
     &.right {
       justify-content: flex-end;
-      text-align: right;
+      text-align: end;
     }
   }
 }

src/components/dialog_modal/dialog_modal.vue

@@ -30,33 +30,37 @@
 // 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;
+    inset-inline-end: 0;
-    top: 0;
+    inset-block-start: 0;
     background: rgba(27,31,35,.5);
     z-index: 2000;
   }
 }
 
 .dialog-modal.panel {
-  top: 0;
+  inset-block-start: 0;
-  left: 50%;
+  inset-inline-start: 50%;
-  max-height: 80vh;
+  max-block-size: 80vb;
-  max-width: 90vw;
+  max-inline-size: 90vi;
-  margin: 15vh auto;
+  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);
+  [dir="rtl"] & {
+    transform: translateX(50%);
+  }
 
   .dialog-modal-heading {
     .title {
@@ -66,7 +70,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 +79,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-block-start: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
+    border-block-start: 1px solid var(--border, $fallback--border);
     display: flex;
     justify-content: flex-end;
 
     button {
-      width: auto;
+      inline-size: auto;
-      margin-left: .5rem;
+      margin-inline-start: .5rem;
     }
   }
 }

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>

src/components/edit_status_modal/edit_status_modal.vue

@@ -28,20 +28,20 @@
 }
 .edit-form-modal-panel {
   flex-shrink: 0;
-  margin-top: 25%;
+  margin-block-start: 25%;
-  margin-bottom: 2em;
+  margin-block-end: 2em;
-  width: 100%;
+  inline-size: 100%;
-  max-width: 700px;
+  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;
+      justify-content: end;
     }
   }
 }

src/components/emoji_input/emoji_input.js

@@ -7,6 +7,9 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faSmileBeam
 } from '@fortawesome/free-regular-svg-icons'
+import {
+  getViewport, isVertical, isVerticalRL, blockSizeOf, offsetBlockSizeOf, blockEndOf, offsetBlockEndOf
+} from '../../lib/logical_dimensions'
 
 library.add(
   faSmileBeam
@@ -321,42 +324,53 @@ const EmojiInput = {
     },
     scrollIntoView () {
       const rootRef = this.$refs['picker'].$el
-      /* Scroller is either `window` (replies in TL), sidebar (main post form,
+      /* Scroller is either HTML (replies in TL), sidebar (main post form,
-       * replies in notifs) or mobile post form. Note that getting and setting
+       * replies in notifs) or mobile post form.
-       * scroll is different for `Window` and `Element`s
        */
       const scrollerRef = this.$el.closest('.sidebar-scroller') ||
             this.$el.closest('.post-form-modal-view') ||
-            window
+            document.documentElement
-      const currentScroll = scrollerRef === window
+      const viewport = getViewport()
-        ? scrollerRef.scrollY
+      const isVrt = isVertical()
+      const isVRL = isVerticalRL()
+      const currentScroll = isVrt
+        ? scrollerRef.scrollLeft
         : scrollerRef.scrollTop
-      const scrollerHeight = scrollerRef === window
+      const scrollerHeight = scrollerRef === document.documentElement
-        ? scrollerRef.innerHeight
+        ? blockSizeOf(viewport)
-        : scrollerRef.offsetHeight
+        : offsetBlockSizeOf(scrollerRef)
 
       const scrollerBottomBorder = currentScroll + scrollerHeight
       // We check where the bottom border of root element is, this uses findOffset
       // to find offset relative to scrollable container (scroller)
-      const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top
+      const offset = findOffset(rootRef, scrollerRef)
+      const rootBottomBorder = isVRL ? offset.left : offsetBlockSizeOf(rootRef) + (isVrt ? offset.left : offset.top)
 
       const bottomDelta = Math.max(0, rootBottomBorder - scrollerBottomBorder)
       // could also check top delta but there's no case for it
       const targetScroll = currentScroll + bottomDelta
 
-      if (scrollerRef === window) {
+      if (scrollerRef === document.documentElement) {
-        scrollerRef.scroll(0, targetScroll)
+        if (isVrt) {
+          window.scroll(targetScroll, 0)
+        } else {
+          window.scroll(0, targetScroll)
+        }
       } else {
-        scrollerRef.scrollTop = targetScroll
+        if (isVrt) {
+          scrollerRef.scrollLeft = targetScroll
+        } else {
+          scrollerRef.scrollTop = targetScroll
+        }
       }
 
       this.$nextTick(() => {
-        const { offsetHeight } = this.input
+        const offsetHeight = offsetBlockSizeOf(this.input)
         const { picker } = this.$refs
-        const pickerBottom = picker.$el.getBoundingClientRect().bottom
+        const pickerBottom = blockEndOf(picker.$el.getBoundingClientRect())
-        if (pickerBottom > window.innerHeight) {
+        if (pickerBottom > blockSizeOf(viewport)) {
-          picker.$el.style.top = 'auto'
+          picker.$el.style.insetBlockStart = 'auto'
-          picker.$el.style.bottom = offsetHeight + 'px'
+          picker.$el.style.insetBlockEnd = offsetHeight + 'px'
         }
       })
     },
@@ -482,24 +496,24 @@ const EmojiInput = {
       if (!panel) return
       const picker = this.$refs.picker.$el
       const panelBody = this.$refs['panel-body']
-      const { offsetHeight, offsetTop } = this.input
+      const offsetBottom = offsetBlockEndOf(this.input)
-      const offsetBottom = offsetTop + offsetHeight
 
       this.setPlacement(panelBody, panel, offsetBottom)
       this.setPlacement(picker, picker, offsetBottom)
     },
+    // the argument offsetBottom actually receives logical offset block end position
     setPlacement (container, target, offsetBottom) {
       if (!container || !target) return
       if (this.placement === 'bottom' || (this.placement === 'auto' && !this.overflowsBottom(container))) {
-        target.style.top = offsetBottom + 'px'
+        target.style.insetBlockStart = offsetBottom + 'px'
-        target.style.bottom = 'auto'
+        target.style.insetBlockEnd = 'auto'
       } else {
-        target.style.top = 'auto'
+        target.style.insetBlockStart = 'auto'
-        target.style.bottom = this.input.offsetHeight + 'px'
+        target.style.insetBlockEnd = offsetBlockSizeOf(this.input) + 'px'
       }
     },
     overflowsBottom (el) {
-      return el.getBoundingClientRect().bottom > window.innerHeight
+      return blockEndOf(el.getBoundingClientRect()) > blockSizeOf(getViewport())
     }
   }
 }

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;
+    inset-block-start: 0;
-    right: 0;
+    inset-inline-end: 0;
-    margin: .2em .25em;
+    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;
+      padding-block: 0.2em;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+      padding-inline: 0.4em;
-      height: 32px;
+      border-block-end: 1px solid rgba(0, 0, 0, 0.4);
+      block-size: 32px;
 
       .image {
-        width: 32px;
+        inline-size: 32px;
-        height: 32px;
+        block-size: 32px;
         line-height: 32px;
         text-align: center;
         font-size: 32px;
 
-        margin-right: 4px;
+        margin-inline-end: 4px;
 
         img {
-          width: 32px;
+          inline-size: 32px;
-          height: 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;

src/components/emoji_picker/emoji_picker.js

@@ -7,6 +7,7 @@ import {
   faSmileBeam
 } from '@fortawesome/free-solid-svg-icons'
 import { trim, escapeRegExp, startCase } from 'lodash'
+import { isVertical, isVerticalRL, offsetBlockEndOf, offsetBlockSizeOf, offsetBlockStartOf, scrollBlockSizeOf, scrollBlockStartMaxSizeOf, scrollBlockStartOf } from '../../lib/logical_dimensions'
 
 library.add(
   faBoxOpen,
@@ -64,16 +65,23 @@ const EmojiPicker = {
     },
     onWheel (e) {
       e.preventDefault()
-      this.$refs['emoji-tabs'].scrollBy(e.deltaY, 0)
+      if (isVertical()) {
+        this.$refs['emoji-tabs'].scrollBy(0, (isVerticalRL() ? -1 : 1) * e.deltaY)
+      } else {
+        this.$refs['emoji-tabs'].scrollBy(e.deltaY, 0)
+      }
     },
     highlight (key) {
       this.setShowStickers(false)
       this.activeGroup = key
     },
     updateScrolledClass (target) {
-      if (target.scrollTop <= 5) {
+      const scrollStart = scrollBlockStartOf(target)
+      if (Math.abs(scrollStart) <= 5) {
         this.groupsScrolledClass = 'scrolled-top'
-      } else if (target.scrollTop >= target.scrollTopMax - 5) {
+      // Element.scrollTopMax is not on the standard track
+      // } else if (target.scrollTop >= target.scrollTopMax - 5) {
+      } else if (Math.abs(scrollStart) >= scrollBlockStartMaxSizeOf(target) - 5) {
         this.groupsScrolledClass = 'scrolled-bottom'
       } else {
         this.groupsScrolledClass = 'scrolled-middle'
@@ -82,11 +90,11 @@ const EmojiPicker = {
     triggerLoadMore (target) {
       const ref = this.$refs['group-end-custom']
       if (!ref) return
-      const bottom = ref.offsetTop + ref.offsetHeight
+      const bottom = offsetBlockEndOf(ref)
 
-      const scrollerBottom = target.scrollTop + target.clientHeight
+      const scrollerBottom = Math.abs(scrollBlockStartOf(target)) + scrollBlockSizeOf(target)
-      const scrollerTop = target.scrollTop
+      const scrollerTop = Math.abs(scrollBlockStartOf(target))
-      const scrollerMax = target.scrollHeight
+      const scrollerMax = scrollBlockSizeOf(target)
 
       // Loads more emoji when they come into view
       const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
@@ -99,11 +107,11 @@ const EmojiPicker = {
       }
     },
     scrolledGroup (target) {
-      const top = target.scrollTop + 5
+      const top = Math.abs(scrollBlockStartOf(target)) + 5
       this.$nextTick(() => {
         this.emojisView.forEach(group => {
           const ref = this.$refs['group-' + group.id]
-          if (ref.offsetTop <= top) {
+          if (offsetBlockStartOf(ref) <= top) {
             this.activeGroup = group.id
           }
         })

src/components/emoji_picker/emoji_picker.scss

@@ -1,22 +1,37 @@
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .Notification {
   .emoji-picker {
-    min-width: 160%;
+    min-inline-size: 160%;
-    width: 150%;
+    inline-size: 150%;
     overflow: hidden;
-    left: -70%;
+    inset-inline-start: -70%;
-    max-width: 100%;
+    max-inline-size: 100%;
     @media (min-width: 800px) and (max-width: 1300px) {
-      left: -50%;
+      inset-inline-start: -50%;
-      min-width: 50%;
+      min-inline-size: 50%;
-      max-width: 130%;
+      max-inline-size: 130%;
+    }
+    @media (min-height: 800px) and (max-height: 1300px) {
+      [class^=#{$writing-mode-vertical}] & {
+        inset-inline-start: -50%;
+        min-inline-size: 50%;
+        max-inline-size: 130%;
+      }
     }
 
     @media (max-width: 800px) {
-      left: -10%;
+      inset-inline-start: -10%;
-      min-width: 50%;
+      min-inline-size: 50%;
-      max-width: 130%;
+      max-inline-size: 130%;
+    }
+    @media (max-height: 800px) {
+      [class^=#{$writing-mode-vertical}] & {
+        inset-inline-start: -10%;
+        min-inline-size: 50%;
+        max-inline-size: 130%;
+      }
     }
   }
 }
@@ -24,8 +39,8 @@
   display: flex;
   flex-direction: column;
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
-  left: 0;
+  inset-inline-start: 0;
   margin: 0 !important;
   z-index: 100;
   background-color: $fallback--bg;
@@ -50,20 +65,21 @@
   }
 
   .keep-open-label {
-    padding: 0 7px;
+    padding-block: 0;
+    padding-inline: 7px;
     display: flex;
   }
 
   .heading {
-    margin-top: 10px;
+    margin-block-start: 10px;
-    height: 4.8em;
+    block-size: 4.8em;
   }
 
   .content {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
-    min-height: 0px;
+    min-block-size: 0px;
   }
 
   .emoji-tabs {
@@ -71,25 +87,24 @@
   }
 
   .emoji-groups {
-    min-height: 200px;
+    min-block-size: 200px;
   }
 
   .additional-tabs {
-    border-left: 1px solid;
+    border-inline-start: 1px solid;
-    border-left-color: $fallback--icon;
+    border-inline-start-color: $fallback--icon;
-    border-left-color: var(--icon, $fallback--icon);
+    border-inline-start-color: var(--icon, $fallback--icon);
-    padding-left: 7px;
+    padding-inline-start: 7px;
     flex: 0 0 auto;
   }
 
   .additional-tabs,
   .emoji-tabs {
-    position: absolute;
     display: block;
     flex-wrap: nowrap;
 
     overflow: auto;
-    width: 100%;
+    inline-size: 100%;
 
     white-space: nowrap;
 
@@ -98,14 +113,14 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 32px;
+      inline-size: 32px;
-      height: 32px;
+      block-size: 32px;
       padding: .4em;
       cursor: pointer;
 
       img {
-        max-width: 100%;
+        max-inline-size: 100%;
-        max-height: 100%;
+        max-block-size: 100%;
         object-fit: contain;
       }
 
@@ -119,7 +134,7 @@
       }
 
       &.active {
-        border-bottom: 4px solid;
+        border-block-end: 4px solid;
 
         svg {
           color: $fallback--lightText;
@@ -142,7 +157,7 @@
       display: flex;
       flex-direction: column;
       flex: 1 1 auto;
-      min-height: 0;
+      min-block-size: 0;
 
       &.hidden {
         opacity: 0;
@@ -158,7 +173,7 @@
       flex: 0 0 auto;
 
       input {
-        width: 100%;
+        inline-size: 100%;
       }
     }
 
@@ -175,12 +190,33 @@
       // Autoprefixed seem to ignore this one, and also syntax is different
       -webkit-mask-composite: xor;
       mask-composite: exclude;
+
+      .#{$writing-mode-vertical}lr & {
+        mask: linear-gradient(to left, white 0, transparent 100%) right no-repeat,
+              linear-gradient(to right, white 0, transparent 100%) left no-repeat,
+              linear-gradient(to left, white, white);
+        mask-size: 20px 100%, 20px 100%, auto;
+        mask-composite: exclude;
+      }
+      .#{$writing-mode-vertical}rl & {
+        mask: linear-gradient(to right, white 0, transparent 100%) left no-repeat,
+              linear-gradient(to left, white 0, transparent 100%) right no-repeat,
+              linear-gradient(to right, white, white);
+        mask-size: 20px 100%, 20px 100%, auto;
+        mask-composite: exclude;
+      }
       &.scrolled {
         &-top {
           mask-size: 100% 20px, 100% 0, auto;
+          [class^=#{$writing-mode-vertical}] & {
+            mask-size: 20px 100%, 0 100%, auto;
+          }
         }
         &-bottom {
           mask-size: 100% 0, 100% 20px, auto;
+          [class^=#{$writing-mode-vertical}] & {
+            mask-size: 0 100%, 20px 100%, auto;
+          }
         }
       }
     }
@@ -189,12 +225,12 @@
       display: flex;
       align-items: center;
       flex-wrap: wrap;
-      padding-left: 5px;
+      padding-inline-start: 5px;
-      justify-content: left;
+      justify-content: start;
 
       &-title {
         font-size: 0.85em;
-        width: 100%;
+        inline-size: 100%;
         margin: 0;
 
         &.disabled {
@@ -204,8 +240,8 @@
     }
 
     &-item {
-      width: 32px;
+      inline-size: 32px;
-      height: 32px;
+      block-size: 32px;
       box-sizing: border-box;
       display: flex;
       font-size: 32px;
@@ -217,8 +253,8 @@
 
       img {
         object-fit: contain;
-        max-width: 100%;
+        max-inline-size: 100%;
-        max-height: 100%;
+        max-block-size: 100%;
       }
     }
 

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;
+  padding-block: 0;
-  margin-right: 0.5em;
+  padding-inline: 0.5em;
-  margin-top: 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;
+    inline-size: 2.55em !important;
-    margin-right: 0.25em;
+    margin-inline-end: 0.25em;
   }
   &:focus {
     outline: none;
@@ -81,9 +82,10 @@
 }
 
 .emoji-reaction-expand {
-  padding: 0 0.5em;
+  padding-block: 0;
-  margin-right: 0.5em;
+  padding-inline: 0.5em;
-  margin-top: 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-inline-start: -1px; // offset the border, can't use inset shadows either
-  margin-right: calc(0.5em - 1px);
+  margin-inline-end: calc(0.5em - 1px);
 }
 
 </style>

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 {

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 {

src/components/flash/flash.vue

@@ -45,18 +45,18 @@
 @import '../../_variables.scss';
 .Flash {
   display: inline-block;
-  width: 100%;
+  inline-size: 100%;
-  height: 100%;
+  block-size: 100%;
   position: relative;
 
   .player {
-    height: 100%;
+    block-size: 100%;
-    width: 100%;
+    inline-size: 100%;
   }
 
   .placeholder {
-    height: 100%;
+    block-size: 100%;
-    width: 100%;
+    inline-size: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -65,7 +65,7 @@
   }
 
   .hider {
-    top: 0;
+    inset-block-start: 0;
   }
 
   .label {

src/components/follow_card/follow_card.vue

@@ -46,15 +46,16 @@
   }
 
   &-button {
-    margin-top: 0.5em;
+    margin-block-start: 0.5em;
-    padding: 0 1.5em;
+    padding-block: 0;
-    margin-left: 1em;
+    padding-inline: 1.5em;
+    margin-inline-start: 1em;
   }
 
   &-follow-button {
-    margin-top: 0.5em;
+    margin-block-start: 0.5em;
-    margin-left: auto;
+    margin-inline-start: auto;
-    width: 10em;
+    inline-size: 10em;
   }
 }
 </style>

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-block-start: 0.5em;
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
     flex: 1 1;
-    max-width: 12em;
+    max-inline-size: 12em;
-    min-width: 8em;
+    min-inline-size: 8em;
 
     &:last-child {
-      margin-right: 0;
+      margin-inline-end: 0;
     }
   }
 }

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-start-end-radius: 0;
-      border-bottom-right-radius: 0;
+      border-end-end-radius: 0;
     }
     .custom-font {
-      border-top-left-radius: 0;
+      border-start-start-radius: 0;
-      border-bottom-left-radius: 0;
+      border-end-start-radius: 0;
     }
   }
 }

src/components/gallery/gallery.js

@@ -89,9 +89,9 @@ const Gallery = {
     },
     rowStyle (row) {
       if (row.audio) {
-        return { 'padding-bottom': '25%' } // fixed reduced height for audio
+        return { 'padding-block-end': '25%' } // fixed reduced height for audio
       } else if (!row.minimal && !row.grid) {
-        return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
+        return { 'padding-block-end': `${(100 / (row.items.length + 0.6))}%` }
       }
     },
     itemStyle (id, row) {

src/components/gallery/gallery.vue

@@ -87,6 +87,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .Gallery {
   .gallery-rows {
@@ -96,18 +97,18 @@
 
   .gallery-row {
     position: relative;
-    height: 0;
+    block-size: 0;
-    width: 100%;
+    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,
@@ -116,6 +117,18 @@
       /* Autoprefixed seem to ignore this one, and also syntax is different */
       -webkit-mask-composite: xor;
       mask-composite: exclude;
+      .#{$writing-mode-vertical}lr & {
+        mask:
+          linear-gradient(to left, white, transparent) right/70px 100% no-repeat,
+          linear-gradient(to left, white, white);
+        mask-composite: exclude;
+      }
+      .#{$writing-mode-vertical}rl & {
+        mask:
+          linear-gradient(to right, white, transparent) left/70px 100% no-repeat,
+          linear-gradient(to right, white, white);
+        mask-composite: exclude;
+      }
     }
   }
 
@@ -135,14 +148,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 +165,18 @@
 
   .gallery-row-inner {
     position: absolute;
-    top: 0;
+    inset-block-start: 0;
-    left: 0;
+    inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
-    bottom: 0;
+    inset-block-end: 0;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     align-content: stretch;
 
     &.-grid {
-      width: 100%;
+      inline-size: 100%;
-      height: auto;
+      block-size: auto;
       position: relative;
       display: grid;
       grid-column-gap: 0.5em;
@@ -176,12 +190,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;
     }

src/components/global_notice_list/global_notice_list.vue

@@ -29,8 +29,8 @@
 
 .global-notice-list {
   position: fixed;
-  top: 50px;
+  inset-block-start: 50px;
-  width: 100%;
+  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;
+    inline-size: 40em;
-    max-width: calc(100% - 3em);
+    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;
     }

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

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;
+    inline-size: 120px;
-    max-width: 25%;
+    max-inline-size: 25%;
     img {
-      width: 100%;
+      inline-size: 100%;
-      height: 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;

src/components/list/list.vue

@@ -39,9 +39,9 @@ export default {
 
 .list {
   &-item:not(:last-child) {
-    border-bottom: 1px solid;
+    border-block-end: 1px solid;
-    border-bottom-color: $fallback--border;
+    border-block-end-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
+    border-block-end-color: var(--border, $fallback--border);
   }
 
   &-empty-content {

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 {

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 {

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>

src/components/local_bubble_panel/local_bubble_panel.scss

@@ -2,20 +2,20 @@
   margin: 1em;
 
   table {
-    width:100%;
+    inline-size:100%;
-    text-align: left;
+    text-align: start;
-    padding-left:10px;
+    padding-inline-start:10px;
-    padding-bottom:20px;
+    padding-block-end:20px;
 
     th, td {
-      width: 180px;
+      inline-size: 180px;
-      max-width: 360px;
+      max-inline-size: 360px;
       overflow:  hidden;
-      vertical-align: text-top;
+      vertical-align: text-block-start;
     }
 
     th+th, td+td {
-      width: auto;
+      inline-size: auto;
     }
   }
 }

src/components/login_form/login_form.vue

@@ -101,8 +101,8 @@
   padding: 0.6em;
 
   .btn {
-    min-height: 2em;
+    min-block-size: 2em;
-    width: 10em;
+    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 {

src/components/media_modal/media_modal.vue

@@ -115,9 +115,11 @@
 <script src="./media_modal.js"></script>
 
 <style lang="scss">
-$modal-view-button-icon-height: 3em;
+@import '../../_logical.scss';
-$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 +158,16 @@ $modal-view-button-icon-margin: 0.5em;
     overflow: hidden;
     align-items: center;
     flex-direction: column;
-    max-width: 100%;
+    max-inline-size: 100%;
-    max-height: 100%;
+    max-block-size: 100%;
-    width: 100%;
+    inline-size: 100%;
-    height: 100%;
+    block-size: 100%;
     flex-grow: 1;
     justify-content: center;
 
     &-inner {
-      width: 100%;
+      inline-size: 100%;
-      height: 100%;
+      block-size: 100%;
       flex-grow: 1;
       display: flex;
       flex-direction: column;
@@ -178,24 +180,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;
+    @include overflow-block(auto);
-    min-height: 1em;
+    min-block-size: 1em;
-    max-width: 500px;
+    max-inline-size: 500px;
-    max-height: 9.5em;
+    max-block-size: 9.5em;
     word-break: break-word;
     white-space: pre-line;
   }
 
   .modal-image {
-    max-width: 100%;
+    max-inline-size: 100%;
-    max-height: 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 +208,8 @@ $modal-view-button-icon-margin: 0.5em;
   }
 
   .loading-spinner {
-    width: 100%;
+    inline-size: 100%;
-    height: 100%;
+    block-size: 100%;
     position: absolute;
     pointer-events: none;
     display: flex;
@@ -228,15 +231,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;
+    block-size: $modal-view-button-icon-block-size;
-    width: $modal-view-button-icon-width;
+    inline-size: $modal-view-button-icon-block-size;
 
     .button-icon {
       position: absolute;
-      height: $modal-view-button-icon-height;
+      block-size: $modal-view-button-icon-block-size;
-      width: $modal-view-button-icon-width;
+      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 +249,42 @@ $modal-view-button-icon-margin: 0.5em;
   .modal-view-button-arrow {
     position: absolute;
     display: block;
-    top: 50%;
+    inset-block-start: 50%;
-    margin-top: $modal-view-button-icon-half-height;
+    margin-block-start: $modal-view-button-icon-half-block-size;
-    width: $modal-view-button-icon-width;
+    inline-size: $modal-view-button-icon-block-size;
-    height: $modal-view-button-icon-height;
+    block-size: $modal-view-button-icon-block-size;
 
     .arrow-icon {
       position: absolute;
-      top: 0;
+      inset-block-start: 0;
-      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);
     }
 
     &--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;
+    inset-block-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     .button-icon {
-      top: $modal-view-button-icon-margin;
+      inset-block-start: $modal-view-button-icon-margin;
-      right: $modal-view-button-icon-margin;
+      inset-inline-end: $modal-view-button-icon-margin;
     }
   }
 }

src/components/mention_link/mention_link.scss

@@ -15,11 +15,11 @@
 
   .mention-avatar {
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-    width: 1.5em;
+    inline-size: 1.5em;
-    height: 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%;
+    inset-block-start: 100%;
-    left: 0;
+    inset-inline-start: 0;
-    height: 100%;
+    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;
     }

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

src/components/mobile_nav/mobile_nav.vue

@@ -95,14 +95,15 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .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 +111,7 @@
   }
 
   .mobile-inner-nav {
-    width: 100%;
+    inline-size: 100%;
     display: flex;
     align-items: center;
   }
@@ -118,13 +119,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 +138,24 @@
 
   .alert-dot {
     border-radius: 100%;
-    height: 8px;
+    block-size: 8px;
-    width: 8px;
+    inline-size: 8px;
     position: absolute;
-    left: calc(50% - 4px);
+    inset-inline-start: calc(50% - 4px);
-    top: calc(50% - 4px);
+    inset-block-start: calc(50% - 4px);
-    margin-left: 6px;
+    margin-inline-start: 6px;
-    margin-top: -6px;
+    margin-block-start: -6px;
     background-color: $fallback--cRed;
     background-color: var(--badgeNotification, $fallback--cRed);
   }
 
   .mobile-notifications-drawer {
-    width: 100%;
+    inline-size: 100%;
-    height: 100vh;
+    block-size: 100vb;
-    overflow-x: hidden;
+    @include overflow-inline(hidden);
     position: fixed;
-    top: 0;
+    inset-block-start: 0;
-    left: 0;
+    inset-inline-start: 0;
     box-shadow: 1px 1px 4px rgba(0,0,0,.6);
     box-shadow: var(--panelShadow);
     transition-property: transform;
@@ -164,6 +167,9 @@
     &.-closed {
       transform: translateX(100%);
       box-shadow: none;
+      [dir="rtl"] & {
+        transform: translate(-100%);
+      }
     }
   }
 
@@ -172,8 +178,8 @@
     align-items: center;
     justify-content: space-between;
     z-index: 1;
-    width: 100%;
+    inline-size: 100%;
-    height: 50px;
+    block-size: 50px;
     line-height: 50px;
     position: absolute;
     color: var(--topBarText);
@@ -184,16 +190,16 @@
 
     .title {
       font-size: 1.3em;
-      margin-left: 0.6em;
+      margin-inline-start: 0.6em;
     }
   }
 
   .mobile-notifications {
-    margin-top: 50px;
+    margin-block-start: 50px;
-    width: 100vw;
+    inline-size: 100vi;
-    height: calc(100vh - var(--navbar-height));
+    block-size: calc(100vb - var(--navbar-block-size));
-    overflow-x: hidden;
+    @include overflow-inline(hidden);
-    overflow-y: scroll;
+    @include overflow-block(scroll);
 
     color: $fallback--text;
     color: var(--text, $fallback--text);

src/components/mobile_post_status_button/mobile_post_status_button.vue

@@ -13,15 +13,16 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .MobilePostButton {
   &.button-default {
-    width: 5em;
+    inline-size: 5em;
-    height: 5em;
+    block-size: 5em;
     border-radius: 100%;
     position: fixed;
-    bottom: 1.5em;
+    inset-block-end: 1.5em;
-    right: 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;
@@ -52,5 +53,10 @@
     display: none;
   }
 }
+@media all and (min-height: 801px) {
+  [class^=#{$writing-mode-vertical}] .new-status-button:not(.always-show) {
+    display: none;
+  }
+}
 
 </style>

src/components/mod_modal/mod_modal.scss

@@ -1,4 +1,5 @@
 @import 'src/_variables.scss';
+@import 'src/_logical.scss';
 .mod-modal {
   overflow: hidden;
 
@@ -20,6 +21,19 @@
         */
         transform: translateY(calc(100% - 50px));
       }
+
+      .#{$writing-mode-vertical}rl & {
+        transform: translateX(calc(50px - ((100vw - 100%) / 2 + 100%)));
+        @media all and (max-height: 800px) {
+          transform: translateX(calc(50px - 100%));
+        }
+      }
+      .#{$writing-mode-vertical}lr & {
+        transform: translateX(calc(((100vw - 100%) / 2 + 100%) - 50px));
+        @media all and (max-height: 800px) {
+          transform: translateX(calc(100% - 50px));
+        }
+      }
     }
   }
 
@@ -28,17 +42,23 @@
     transition: transform;
     transition-timing-function: ease-in-out;
     transition-duration: 300ms;
-    width: 1000px;
+    inline-size: 1000px;
-    max-width: 90vw;
+    max-inline-size: 90vi;
-    height: 90vh;
+    block-size: 90vb;
 
     @media all and (max-width: 800px) {
-      max-width: 100vw;
+      max-inline-size: 100vi;
-      height: 100%;
+      block-size: 100%;
+    }
+    @media all and (max-height: 800px) {
+      [class^=#{$writing-mode-vertical}] & {
+        max-inline-size: 100vi;
+        block-size: 100%;
+      }
     }
 
     .panel-body {
-      height: inherit;
+      block-size: inherit;
     }
   }
 }

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%;
+      inline-size: 100%;
-      max-width: 100%;
+      max-inline-size: 100%;
-      height: 100px;
+      block-size: 100px;
     }
   }
 }

src/components/mod_modal/tabs/reports_tab/reports_tab.scss

@@ -6,8 +6,8 @@
     }
 
     & > :not(:last-child) {
-      border-bottom: 1px solid;
+      border-block-end: 1px solid;
-      border-bottom-color: var(--border, #222);
+      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;
+      block-size: 25px;
-      width: 25px;
+      inline-size: 25px;
-      padding-right: 0.4em;
+      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-block-size: 2em;
-        min-width: 10em;
+        min-inline-size: 10em;
-        padding: 0 2em;
+        padding-block: 0;
-        margin-top: 0.5em;
+        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;
     }
   }
 }

src/components/modal/modal.vue

@@ -37,10 +37,10 @@ export default {
 .modal-view {
   z-index: 2000;
   position: fixed;
-  top: 0;
+  inset-block-start: 0;
-  left: 0;
+  inset-inline-start: 0;
-  right: 0;
+  inset-inline-end: 0;
-  bottom: 0;
+  inset-block-end: 0;
   display: flex;
   justify-content: center;
   align-items: center;

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

src/components/mrf_transparency_panel/mrf_transparency_panel.scss

@@ -2,20 +2,20 @@
   margin: 1em;
 
   table {
-    width:100%;
+    inline-size:100%;
-    text-align: left;
+    text-align: start;
-    padding-left:10px;
+    padding-inline-start:10px;
-    padding-bottom:20px;
+    padding-block-end:20px;
 
     th, td {
-      width: 180px;
+      inline-size: 180px;
-      max-width: 360px;
+      max-inline-size: 360px;
       overflow:  hidden;
-      vertical-align: text-top;
+      vertical-align: text-block-start;
     }
 
     th+th, td+td {
-      width: auto;
+      inline-size: auto;
     }
   }
 }

src/components/mute_card/mute_card.vue

@@ -35,10 +35,10 @@
 
 <style lang="scss">
 .mute-card-content-container {
-  margin-top: 0.5em;
+  margin-block-start: 0.5em;
-  text-align: right;
+  text-align: end;
   button {
-    width: 10em;
+    inline-size: 10em;
   }
 }
 </style>

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-start-end-radius: $fallback--panelRadius;
-      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+      border-start-end-radius: var(--panelRadius, $fallback--panelRadius);
-      border-top-left-radius: $fallback--panelRadius;
+      border-start-start-radius: $fallback--panelRadius;
-      border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+      border-start-start-radius: var(--panelRadius, $fallback--panelRadius);
     }
 
     &:last-child .menu-item {
-      border-bottom-right-radius: $fallback--panelRadius;
+      border-end-end-radius: $fallback--panelRadius;
-      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
+      border-end-end-radius: var(--panelRadius, $fallback--panelRadius);
-      border-bottom-left-radius: $fallback--panelRadius;
+      border-end-start-radius: $fallback--panelRadius;
-      border-bottom-left-radius: var(--panelRadius, $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;
+    padding-block: 0;
-    width: 100%;
+    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;
+    inset-inline-end: 0.6rem;
-    top: 1.25em;
+    inset-block-start: 1.25em;
   }
 }
 </style>

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;
+    padding-block: 0.25em;
-    height: 1.2em;
+    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 {

src/components/notifications/notification_filters.vue

@@ -117,8 +117,8 @@ export default {
 
   > button {
     line-height: 100%;
-    height: 100%;
+    block-size: 100%;
-    width: var(--__panel-heading-height-inner);
+    inline-size: var(--__panel-heading-block-size-inner);
     text-align: center;
 
     svg {

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;
+      inset-block-start: 0;
-      right: 0;
+      inset-inline-end: 0;
-      left: 0;
+      inset-inline-start: 0;
-      bottom: 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;
+      inline-size: 32px;
-      height: 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;
@@ -103,12 +104,12 @@
 
   .notification-right {
     flex: 1;
-    padding-left: 0.8em;
+    padding-inline-start: 0.8em;
-    min-width: 0;
+    min-inline-size: 0;
 
     .timeago {
-      min-width: 3em;
+      min-inline-size: 3em;
-      text-align: right;
+      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-block-start: 0;
-      margin-bottom: 0.3em;
+      margin-block-end: 0.3em;
     }
   }
 }

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;

src/components/password_reset/password_reset.vue

@@ -89,19 +89,20 @@
     display: flex;
     flex: 1 0;
     flex-direction: column;
-    margin-top: 0.6em;
+    margin-block-start: 0.6em;
-    max-width: 18rem;
+    max-inline-size: 18rem;
 
     > * {
-      min-width: 0;
+      min-inline-size: 0;
     }
   }
 
   .form-group {
     display: flex;
     flex-direction: column;
-    margin-bottom: 1em;
+    margin-block-end: 1em;
-    padding: 0.3em 0;
+    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 {

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;
+    inset-block-start: 0;
-    left: 0;
+    inset-inline-start: 0;
-    transition: width 0.5s;
+    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;
+    padding-block: 0;
-    margin-right: 0.5em;
+    padding-inline: 0.5em;
+    margin-inline-end: 0.5em;
   }
 }
 </style>

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-block-start: 0.25em;
-    padding-left: 0.1em;
+    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;
+      padding-inline-end: 2.5em;
-      width: 100%;
+      inline-size: 100%;
     }
   }
 
   .delete-option {
     // Hack: Move the icon over the input box
-    width: 1.5em;
+    inline-size: 1.5em;
-    margin-left: -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;
+      inline-size: 3em;
-      text-align: right;
+      text-align: end;
     }
   }
 }

src/components/popover/popover.js

@@ -1,3 +1,17 @@
+import {
+  getViewport,
+  isVertical,
+  isVerticalRL,
+  inlineStartOf,
+  inlineEndOf,
+  blockStartOf,
+  blockEndOf,
+  inlineSizeOf,
+  blockSizeOf,
+  offsetInlineSizeOf,
+  offsetBlockSizeOf
+} from '../../lib/logical_dimensions'
+
 const Popover = {
   name: 'Popover',
   props: {
@@ -53,51 +67,62 @@ const Popover = {
         return
       }
 
+      const viewport = getViewport()
+      const isRTL = this.$t('_locale.dir') == "rtl"
+      const isVrt = isVertical()
+      const isVRL = isVerticalRL()
+
       // 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
       // SVGs don't have offsetWidth/Height, use fallback
       const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth
       const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
+      const anchorInlineSize = isVrt ? anchorHeight : anchorWidth
+      const anchorBlockSize = isVrt ? anchorWidth : anchorHeight
       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, isRTL) + inlineSizeOf(screenBox) * 0.5, y: blockStartOf(screenBox) }
       const content = this.$refs.content
       // Minor optimization, don't call a slow reflow call if we don't have to
       const parentBounds = this.boundTo &&
         (this.boundTo.x === 'container' || this.boundTo.y === 'container') &&
         this.containerBoundingClientRect()
 
+      // margin is repurposed as an abstract value set for compatibility, so that:
+      // left = inline start, right = inline end, top = block start, and bottom = block end
       const margin = this.margin || {}
 
       // 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),
+        min: inlineStartOf(parentBounds, isRTL) + (margin.left || 0),
-        max: parentBounds.right - (margin.right || 0)
+        max: inlineEndOf(parentBounds, isRTL) - (margin.right || 0)
       } : {
         min: 0 + (margin.left || 10),
-        max: window.innerWidth - (margin.right || 10)
+        max: inlineSizeOf(viewport) - (margin.right || 10)
       }
 
       const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
-        min: parentBounds.top + (margin.top || 0),
+        min: blockStartOf(parentBounds) + (margin.top || 0),
-        max: parentBounds.bottom - (margin.bottom || 0)
+        max: blockEndOf(parentBounds) - (margin.bottom || 0)
       } : {
         min: 0 + (margin.top || 50),
-        max: window.innerHeight - (margin.bottom || 5)
+        max: blockSizeOf(viewport) - (margin.bottom || 5)
       }
 
       let horizOffset = 0
+      const contentOffsetInlineSize = offsetInlineSizeOf(content)
+      const contentOffsetBlockSize = offsetBlockSizeOf(content)
 
       // If overflowing from left, move it so that it doesn't
-      if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) {
+      if ((origin.x - contentOffsetInlineSize * 0.5) < xBounds.min) {
-        horizOffset += -(origin.x - content.offsetWidth * 0.5) + xBounds.min
+        horizOffset += -(origin.x - contentOffsetInlineSize * 0.5) + xBounds.min
       }
 
       // If overflowing from right, move it so that it doesn't
-      if ((origin.x + horizOffset + content.offsetWidth * 0.5) > xBounds.max) {
+      if ((origin.x + horizOffset + contentOffsetInlineSize * 0.5) > xBounds.max) {
-        horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - xBounds.max
+        horizOffset -= (origin.x + horizOffset + contentOffsetInlineSize * 0.5) - xBounds.max
       }
 
       // Default to whatever user wished with placement prop
@@ -106,28 +131,32 @@ const Popover = {
       // Handle special cases, first force to displaying on top if there's not space on bottom,
       // regardless of what placement value was. Then check if there's not space on top, and
       // force to bottom, again regardless of what placement value was.
-      if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
+      if (origin.y + contentOffsetBlockSize > yBounds.max) usingTop = true
-      if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
+      if (origin.y - contentOffsetBlockSize < yBounds.min) usingTop = false
 
       let vPadding = 0
       if (this.removePadding && usingTop) {
         const anchorStyle = getComputedStyle(anchorEl)
-        vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom)
+        vPadding = parseFloat(anchorStyle.paddingBlockStart) + parseFloat(anchorStyle.paddingBlockEnd)
       }
 
+      // offset is repurposed as an abstract value set, as well as margin
       const yOffset = (this.offset && this.offset.y) || 0
       const translateY = usingTop
-        ? -anchorHeight + vPadding - yOffset - content.offsetHeight
+        ? -anchorBlockSize + vPadding - yOffset - contentOffsetBlockSize
         : yOffset
+      const translateYLogical = isVRL ? -translateY : translateY
 
       const xOffset = (this.offset && this.offset.x) || 0
-      const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
+      const translateX = anchorInlineSize * 0.5 - contentOffsetInlineSize * 0.5 + horizOffset + xOffset
+      const translateXLogical = isRTL ? -translateX : translateX
 
+      const finalTrans = isVrt ? { x: translateYLogical, y: translateXLogical } : { x: translateXLogical, y: translateYLogical }
       // 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(finalTrans.x)}px) translateY(${Math.round(finalTrans.y)}px)`
       }
     },
     showPopover () {

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;
+    inset-block-start: 0;
-    bottom: 0;
+    inset-block-end: 0;
-    left: 0;
+    inset-inline-start: 0;
-    right: 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;
+    block-size: 0;
-    margin: .5rem 0;
+    margin-block: .5rem;
+    margin-inline: 0;
     overflow: hidden;
-    border-top: 1px solid $fallback--border;
+    border-block-start: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $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%;
+    inline-size: 100%;
-    height: 100%;
+    block-size: 100%;
     box-sizing: border-box;
 
     --btnText: var(--popoverText, $fallback--text);
 
     &-icon {
       svg {
-        width: 22px;
+        inline-size: 22px;
-        margin-right: 0.75rem;
+        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;
+      min-inline-size: 22px;
-      max-width: 22px;
+      max-inline-size: 22px;
-      min-height: 22px;
+      min-block-size: 22px;
-      max-height: 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;

src/components/post_status_form/post_status_form.vue

@@ -341,22 +341,23 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .post-status-form {
   position: relative;
 
   .attachments {
-    margin-bottom: 0.5em;
+    margin-block-end: 0.5em;
   }
 
   .form-bottom {
     display: flex;
     justify-content: space-between;
     padding: 0.5em;
-    height: 2.5em;
+    block-size: 2.5em;
 
     button {
-      width: 10em;
+      inline-size: 10em;
     }
 
     p {
@@ -369,14 +370,14 @@
   .form-bottom-left {
     display: flex;
     flex: 1;
-    padding-right: 7px;
+    padding-inline-end: 7px;
-    margin-right: 7px;
+    margin-inline-end: 7px;
-    max-width: 10em;
+    max-inline-size: 10em;
   }
 
   .preview-heading {
     display: flex;
-    padding-left: 0.5em;
+    padding-inline-start: 0.5em;
   }
 
   .preview-toggle {
@@ -388,14 +389,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 +424,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 +442,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;
 
@@ -470,7 +472,7 @@
   // Order is not necessary but a good indicator
   .media-upload-icon {
     order: 1;
-    justify-content: left;
+    justify-content: start;
   }
 
   .emoji-icon {
@@ -480,7 +482,7 @@
 
   .poll-icon {
     order: 3;
-    justify-content: right;
+    justify-content: end;
   }
 
   .error {
@@ -488,29 +490,29 @@
   }
 
   .media-upload-wrapper {
-    margin-right: .2em;
+    margin-inline-end: .2em;
-    margin-bottom: .5em;
+    margin-block-end: .5em;
-    width: 18em;
+    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 +530,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,16 +539,16 @@
     // 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);
+    block-size: calc(var(--post-line-height) * 1em);
-    min-height: calc(var(--post-line-height) * 1em);
+    min-block-size: calc(var(--post-line-height) * 1em);
     resize: none;
 
     &.scrollable-form {
-      overflow-y: auto;
+      @include overflow-block(auto);
     }
   }
 
@@ -555,10 +558,11 @@
 
   .character-counter {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
-    right: 0;
+    inset-inline-end: 0;
     padding: 0;
-    margin: 0 0.5em;
+    margin-block: 0;
+    margin-inline: 0.5em;
 
     &.error {
       color: $fallback--cRed;
@@ -582,8 +586,8 @@
 
   .drop-indicator {
     position: absolute;
-    width: 100%;
+    inline-size: 100%;
-    height: 100%;
+    block-size: 100%;
     font-size: 5em;
     display: flex;
     align-items: center;

src/components/post_status_modal/post_status_modal.vue

@@ -27,13 +27,13 @@
 
 .post-form-modal-panel {
   flex-shrink: 0;
-  margin-top: 25%;
+  margin-block-start: 25%;
-  margin-bottom: 2em;
+  margin-block-end: 2em;
-  width: 100%;
+  inline-size: 100%;
-  max-width: 700px;
+  max-inline-size: 700px;
 
   @media (orientation: landscape) {
-    margin-top: 8%;
+    margin-block-start: 8%;
   }
 }
 </style>

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 {

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;
+    inline-size: 120px;
-    max-width: 25%;
+    max-inline-size: 25%;
     img {
-      width: 100%;
+      inline-size: 100%;
-      height: 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;

src/components/react_button/react_button.vue

@@ -32,9 +32,10 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .custom-reaction {
-  width: 30px !important;
+  inline-size: 30px !important;
 }
 
 .ReactButton {
@@ -48,17 +49,18 @@
   }
 
   .reaction-picker-divider {
-    height: 1px;
+    block-size: 1px;
-    width: 100%;
+    inline-size: 100%;
     margin: 0.5em;
     background-color: var(--border, $fallback--border);
   }
 
+  /* style unused: see emoji_picker.scss */
   .reaction-picker {
-    width: 10em;
+    inline-size: 10em;
-    height: 9em;
+    block-size: 9em;
     font-size: 1.5em;
-    overflow-y: scroll;
+    @include overflow-block(scroll);
     display: flex;
     flex-wrap: wrap;
     padding: 0.5em;
@@ -91,7 +93,7 @@
 
   /* override of popover internal stuff */
   .popover-trigger-button {
-    width: auto;
+    inline-size: auto;
   }
 
   .popover-trigger {
@@ -106,7 +108,10 @@
 
   .popover {
     transform: translateX(-64px) translateY(5px);
-    min-width: 70%;
+    min-inline-size: 70%;
+    [dir="rtl"] & {
+      transform: translateX(64px) translateY(5px);
+    }
   }
 }
 

src/components/registration/registration.vue

@@ -274,6 +274,7 @@
 <script src="./registration.js"></script>
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 $validations-cRed: #f04124;
 
 .registration-form {
@@ -286,7 +287,7 @@ $validations-cRed: #f04124;
     flex-direction: row;
 
     > * {
-      min-width: 0;
+      min-inline-size: 0;
     }
   }
 
@@ -296,23 +297,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;
+    @include resize(block);
   }
 
   .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 +329,8 @@ $validations-cRed: #f04124;
   }
 
   .form-error {
-    margin-top: -0.7em;
+    margin-block-start: -0.7em;
-    text-align: left;
+    text-align: start;
 
     span {
       font-size: 0.85em;
@@ -337,8 +339,9 @@ $validations-cRed: #f04124;
 
   .form-error ul {
     list-style: none;
-    padding: 0 0 0 5px;
+    padding-block: 0 0;
-    margin-top: 0;
+    padding-inline: 5px 0;
+    margin-block-start: 0;
 
     li::before {
       content: "• ";
@@ -347,17 +350,17 @@ $validations-cRed: #f04124;
 
   form textarea {
     line-height:16px;
-    resize: vertical;
+    @include resize(block);
   }
 
   .captcha {
-    max-width: 350px;
+    max-inline-size: 350px;
-    margin-bottom: 0.4em;
+    margin-block-end: 0.4em;
   }
 
   .btn {
-    margin-top: 0.6em;
+    margin-block-start: 0.6em;
-    height: 2em;
+    block-size: 2em;
   }
 
   .error {
@@ -370,4 +373,9 @@ $validations-cRed: #f04124;
     flex-direction: column-reverse;
   }
 }
+@media all and (max-height: 800px) {
+  [class^=#{$writing-mode-vertical}] .registration-form .container {
+    flex-direction: column-reverse;
+  }
+}
 </style>

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%;
+    inline-size: 100%;
-    min-height: 2em;
+    min-block-size: 2em;
   }
 }
 </style>

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 {

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 {

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);
+    inline-size: var(--emoji-size, 32px);
-    height: var(--emoji-size, 32px);
+    block-size: var(--emoji-size, 32px);
   }
 
   .img,
   video {
-    max-width: 100%;
+    max-inline-size: 100%;
-    max-height: 400px;
+    max-block-size: 400px;
     vertical-align: middle;
     object-fit: contain;
   }

src/components/scope_selector/scope_selector.vue

@@ -81,10 +81,10 @@
   .scope {
     display: inline-block;
     cursor: pointer;
-    min-width: 1.3em;
+    min-inline-size: 1.3em;
-    min-height: 1.3em;
+    min-block-size: 1.3em;
     text-align: center;
-    margin-right: 0.4em;
+    margin-inline-end: 0.4em;
 
     &.selected svg {
       color: $fallback--lightText;

src/components/search/search.vue

@@ -128,6 +128,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .search-result-heading {
   color: $fallback--faint;
@@ -146,10 +147,20 @@
     }
   }
 }
+@media all and (max-height: 800px) {
+  [class^=#{$writing-mode-vertical}] .search-nav-heading {
+    .tab-switcher .tabs .tab-wrapper {
+      display: block;
+      justify-content: center;
+      flex: 1 1 auto;
+      text-align: center;
+    }
+  }
+}
 
 .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 +180,7 @@
   justify-content: center;
 
   .search-input {
-    width: 100%;
+    inline-size: 100%;
     line-height: 1.125rem;
     font-size: 1rem;
     padding: 0.5rem;
@@ -177,7 +188,7 @@
   }
 
   .search-button {
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
   }
 }
 
@@ -200,7 +211,7 @@
 
   .count {
     flex: 0 0 auto;
-    width: 2rem;
+    inline-size: 2rem;
     font-size: 1.5rem;
     line-height: 2.25rem;
     font-weight: 500;

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 {

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;
+    inset-block-start: 0;
-    bottom: 0;
+    inset-block-end: 0;
-    right: 5px;
+    inset-inline-end: 5px;
-    height: 100%;
+    block-size: 100%;
-    width: 0.875em;
+    inline-size: 0.875em;
     color: $fallback--text;
     color: var(--inputText, $fallback--text);
     line-height: 2;

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;
+    padding-block: 0.6em;
-    border-bottom: 2px solid;
+    padding-inline: 0;
-    border-bottom-color: $fallback--border;
+    border-block-end: 2px solid;
-    border-bottom-color: var(--border, $fallback--border);
+    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;
   }
 }

src/components/settings_modal/helpers/modified_indicator.vue

@@ -43,8 +43,9 @@ export default {
   position: relative;
 
   .modified-tooltip {
-    margin: 0.5em 1em;
+    margin-block: 0.5em;
-    min-width: 10em;
+    margin-inline: 1em;
+    min-inline-size: 10em;
     text-align: center;
   }
 }

src/components/settings_modal/helpers/server_side_indicator.vue

@@ -43,8 +43,9 @@ export default {
   position: relative;
 
   .serverside-tooltip {
-    margin: 0.5em 1em;
+    margin-block: 0.5em;
-    min-width: 10em;
+    margin-inline: 1em;
+    min-inline-size: 10em;
     text-align: center;
   }
 }

src/components/settings_modal/settings_modal.scss

@@ -1,16 +1,17 @@
 @import 'src/_variables.scss';
+@import 'src/_logical.scss';
 .settings-modal {
   overflow: hidden;
 
   .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
     }
   }
 
@@ -32,6 +33,19 @@
         */
         transform: translateY(calc(100% - 50px));
       }
+
+      .#{$writing-mode-vertical}rl & {
+        transform: translateX(calc(50px - ((100vw - 100%) / 2 + 100%)));
+        @media all and (max-height: 800px) {
+          transform: translateX(calc(50px - 100%));
+        }
+      }
+      .#{$writing-mode-vertical}lr & {
+        transform: translateX(calc(((100vw - 100%) / 2 + 100%) - 50px));
+        @media all and (max-height: 800px) {
+          transform: translateX(calc(100% - 50px));
+        }
+      }
     }
   }
 
@@ -40,23 +54,30 @@
     transition: transform;
     transition-timing-function: ease-in-out;
     transition-duration: 300ms;
-    width: 1000px;
+    inline-size: 1000px;
-    max-width: 90vw;
+    max-inline-size: 90vi;
-    height: 90vh;
+    block-size: 90vb;
 
     @media all and (max-width: 800px) {
-      max-width: 100vw;
+      max-inline-size: 100vi;
-      height: 100%;
+      block-size: 100%;
+    }
+    @media all and (max-height: 800px) {
+      [class^=#{$writing-mode-vertical}] & {
+        max-inline-size: 100vi;
+        block-size: 100%;
+      }
     }
 
     >.panel-body {
-      height: 100%;
+      block-size: 100%;
-      overflow-y: hidden;
+      @include overflow-block(hidden);
 
       .btn {
-        min-height: 2em;
+        min-block-size: 2em;
-        min-width: 10em;
+        min-inline-size: 10em;
-        padding: 0 2em;
+        padding-block: 0;
+        padding-inline: 2em;
       }
     }
   }
@@ -64,7 +85,7 @@
   .settings-footer {
     display: flex;
     >* {
-      margin-right: 0.5em;
+      margin-inline-end: 0.5em;
     }
 
     .extra-content {
@@ -74,12 +95,17 @@
 
     .logout-button {
       position: absolute;
-      right: 20px;
+      inset-inline-end: 20px;
-      padding-right: 10px;
+      padding-inline-end: 10px;
 
       @media all and (max-width: 800px) {
         display: none;
       }
+      @media all and (max-height: 800px) {
+        [class^=#{$writing-mode-vertical}] & {
+          display: none;
+        }
+      }
     }
   }
 }

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);
+    border-block-end: 2px solid var(--fg, $fallback--fg);
-    margin: 1em 1em 1.4em;
+    margin-block: 1em 1.4em;
-    padding-bottom: 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;
+      border-block-end: none;
-      padding-bottom: 0;
+      padding-block-end: 0;
-      margin-bottom: 1em;
+      margin-block-end: 1em;
     }
 
     select {
-      min-width: 10em;
+      min-inline-size: 10em;
     }
 
     textarea {
-      width: 100%;
+      inline-size: 100%;
-      max-width: 100%;
+      max-inline-size: 100%;
-      height: 100px;
+      block-size: 100px;
     }
 
     .unavailable,
@@ -48,7 +49,7 @@
     }
 
     .number-input {
-      max-width: 6em;
+      max-inline-size: 6em;
     }
   }
 }

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>

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-inline-start: 1em;
-  margin-right: 1em;
+  margin-inline-end: 1em;
 }
 </style>

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;
+        text-align: end;
-        padding: 0 1em;
+        padding-block: 0;
-        min-height: 2em;
+        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;
+        margin-block-start: 1em;
-        width: 10em
+        inline-size: 10em
     }
 }

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%;
+    max-inline-size: 100%;
-    width: 300px;
+    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;
+    inline-size: 150px;
-    height: 150px;
+    block-size: 150px;
   }
 
   .current-avatar {
     display: block;
-    width: 100%;
+    inline-size: 100%;
-    height: 100%;
+    block-size: 100%;
     border-radius: $fallback--avatarRadius;
     border-radius: var(--avatarRadius, $fallback--avatarRadius);
   }
 
   .reset-button {
     position: absolute;
-    top: 0.2em;
+    inset-block-start: 0.2em;
-    right: 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;
+    inline-size: 1.5em;
-    height: 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;
+    text-align: end;
-    padding: 0 1em;
+    padding-block: 0;
-    min-height: 2em;
+    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;
+      margin-block-start: 1em;
-      width: 10em;
+      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;
+      margin-block: 0 0.5em;
-      min-width: 0;
+      margin-inline: 0.2em;
+      min-inline-size: 0;
     }
 
     .delete-field {
-      width: 20px;
+      inline-size: 20px;
       align-self: center;
-      margin: 0 0.2em 0.5em;
+      margin-block: 0 0.5em;
-      padding: 0 0.5em;
+      margin-inline: 0.2em;
+      padding-block: 0;
+      padding-inline: 0.5em;
     }
   }
 }

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'">

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;
+        inline-size: 15em;
-        margin-top: 5px;
+        margin-block-start: 5px;
       }
 
     }

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

@@ -140,9 +140,9 @@ export default {}
 }
 .underlay-preview {
   position: absolute;
-  top: 0;
+  inset-block-start: 0;
-  bottom: 0;
+  inset-block-end: 0;
-  left: 10px;
+  inset-inline-start: 10px;
-  right: 10px;
+  inset-inline-end: 10px;
 }
 </style>

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%;
+    inline-size: 100%;
-    min-height: 30px;
+    min-block-size: 30px;
-    margin-bottom: 1em;
+    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;
+      padding-block: 0;
-      margin-bottom: .5em;
+      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-block-start: -4px;
-      margin-bottom: -3px;
+      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;
+      margin-block: 0 .5em;
-      min-width: 25%;
+      margin-inline: .5em;
+      min-inline-size: 25%;
     }
   }
 
   .preview-container {
-    border-top: 1px dashed;
+    border-block-start: 1px dashed;
-    border-bottom: 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-inline-size: 20px;
-        min-height: 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;
+        inline-size: 48px;
-        height: 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;
+    min-inline-size: 20em;
-    margin: 5px 6px 0 0;
+    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-inline-start: .25em;
-    margin-right: .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-block-size: 2em;
-      min-width: 0;
+      min-inline-size: 0;
-      max-width: 10em;
+      max-inline-size: 10em;
       padding: 0;
     }
   }

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;
+      inline-size: 5em;
-      min-width: 2em;
+      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;
+      inline-size: $side;
-      height: 2em;
+      block-size: 2em;
     }
     .y-shift-control {
       flex-direction: column;
       align-items: flex-end;
       .wrap {
-        width: 2em;
+        inline-size: 2em;
-        height: $side;
+        block-size: $side;
       }
       input[type=range] {
         transform-origin: 1em 1em;
@@ -291,8 +292,8 @@
       border-radius: var(--inputRadius, $fallback--inputRadius);
 
       .preview-block {
-        width: 33%;
+        inline-size: 33%;
-        height: 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;
+        min-inline-size: 1px;
-        margin-right: 5px;
+        margin-inline-end: 5px;
       }
 
       .btn {
-        padding: 0 .4em;
+        padding-block: 0;
-        margin: 0 .1em;
+        padding-inline: .4em;
+        margin-block: 0;
+        margin-inline: .1em;
       }
     }
   }

src/components/side_drawer/side_drawer.vue

@@ -218,18 +218,19 @@
   </div>
 </template>
 
-<script src="./side_drawer.js" ></script>
+<script src="./side_drawer.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .side-drawer-container {
   position: fixed;
   z-index: 1000;
-  top: 0;
+  inset-block-start: 0;
-  left: 0;
+  inset-inline-start: 0;
-  width: 100%;
+  inline-size: 100%;
-  height: 100%;
+  block-size: 100%;
   display: flex;
   align-items: stretch;
   transition-duration: 0s;
@@ -243,13 +244,19 @@
 .side-drawer-container-closed {
   transition-delay: 0.35s;
   transform: translate(-100%);
+  [dir="rtl"] & {
+    transform: translate(200%);
+  }
+  [class^="#{$writing-mode-vertical}"] & {
+    transform: translateX(0) translateY(-100%);
+  }
 }
 
 .side-drawer-darken {
-  top: 0;
+  inset-block-start: 0;
-  left: 0;
+  inset-inline-start: 0;
-  width: 100vw;
+  inline-size: 100vi;
-  height: 100vh;
+  block-size: 100vb;
   position: fixed;
   z-index: -1;
   transition: 0.35s;
@@ -266,14 +273,16 @@
 }
 
 .side-drawer {
-  overflow-x: hidden;
+  @include overflow-inline(hidden);
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
   transition: 0.35s;
   transition-property: transform;
-  margin: 0 0 0 -100px;
+  margin-block: 0 0;
-  padding: 0 0 1em 100px;
+  margin-inline: -100px 0;
-  width: 80%;
+  padding-block: 0 1em;
-  max-width: 20em;
+  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 +296,7 @@
   --icon: var(--popoverIcon, $fallback--icon);
 
   .badge {
-    margin-left: 10px;
+    margin-inline-start: 10px;
   }
 }
 
@@ -298,8 +307,8 @@
 
   img {
     flex: none;
-    height: 50px;
+    block-size: 50px;
-    margin-right: 0.85em;
+    margin-inline-end: 0.85em;
   }
 
   span {
@@ -315,6 +324,12 @@
 
 .side-drawer-closed {
   transform: translate(-100%);
+  [dir="rtl"] & {
+    transform: translate(200%);
+  }
+  [class^="#{$writing-mode-vertical}"] & {
+    transform: translateX(0) translateY(-100%);
+  }
 }
 
 .side-drawer-heading {
@@ -331,7 +346,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 +361,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;

src/components/staff_panel/staff_panel.vue

@@ -29,11 +29,11 @@
 <style lang="scss">
 
 .staff-group {
-  padding-left: 1em;
+  padding-inline-start: 1em;
-  padding-top: 1em;
+  padding-block-start: 1em;
 
   .basic-user-card {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 }
 

src/components/status/status.scss

@@ -1,7 +1,8 @@
 @import "../../_variables.scss";
+@import "../../_logical.scss";
 
 .Status {
-  min-width: 0;
+  min-inline-size: 0;
   white-space: normal;
   word-wrap: break-word;
   word-break: break-word;
@@ -33,7 +34,8 @@
     display: flex;
 
     .deleted-text {
-      margin: 0.5em 0;
+      margin-block: 0.5em;
+      margin-inline: 0;
       align-items: center;
     }
   }
@@ -47,16 +49,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 +75,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 +101,13 @@
   }
 
   .status-favicon {
-    height: 18px;
+    block-size: 18px;
-    width: 18px;
+    inline-size: 18px;
-    margin-right: 0.4em;
+    margin-inline-end: 0.4em;
   }
 
   .status-heading {
-    margin-bottom: 0.5em;
+    margin-block-end: 0.5em;
 
     .emoji {
       --emoji-size: 16px;
@@ -123,8 +126,8 @@
   }
 
   .account-name {
-    min-width: 1.6em;
+    min-inline-size: 1.6em;
-    margin-right: 0.4em;
+    margin-inline-end: 0.4em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -133,7 +136,7 @@
 
   .heading-left {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     flex-wrap: wrap;
 
     img {
@@ -152,7 +155,7 @@
     .button-unstyled {
       padding: 5px;
       margin: -5px;
-      height: min-content;
+      block-size: min-content;
 
       &:hover svg {
         color: $fallback--lightText;
@@ -161,7 +164,7 @@
     }
 
     .svg-inline--fa {
-      margin-left: 0.25em;
+      margin-inline-start: 0.25em;
     }
   }
 
@@ -171,7 +174,7 @@
   }
 
   .timeago {
-    margin-right: 0.2em;
+    margin-inline-end: 0.2em;
   }
 
   & .heading-reply-row,
@@ -179,22 +182,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;
+    min-inline-size: 0;
-    margin-right: 0.4em;
+    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 +205,9 @@
       content: "";
       display: block;
       position: absolute;
-      bottom: 0;
+      inset-block-end: 0;
-      width: 100%;
+      inline-size: 100%;
-      border-bottom: 1px solid var(--faint);
+      border-block-end: 1px solid var(--faint);
       pointer-events: none;
     }
 
@@ -217,9 +220,9 @@
         content: "";
         display: block;
         position: absolute;
-        top: 50%;
+        inset-block-start: 50%;
-        width: 100%;
+        inline-size: 100%;
-        border-bottom: 1px solid var(--faint);
+        border-block-end: 1px solid var(--faint);
         pointer-events: none;
       }
     }
@@ -244,23 +247,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 +274,18 @@
 
   .repeater-avatar {
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-    margin-left: 28px;
+    margin-inline-start: 28px;
-    width: 20px;
+    inline-size: 20px;
-    height: 20px;
+    block-size: 20px;
   }
 
   .repeater-name {
     text-overflow: ellipsis;
-    margin-right: 0;
+    margin-inline-end: 0;
 
     .emoji {
-      width: 14px;
+      inline-size: 14px;
-      height: 14px;
+      block-size: 14px;
       vertical-align: middle;
       object-fit: contain;
     }
@@ -304,21 +308,30 @@
 
   .status-actions {
     position: relative;
-    width: 100%;
+    inline-size: 100%;
     display: flex;
     flex-wrap: wrap;
-    justify-content: left;
+    justify-content: start;
-    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;
     }
+
+    /*
+       fix for the unknown factor that makes popover shift rightward
+       in vertical-rl mode on Firefox. Bug? To be investigated.
+    */
+    _:lang(x)::-moz-placeholder, .#{$writing-mode-vertical}rl & .popover {
+      margin-block-start: 22px;
+    }
   }
 
   .muted {
-    padding: 0.25em 0.6em;
+    padding-block: 0.25em;
-    height: 1.2em;
+    padding-inline: 0.6em;
+    block-size: 1.2em;
     line-height: 1.2em;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -342,7 +355,7 @@
     .status-username {
       font-weight: normal;
       flex: 0 1 auto;
-      margin-right: 0.2em;
+      margin-inline-end: 0.2em;
       font-size: smaller;
     }
 
@@ -352,7 +365,7 @@
 
     .mute-words {
       flex: 1 0 5em;
-      margin-left: 0.2em;
+      margin-inline-start: 0.2em;
 
       &::before {
         content: " ";
@@ -361,14 +374,14 @@
 
     .unmute {
       flex: 0 0 auto;
-      margin-left: auto;
+      margin-inline-start: auto;
       display: block;
     }
   }
 
   .reply-form {
-    padding-top: 0;
+    padding-block-start: 0;
-    padding-bottom: 0;
+    padding-block-end: 0;
   }
 
   .reply-body {
@@ -376,8 +389,8 @@
   }
 
   .quote-form {
-    padding-top: 0;
+    padding-block-start: 0;
-    padding-bottom: 0;
+    padding-block-end: 0;
   }
 
   .quote-body {
@@ -385,11 +398,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 +417,15 @@
     &::before {
       content: "";
       position: absolute;
-      height: 100%;
+      block-size: 100%;
-      width: 1px;
+      inline-size: 1px;
-      left: 0;
+      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 +448,37 @@
 
   @media all and (max-width: 800px) {
     .repeater-avatar {
-      margin-left: 20px;
+      margin-inline-start: 20px;
     }
 
     .post-avatar {
-      width: 40px;
+      inline-size: 40px;
-      height: 40px;
+      block-size: 40px;
 
       // TODO define those other way somehow?
       // stylelint-disable rscss/class-format
       &.-compact {
-        width: 32px;
+        inline-size: 32px;
-        height: 32px;
+        block-size: 32px;
+      }
+    }
+  }
+  @media all and (max-height: 800px) {
+    [class^=#{$writing-mode-vertical}] & {
+      .repeater-avatar {
+        margin-inline-start: 20px;
+      }
+
+      .post-avatar {
+        inline-size: 40px;
+        block-size: 40px;
+
+        // TODO define those other way somehow?
+        // stylelint-disable rscss/class-format
+        &.-compact {
+          inline-size: 32px;
+          block-size: 32px;
+        }
       }
     }
   }

src/components/status/status.vue

@@ -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

src/components/status_body/status_body.scss

@@ -1,4 +1,5 @@
 @import '../../_variables.scss';
+@import '../../_logical.scss';
 
 .StatusBody {
   display: flex;
@@ -7,7 +8,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 +23,27 @@
 
   ._mfm_x2_ {
     .emoji {
-      width: 100px;
+      inline-size: 100px;
-      height: 100px;
+      block-size: 100px;
     }
   }
 
   ._mfm_x3_ {
     .emoji {
-      width: 150px;
+      inline-size: 150px;
-      height: 150px;
+      block-size: 150px;
     }
   }
 
   ._mfm_x4_ {
     .emoji {
-      width: 200px;
+      inline-size: 200px;
-      height: 200px;
+      block-size: 200px;
     }
   }
 
   .attachments {
-    margin-top: 0.5em;
+    margin-block-start: 0.5em;
   }
 
   & .text,
@@ -57,7 +58,7 @@
   .summary {
     display: block;
     font-style: italic;
-    padding-bottom: 0.5em;
+    padding-block-end: 0.5em;
   }
 
   .text {
@@ -68,12 +69,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 +84,7 @@
       position: relative;
 
       .summary {
-        max-height: 2em;
+        max-block-size: 2em;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -98,13 +99,13 @@
 
     &.-tall-status {
       position: relative;
-      height: 220px;
+      block-size: 220px;
-      overflow-x: hidden;
+      @include overflow-inline(hidden);
-      overflow-y: hidden;
+      @include overflow-block(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);
@@ -112,6 +113,18 @@
         /* Autoprefixed seem to ignore this one, and also syntax is different */
         -webkit-mask-composite: xor;
         mask-composite: exclude;
+        .#{$writing-mode-vertical}lr & {
+          mask:
+            linear-gradient(to left, white, transparent) right/70px 100% no-repeat,
+            linear-gradient(to left, white, white);
+          mask-composite: exclude;
+        }
+        .#{$writing-mode-vertical}rl & {
+          mask:
+            linear-gradient(to right, white, transparent) left/70px 100% no-repeat,
+            linear-gradient(to right, white, white);
+          mask-composite: exclude;
+        }
       }
     }
   }
@@ -122,21 +135,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;
+    block-size: 70px;
-    margin-top: 150px;
+    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 +178,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;
     }
 
@@ -184,14 +197,22 @@
       /* Autoprefixed seem to ignore this one, and also syntax is different */
       -webkit-mask-composite: xor;
       mask-composite: exclude;
+      .#{$writing-mode-vertical}lr & {
+        mask-image: linear-gradient(to right, white 2em, transparent 3em);
+        mask-size: 3.5em auto, auto auto;
+      }
+      .#{$writing-mode-vertical}rl & {
+        mask-image: linear-gradient(to left, white 2em, transparent 3em);
+        mask-size: 3.5em auto, auto auto;
+      }
     }
 
     .attachments {
-      margin-top: 0;
+      margin-block-start: 0;
       flex: 1 1 0;
-      min-width: 5em;
+      min-inline-size: 5em;
-      height: 100%;
+      block-size: 100%;
-      margin-left: 0.5em;
+      margin-inline-start: 0.5em;
     }
 
     .summary-wrapper {

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;
+      inline-size: 50px;
-      height: 50px;
+      block-size: 50px;
     }
   }
 
@@ -89,8 +89,8 @@
       animation: none !important;
     }
     .emoji {
-      width: 32px !important;
+      inline-size: 32px !important;
-      height: 32px !important;
+      block-size: 32px !important;
     }
   }
 }