feat(client/rtl): handle margin-left

apps/client/src/layouts/mobile_layout.tsx

@@ -68,7 +68,7 @@ const FANCYTREE_CSS = `
 
 .fancytree-title {
     font-size: 1.5em;
-    margin-left: 0.6em !important;
+    margin-inline-start: 0.6em !important;
 }
 
 .fancytree-node {

apps/client/src/stylesheets/style.css

@@ -174,7 +174,7 @@ textarea,
 /* Add a gap between consecutive radios / check boxes */
 label.tn-radio + label.tn-radio,
 label.tn-checkbox + label.tn-checkbox {
-    margin-left: 12px;
+    margin-inline-start: 12px;
 }
 
 label.tn-radio input[type="radio"],
@@ -226,7 +226,7 @@ samp {
 .badge {
     --bs-badge-color: var(--muted-text-color);
 
-    margin-left: 8px;
+    margin-inline-start: 8px;
     background: var(--accented-background-color);
 }
 
@@ -338,7 +338,7 @@ button kbd {
 }
 
 .ui-menu kbd {
-    margin-left: 30px;
+    margin-inline-start: 30px;
     float: right;
 }
 
@@ -392,7 +392,7 @@ body.desktop .tabulator-popup-container {
 }
 
 .dropend .dropdown-toggle::after {
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
     color: var(--muted-text-color);
 }
 
@@ -403,7 +403,7 @@ body.desktop .tabulator-popup-container {
 
 .dropdown-menu .disabled .disabled-tooltip {
     pointer-events: all;
-    margin-left: 8px;
+    margin-inline-start: 8px;
     font-size: 0.5em;
     color: var(--disabled-tooltip-icon-color);
     cursor: help;
@@ -1033,7 +1033,7 @@ svg.ck-icon .note-icon {
     counter-increment: footnote-counter;
     display: flex;
     list-style: none;
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
 }
 
 .ck-content .footnote-item > * {
@@ -1414,7 +1414,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 
 .ck.ck-slash-command-button__text-part,
 .ck.ck-template-form__text-part {
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
     line-height: 1.2em !important;
 }
 
@@ -1748,7 +1748,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
-    margin-left: 10px;
+    margin-inline-start: 10px;
     margin-right: 5px;
 }
 
@@ -1800,7 +1800,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 }
 
 .note-split {
-    margin-left: auto;
+    margin-inline-start: auto;
     margin-right: auto;
 }
 
@@ -1858,7 +1858,7 @@ textarea {
 
 .attachment-help-button {
     display: inline-block;
-    margin-left: 10px;
+    margin-inline-start: 10px;
     vertical-align: middle;
     font-size: 1em;
 }

apps/client/src/stylesheets/table.css

@@ -67,7 +67,7 @@
 }
 
 .tabulator div.tabulator-header .tabulator-frozen.tabulator-frozen-left {
-    margin-left: var(--cell-editing-border-width);
+    margin-inline-start: var(--cell-editing-border-width);
 }
 
 .tabulator div.tabulator-header .tabulator-col,

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

@@ -211,7 +211,7 @@ html body .dropdown-item[disabled] {
 
 .dropdown-item span.keyboard-shortcut {
     color: var(--menu-item-keyboard-shortcut-color) !important;
-    margin-left: 16px;
+    margin-inline-start: 16px;
 }
 
 .dropdown-divider {

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

@@ -29,7 +29,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-left: 8px;
+    margin-inline-start: 8px;
     border: 0;
     border-radius: 50%;
     padding: 0;
@@ -374,7 +374,7 @@ div.tn-tool-dialog {
 }
 
 .help-dialog .help-cards kbd:first-child {
-    margin-left: 0;
+    margin-inline-start: 0;
 }
 
 /* Inline code - used for Markdown samples */

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

@@ -71,7 +71,7 @@ button.btn.btn-primary kbd,
 button.btn.btn-secondary kbd,
 button.btn.btn-sm kbd,
 button.btn.btn-success kbd {
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
     background: var(--cmd-button-keyboard-shortcut-background);
     color: var(--cmd-button-keyboard-shortcut-color);
     font-size: 0.6em;
@@ -102,7 +102,7 @@ button.btn.btn-success kbd {
 }
 
 .btn-group .tn-tool-button + .tn-tool-button {
-    margin-left: 4px !important;
+    margin-inline-start: 4px !important;
 }
 
 /* The "x" icon button */

apps/client/src/stylesheets/theme-next/llm-chat.css

@@ -19,7 +19,7 @@
 }
 
 .chat-message.user-message {
-    margin-left: auto;
+    margin-inline-start: auto;
 }
 
 .chat-message.assistant-message {

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

@@ -210,7 +210,7 @@
 /* Separator */
 :root .ck .ck-list__separator {
     margin: .5em 0;
-    margin-left: calc(0px - var(--ck-editor-popup-padding));
+    margin-inline-start: calc(0px - var(--ck-editor-popup-padding));
     width: calc(100% + (var(--ck-editor-popup-padding) * 2));
     background: var(--menu-item-delimiter-color);
 }

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

@@ -199,7 +199,7 @@ body.desktop .option-section:not(.tn-no-card) {
     color: var(--launcher-pane-text-color);
     margin-top: calc(-1 * var(--options-card-padding) - var(--options-title-font-size) - var(--options-title-offset)) !important;
     margin-bottom: calc(var(--options-title-offset) + var(--options-card-padding)) !important;
-    margin-left: calc(-1 * var(--options-card-padding));
+    margin-inline-start: calc(-1 * var(--options-card-padding));
 }
 
 .options-section:not(.tn-no-card) h5 {
@@ -216,7 +216,7 @@ body.desktop .option-section:not(.tn-no-card) {
 .options-section hr {
     --bs-border-width: 2px;
 
-    margin-left: calc(var(--options-card-padding) * -1);
+    margin-inline-start: calc(var(--options-card-padding) * -1);
     margin-right: calc(var(--options-card-padding) * -1);
     opacity: 1;
     color: var(--root-background);

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

@@ -105,7 +105,7 @@ ul.note-type-dropdown li.dropdown-item {
 /* Editability dropdown */
 
 ul.editability-dropdown li.dropdown-item > div {
-    margin-left: 4px;
+    margin-inline-start: 4px;
 }
 
 .editability-dropdown .dropdown-item .description {
@@ -147,7 +147,7 @@ ul.editability-dropdown li.dropdown-item > div {
 
 /* Note path in attribute detail dialog */
 .attr-detail .note-path {
-    margin-left: 8px;
+    margin-inline-start: 8px;
 }
 
 /*

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

@@ -1101,7 +1101,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .
 
 .tab-row-widget .note-new-tab {
     position: relative;
-    margin-left: 3px;
+    margin-inline-start: 3px;
     color: transparent; /* Prevent the original "+" from being displayed */
 }
 
@@ -1225,7 +1225,7 @@ body.mobile .note-title {
 }
 
 .title-row > *:nth-child(2) {
-    margin-left: 0;
+    margin-inline-start: 0;
 }
 
 .title-row {
@@ -1407,7 +1407,7 @@ div.promoted-attribute-cell.promoted-attribute-label-boolean > div:first-of-type
 div.promoted-attribute-cell .multiplicity:has(span) {
     --icon-button-size: 24px;
 
-    margin-left: 8px;
+    margin-inline-start: 8px;
     margin-right: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right));
     font-size: 0; /* Prevent whitespaces creating a gap between buttons */
     display: flex;
@@ -1547,7 +1547,7 @@ div.floating-buttons-children .close-floating-buttons {
 }
 
 div.floating-buttons-children .close-floating-buttons {
-    margin-left: 0 !important;
+    margin-inline-start: 0 !important;
     background: var(--floating-button-hide-button-background);
     color: var(--floating-button-hide-button-color);
 }
@@ -1642,7 +1642,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 }
 
 .find-replace-widget .form-check .form-check-input {
-    margin-left: 0;
+    margin-inline-start: 0;
 }
 
 /* Narrow version */
@@ -1806,7 +1806,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 }
 
 .excalidraw .dropdown-menu .dropdown-menu-container > div:not([class]):not(:last-child) {
-    margin-left: calc(var(--padding) * var(--space-factor) * -1) !important;
+    margin-inline-start: calc(var(--padding) * var(--space-factor) * -1) !important;
     margin-right: calc(var(--padding) * var(--space-factor) * -1) !important;
 }
 

apps/client/src/stylesheets/tree.css

@@ -15,7 +15,7 @@ span.fancytree-node.fancytree-hide {
     flex-shrink: 1;
     flex-grow: 1;
     overflow: hidden;
-    margin-left: 7px;
+    margin-inline-start: 7px;
     outline: none;
     position: relative;
     top: 2px;
@@ -80,7 +80,7 @@ span.fancytree-node.fancytree-hide {
     width: 12px;
     height: 12px;
     margin-top: 2px;
-    margin-left: 1px;
+    margin-inline-start: 1px;
     border-width: 1px;
     border-style: solid;
 }
@@ -229,14 +229,14 @@ span.fancytree-node.archived {
     display: none;
     font-size: 120%;
     cursor: pointer;
-    margin-left: 8px;
+    margin-inline-start: 8px;
     padding: 1px;
     border: 1px solid transparent;
     border-radius: 5px;
 }
 
 .unhoist-button.bx.tree-item-button {
-    margin-left: 0; /* unhoist button is on the left and doesn't need more margin */
+    margin-inline-start: 0; /* unhoist button is on the left and doesn't need more margin */
     display: block; /* keep always visible */
 }
 

apps/client/src/widgets/FloatingButtons.css

@@ -74,7 +74,7 @@
 
 .show-floating-buttons {
     /* display: none;*/
-    margin-left: 5px !important;
+    margin-inline-start: 5px !important;
 }
 
 .show-floating-buttons-button {
@@ -97,7 +97,7 @@
 
 /* #region Close floating buttons */
 .close-floating-buttons {
-    margin-left: 5px !important;
+    margin-inline-start: 5px !important;
 }
 
 .close-floating-buttons:first-child {

apps/client/src/widgets/attachment_detail.ts

@@ -30,7 +30,7 @@ const TPL = /*html*/`
         }
 
         .attachment-details {
-            margin-left: 10px;
+            margin-inline-start: 10px;
         }
 
         .attachment-content-wrapper {

apps/client/src/widgets/bulk_actions/BulkAction.tsx

@@ -13,7 +13,7 @@ interface BulkActionProps {
 // Define styles as constants to prevent recreation
 const flexContainerStyle = { display: "flex", alignItems: "center" } as const;
 const labelStyle = { marginRight: "10px" } as const;
-const textStyle = { marginRight: "10px", marginLeft: "10px" } as const;
+const textStyle = { marginRight: "10px", marginInlineStart: "10px" } as const;
 
 const BulkAction = memo(({ label, children, helpText, bulkAction }: BulkActionProps) => {
     return (

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

@@ -69,7 +69,7 @@ button.global-menu-button {
 }
 
 .global-menu .zoom-buttons {
-    margin-left: 2em;
+    margin-inline-start: 2em;
 }
 
 .global-menu .zoom-buttons a {
@@ -79,7 +79,7 @@ button.global-menu-button {
     color: var(--button-text-color);
     background-color: var(--button-background-color);
     padding: 3px;
-    margin-left: 3px;
+    margin-inline-start: 3px;
     text-decoration: none;
 }
 
@@ -88,7 +88,7 @@ button.global-menu-button {
 }
 
 .global-menu .zoom-state {
-    margin-left: 5px;
+    margin-inline-start: 5px;
     margin-right: 5px;
 }
 

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

@@ -93,7 +93,7 @@
 
 .board-view-container .board-column .edit-icon {
   opacity: 0;
-  margin-left: 0.5em;
+  margin-inline-start: 0.5em;
   transition: opacity 0.2s ease;
   color: var(--muted-text-color);
   cursor: pointer;

apps/client/src/widgets/dialogs/revisions.tsx

@@ -115,7 +115,7 @@ export default function RevisionsDialog() {
 
                 <div className="revision-content-wrapper" style={{
                     flexGrow: "1",
-                    marginLeft: "20px",
+                    marginInlineStart: "20px",
                     display: "flex",
                     flexDirection: "column",
                     maxWidth: "calc(100% - 150px)",

apps/client/src/widgets/note_map.ts

@@ -38,7 +38,7 @@ const TPL = /*html*/`<div class="note-map-widget">
             /* removing default appearance */
             -webkit-appearance: none;
             appearance: none;
-            margin-left: 15px;
+            margin-inline-start: 15px;
             width: 150px;
         }
 

apps/client/src/widgets/promoted_attributes.ts

@@ -45,7 +45,7 @@ const TPL = /*html*/`
     }
 
     .promoted-attribute-cell div.input-group {
-        margin-left: 10px;
+        margin-inline-start: 10px;
         display: flex;
         min-height: 40px;
     }

apps/client/src/widgets/react/FormToggle.css

@@ -18,7 +18,7 @@
 .switch-widget .switch-button {
     display: block;
     position: relative;
-    margin-left: 8px;
+    margin-inline-start: 8px;
     width: var(--switch-track-width);
     height: var(--switch-track-height);
     border-radius: 24px;
@@ -86,7 +86,7 @@
 
 .switch-widget .switch-help-button {
     border: 0;
-    margin-left: 4px;
+    margin-inline-start: 4px;
     background: none;
     cursor: pointer;
     font-size: 1.1em;

apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx

@@ -353,7 +353,7 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
                 >{t("note_language.configure-languages")}</FormListItem>
             </Dropdown>
 
-            <HelpButton helpPage="B0lcI9xz1r8K" style={{ marginLeft: "4px" }} />
+            <HelpButton helpPage="B0lcI9xz1r8K" style={{ marginInlineStart: "4px" }} />
 
             <Modal
                 className="content-languages-modal"

apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx

@@ -263,7 +263,7 @@ function AncestorOption({ note, ...restProps}: SearchOptionProps) {
         placeholder={t("ancestor.placeholder")}
       />
 
-      <div style="margin-left: 10px; margin-right: 10px">{t("ancestor.depth_label")}:</div>
+      <div style="margin-inline-start: 10px; margin-right: 10px">{t("ancestor.depth_label")}:</div>
       <FormSelect
         values={options}
         keyProperty="value" titleProperty="label"

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

@@ -11,7 +11,7 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    margin-left: 10px;
+    margin-inline-start: 10px;
     flex-grow: 1;
     flex-flow: row wrap;
 }
@@ -76,12 +76,12 @@
 .ribbon-button-container > * {
     position: relative;
     top: -3px;
-    margin-left: 10px;
+    margin-inline-start: 10px;
 }
 
 .ribbon-body {
     border-bottom: 1px solid var(--main-border-color);
-    margin-left: 10px;
+    margin-inline-start: 10px;
     margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */
 }
 
@@ -308,7 +308,7 @@
 
 /* #region Owned Attributes */
 .attribute-list {
-    margin-left: 7px;
+    margin-inline-start: 7px;
     margin-right: 7px;
     margin-top: 5px;
     margin-bottom: 2px;

apps/client/src/widgets/tab_row.ts

@@ -172,7 +172,7 @@ const TAB_ROW_TPL = `
     }
 
     .tab-row-widget .note-tab[is-small] .note-tab-title {
-        margin-left: 0;
+        margin-inline-start: 0;
     }
 
     .tab-row-widget .note-tab .note-tab-drag-handle {
@@ -240,13 +240,13 @@ const TAB_ROW_TPL = `
     }
 
     .tab-row-widget .note-tab[is-smaller] .note-tab-close {
-        margin-left: auto;
+        margin-inline-start: auto;
     }
     .tab-row-widget .note-tab[is-mini]:not([active]) .note-tab-close {
         display: none;
     }
     .tab-row-widget .note-tab[is-mini][active] .note-tab-close {
-        margin-left: auto;
+        margin-inline-start: auto;
         margin-right: auto;
     }
     @-moz-keyframes note-tab-was-just-added {

apps/client/src/widgets/toc.ts

@@ -103,12 +103,12 @@ const TPL = /*html*/`<div class="toc-widget">
         }
 
         .toc li .item-content {
-            margin-left: 25px;
+            margin-inline-start: 25px;
             flex: 1;
         }
 
         .toc li .collapse-button + .item-content {
-            margin-left: 4px;
+            margin-inline-start: 4px;
         }
 
         .toc li:hover {

apps/client/src/widgets/type_widgets/options/text_notes.tsx

@@ -62,7 +62,7 @@ function FormattingToolbar() {
                 name="multiline-toolbar"
                 label={t("editing.editor_type.multiline-toolbar")}
                 currentValue={textNoteEditorMultilineToolbar} onChange={setTextNoteEditorMultilineToolbar}
-                containerStyle={{ marginLeft: "1em" }}
+                containerStyle={{ marginInlineStart: "1em" }}
             />
         </OptionsSection>
     )