fix(client/rtl): right positioning not adjusted

apps/client/src/stylesheets/calendar.css

@@ -102,7 +102,7 @@
     content: '';
     position: absolute;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     width: 1px;
     background-color: var(--main-border-color);

apps/client/src/stylesheets/relation_map.css

@@ -62,7 +62,7 @@
 .note-detail-relation-map .endpoint {
     position: absolute;
     bottom: 37%;
-    right: 5px;
+    inset-inline-end: 5px;
     width: 1em;
     height: 1em;
     background-color: #333;

apps/client/src/stylesheets/style.css

@@ -608,7 +608,7 @@ pre:not(.hljs) {
 pre > button.copy-button {
     position: absolute;
     top: var(--copy-button-margin-size);
-    right: var(--copy-button-margin-size);
+    inset-inline-end: var(--copy-button-margin-size);
 }
 
 :root pre:has(> button.copy-button) {
@@ -743,7 +743,7 @@ table.promoted-attributes-in-tooltip th {
 
 .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,
 .bs-tooltip-right .tooltip-arrow::before {
-    right: -1px;
+    inset-inline-end: -1px;
     border-width: 0.4rem 0.4rem 0.4rem 0;
     border-inline-end-color: var(--main-border-color) !important;
 }
@@ -771,7 +771,7 @@ table.promoted-attributes-in-tooltip th {
 
 .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::after,
 .bs-tooltip-right .tooltip-arrow::after {
-    right: -1px;
+    inset-inline-end: -1px;
     border-width: 0.4rem 0.4rem 0.4rem 0;
     border-inline-end-color: var(--tooltip-background-color) !important;
 }
@@ -825,7 +825,7 @@ table.promoted-attributes-in-tooltip th {
 
 .note-tooltip-content .open-popup-button {
     position: absolute;
-    right: 15px;
+    inset-inline-end: 15px;
     bottom: 8px;
     font-size: 1.2em;
     color: inherit;
@@ -1059,7 +1059,7 @@ svg.ck-icon .note-icon {
     display: inline-block;
     min-width: fit-content;
     position: relative;
-    right: 0.2em;
+    inset-inline-end: 0.2em;
     text-align: end;
 }
 
@@ -1279,7 +1279,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     position: fixed;
     top: 0;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: 1000;
     background: rgba(0, 0, 0, 0.1);
@@ -1293,7 +1293,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 body.mobile #context-menu-container.mobile-bottom-menu {
     position: fixed !important;
     inset-inline-start: 0 !important;
-    right: 0 !important;
+    inset-inline-end: 0 !important;
     bottom: 0 !important;
     top: unset !important;
     max-height: 70vh;
@@ -1538,7 +1538,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !important;
         top: unset !important;
         inset-inline-start: 0 !important;
-        right: 0 !important;
+        inset-inline-end: 0 !important;
         transform: unset !important;
     }
 
@@ -1546,7 +1546,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         position: fixed;
         top: 0;
         inset-inline-start: 0;
-        right: 0;
+        inset-inline-end: 0;
         bottom: 0;
         z-index: 1000;
         transition: background-color 250ms ease-in-out;
@@ -1594,7 +1594,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         position: fixed;
         bottom: 0;
         inset-inline-start: 0;
-        right: 0;
+        inset-inline-end: 0;
         margin: 0 !important;
         max-height: 85vh;        
         display: flex;
@@ -2042,7 +2042,7 @@ body.zen .split-note-container-widget > .gutter {
 body.zen #launcher-pane {
     position: absolute !important;
     top: 0 !important;
-    right: 0 !important;
+    inset-inline-end: 0 !important;
     width: 64px !important;
     height: 64px !important;
     background: transparent !important;
@@ -2062,7 +2062,7 @@ body.zen .floating-buttons {
 }
 
 body.zen .floating-buttons-children {
-    right: 0;
+    inset-inline-end: 0;
 }
 
 body.zen .floating-buttons-children .button-widget {
@@ -2383,7 +2383,7 @@ footer.webview-footer button {
 
 .content-floating-buttons.bottom-right {
     bottom: 10px;
-    right: 10px;
+    inset-inline-end: 10px;
 }
 
 .content-floating-buttons button.bx {

apps/client/src/stylesheets/theme-next/base.css

@@ -121,7 +121,7 @@ body.desktop .dropdown-menu::before,
     position: absolute;
     top: 0;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     z-index: -1;
 }
@@ -225,7 +225,7 @@ html body .dropdown-item[disabled] {
     content: "";
     top: -1px;
     inset-inline-start: calc(0px - var(--menu-padding-size));
-    right: calc(0px - var(--menu-padding-size));
+    inset-inline-end: calc(0px - var(--menu-padding-size));
     border-top: 1px solid var(--menu-item-delimiter-color);
 }
 
@@ -237,7 +237,7 @@ html body .dropdown-item[disabled] {
     align-items: center;
     justify-content: center;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     margin: unset !important;
     border: unset !important;
     padding: 0 4px;
@@ -265,7 +265,7 @@ html body .dropdown-item[disabled] {
     position: absolute;
     bottom: 8px;
     inset-inline-start: calc(0px - var(--menu-padding-size));
-    right: calc(0px - var(--menu-padding-size));
+    inset-inline-end: calc(0px - var(--menu-padding-size));
     border-top: 1px solid var(--menu-item-delimiter-color);
 }
 

apps/client/src/stylesheets/theme-next/forms.css

@@ -451,7 +451,7 @@ optgroup {
     content: "\eae1";
     width: 2em;
     height: 100%;
-    right: 0;
+    inset-inline-end: 0;
     top: 0;
     font-size: 1.2em;
     font-family: boxicons;

apps/client/src/stylesheets/theme-next/notes/text.css

@@ -117,7 +117,7 @@
     content: "";
     position: absolute;
     top: var(--negative-padding);
-    right: var(--negative-padding);
+    inset-inline-end: var(--negative-padding);
     bottom: var(--negative-padding);
     inset-inline-start: var(--negative-padding);
     border-radius: var(--dropdown-border-radius);
@@ -234,7 +234,7 @@
     top: 0;
     bottom: var(--negative-padding);
     inset-inline-start: var(--negative-padding);
-    right: var(--negative-padding);
+    inset-inline-end: var(--negative-padding);
     border-top: 1px solid var(--ck-editor-popup-border-color);
     background: var(--menu-section-background-color);
 }
@@ -620,7 +620,7 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
 
 .ck-content blockquote:after {
     content: "”";
-    right: 0.35em;
+    inset-inline-end: 0.35em;
 }
 
 .ck-content h2,

apps/client/src/stylesheets/theme-next/ribbon.css

@@ -142,7 +142,7 @@ ul.editability-dropdown li.dropdown-item > div {
 }
 
 .attribute-list .save-attributes-button {
-    right: 30px;
+    inset-inline-end: 30px;
 }
 
 /* Note path in attribute detail dialog */

apps/client/src/stylesheets/theme-next/shell.css

@@ -284,7 +284,7 @@ body.layout-horizontal > .horizontal {
 }
 
 #launcher-pane.horizontal .global-menu-button .global-menu-button-update-available {
-    right: -23px;
+    inset-inline-end: -23px;
     bottom: -22px;
     transform: scale(0.85);
 }
@@ -400,7 +400,7 @@ body.layout-horizontal > .horizontal {
     content: "";
     position: absolute;
     top: var(--vertical-margin);
-    right: var(--horiz-margin);
+    inset-inline-end: var(--horiz-margin);
     bottom: var(--vertical-margin);
     inset-inline-start: var(--horiz-margin);
     border-radius: 6px;
@@ -498,7 +498,7 @@ div.quick-search::before {
     top: var(--padding-top);
     inset-inline-start: var(--padding-inline-start);
     bottom: var(--padding-bottom);
-    right: var(--padding-inline-end);
+    inset-inline-end: var(--padding-inline-end);
     z-index: 0;
     border: 2px solid transparent;
     border-radius: 6px;
@@ -660,7 +660,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     top: var(--left-pane-item-selected-shadow-size);
     inset-inline-start: var(--left-pane-item-selected-shadow-size);
     bottom: var(--left-pane-item-selected-shadow-size);
-    right: var(--left-pane-item-selected-shadow-size);
+    inset-inline-end: var(--left-pane-item-selected-shadow-size);
     background: var(--left-pane-item-selected-background) !important;
     box-shadow: var(--left-pane-item-selected-shadow);
     border-radius: 6px;
@@ -676,7 +676,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
 #left-pane span.fancytree-node.protected > span.fancytree-custom-icon:after {
     position: absolute;
     bottom: 0;
-    right: 0;
+    inset-inline-end: 0;
     font-size: 14px;
     content: "\eb4a";
     font-family: "boxicons";
@@ -772,7 +772,7 @@ body.mobile .fancytree-node > span {
 /* Toolbar container (collapsed state) */
 #left-pane .tree-actions {
     max-width: var(--tree-actions-toolbar-collapsed-width);
-    right: var(--tree-actions-toolbar-horizontal-margin);
+    inset-inline-end: var(--tree-actions-toolbar-horizontal-margin);
     bottom: var(--tree-actions-toolbar-vertical-margin);
     overflow: hidden;
     border: 1px solid transparent;
@@ -821,7 +821,7 @@ body.mobile .fancytree-node > span {
     justify-content: center;
     align-items: center;
     top: 50%;
-    right: calc((var(--tree-actions-toolbar-collapsed-width) - var(--tree-actions-toolbar-expand-button-size)) / 2);
+    inset-inline-end: calc((var(--tree-actions-toolbar-collapsed-width) - var(--tree-actions-toolbar-expand-button-size)) / 2);
     width: var(--tree-actions-toolbar-expand-button-size);
     height: var(--tree-actions-toolbar-expand-button-size);
     box-shadow: 2px 2px 6px var(--left-pane-background-color);
@@ -911,7 +911,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .toggle-bu
     position: absolute;
     bottom: 0;
     inset-inline-start: -10px;
-    right: -10px;
+    inset-inline-end: -10px;
     top: 32px;
     height: 1px;
     border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
@@ -923,12 +923,12 @@ body.electron.background-effects.layout-horizontal .tab-row-container .tab-scrol
 }
 
 body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-inset-inline-start:after,
-body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-right:after {
+body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-inset-inline-end:after {
     content: "";
     position: absolute;
     bottom: 0;
     inset-inline-start: 0px;
-    right: 0px;
+    inset-inline-end: 0px;
     height: 1px;
     border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
 }
@@ -939,7 +939,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-tab[
     bottom: 0;
     inset-inline-start: -32768px;
     top: var(--tab-height);
-    right: calc(100% - 1px);
+    inset-inline-end: calc(100% - 1px);
     height: 1px;
     border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
 }
@@ -950,7 +950,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-tab[
     bottom: 0;
     inset-inline-start: 100%;
     top: var(--tab-height);
-    right: 0;
+    inset-inline-end: 0;
     width: 100vw;
     height: 1px;
     border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
@@ -962,7 +962,7 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-new-
     bottom: 0;
     inset-inline-start: -4px;
     top: calc(var(--tab-height), -1);
-    right: 0;
+    inset-inline-end: 0;
     width: 100vw;
     height: 1px;
     border-bottom: 1px solid var(--launcher-pane-horiz-border-color);
@@ -1050,7 +1050,7 @@ body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper {
     position: absolute;
     top: 0;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     height: 3px;
     background-color: var(--workspace-tab-background-color);
 }
@@ -1676,7 +1676,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
     .find-widget-close-button {
         position: absolute;
         top: .85em;
-        right: .5em;
+        inset-inline-end: .5em;
     }
 
     .find-widget-box > * {

apps/client/src/widgets/FloatingButtons.css

@@ -7,7 +7,7 @@
 .show-floating-buttons {
     position: absolute;
     top: var(--floating-buttons-vert-offset, 10px);
-    right: var(--floating-buttons-horiz-offset, 10px);
+    inset-inline-end: var(--floating-buttons-horiz-offset, 10px);
     display: flex;
     flex-direction: row;
     z-index: 100;
@@ -15,7 +15,7 @@
 
 .note-split.rtl .floating-buttons-children,
 .note-split.rtl .show-floating-buttons {
-    right: unset;
+    inset-inline-end: unset;
     inset-inline-end: 10px;
 }
 
@@ -140,7 +140,7 @@
     z-index: 10;
     position: absolute;
     top: 50px;
-    right: 10px;
+    inset-inline-end: 10px;
     width: 400px;
     border-radius: 10px;
     background-color: var(--accented-background-color);

apps/client/src/widgets/api_log.css

@@ -23,6 +23,6 @@
     color: var(--button-text-color);
     position: absolute;
     top: 10px;
-    right: 10px;
+    inset-inline-end: 10px;
     cursor: pointer;
 }

apps/client/src/widgets/buttons/global_menu.css

@@ -55,7 +55,7 @@ button.global-menu-button {
 
 .global-menu-button-update-available {
     position: absolute;
-    right: -30px;
+    inset-inline-end: -30px;
     bottom: -30px;
     width: 100%;
     height: 100%;

apps/client/src/widgets/close_zen_button.css

@@ -11,7 +11,7 @@ body.zen .close-zen-container {
     display: block;
     position: fixed;
     top: 2px;
-    right: 2px;
+    inset-inline-end: 2px;
     z-index: 9999;
     -webkit-app-region: no-drag;
 }
@@ -22,5 +22,5 @@ body.zen.mobile .close-zen-container {
 
 body.zen.electron:not(.platform-darwin):not(.native-titlebar) .close-zen-container {
     inset-inline-start: calc(env(titlebar-area-width) - var(--zen-button-size) - 2px);
-    right: unset;
+    inset-inline-end: unset;
 }

apps/client/src/widgets/collections/board/index.css

@@ -153,7 +153,7 @@
 .board-view-container .board-note > .edit-icon {
   position: absolute;
   top: 8px;
-  right: 4px;
+  inset-inline-end: 4px;
   padding: 2px;
   background-color: var(--main-background-color);
 }
@@ -165,7 +165,7 @@
 .board-view-container .board-note:hover > .edit-icon {
   position: absolute;
   top: 8px;
-  right: 4px;
+  inset-inline-end: 4px;
   color: var(--main-text-color);
   background-color: var(--main-background-color);
   padding-inline-start: 6px;

apps/client/src/widgets/collections/calendar/index.css

@@ -14,7 +14,7 @@
     position: absolute;
     top: 0;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
 }
 

apps/client/src/widgets/collections/table/index.css

@@ -14,7 +14,7 @@
     position: absolute;
     top: 0;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
 }
 

apps/client/src/widgets/ribbon/style.css

@@ -262,7 +262,7 @@
 
 .note-map-ribbon-widget .open-full-button, .note-map-ribbon-widget .collapse-button {
     position: absolute;
-    right: 5px;
+    inset-inline-end: 5px;
     bottom: 5px;
     z-index: 1000;
 }
@@ -294,7 +294,7 @@
     display: flex;
     position: absolute;
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
     align-items: center;
     gap: 10px;

apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.css

@@ -13,7 +13,7 @@
 #root-widget.virtual-keyboard-opened .classic-toolbar-outer-container.ios {
     position: absolute;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
 }
 
@@ -21,7 +21,7 @@
     position: absolute;
     bottom: 0;
     inset-inline-start: 0;
-    right: 0;
+    inset-inline-end: 0;
     height: 38px;
     overflow: scroll;
     display: flex;