From 34117fa9ad6da8adadc107c3b46f05b01deb586a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 8 Oct 2025 17:45:58 +0300
Subject: [PATCH] feat(client/rtl): handle padding-left

---
 apps/client/src/layouts/mobile_layout.tsx     |  6 ++---
 apps/client/src/stylesheets/print.css         |  2 +-
 apps/client/src/stylesheets/style.css         | 26 +++++++++----------
 apps/client/src/stylesheets/table.css         |  6 ++---
 .../src/stylesheets/theme-next/dialogs.css    |  4 +--
 .../src/stylesheets/theme-next/forms.css      |  2 +-
 .../src/stylesheets/theme-next/notes/text.css |  2 +-
 .../src/stylesheets/theme-next/shell.css      | 26 +++++++++----------
 apps/client/src/stylesheets/tree.css          |  6 ++---
 apps/client/src/widgets/FloatingButtons.css   |  2 +-
 .../attribute_widgets/attribute_detail.ts     |  2 +-
 apps/client/src/widgets/basic_widget.ts       |  4 +--
 .../src/widgets/buttons/bookmark_folder.ts    |  2 +-
 .../src/widgets/collections/board/index.css   |  2 +-
 apps/client/src/widgets/dialogs/export.css    |  4 +--
 apps/client/src/widgets/highlights_list.ts    |  2 +-
 apps/client/src/widgets/llm_chat/ui.ts        |  2 +-
 apps/client/src/widgets/note_icon.css         |  4 +--
 apps/client/src/widgets/ribbon/style.css      |  2 +-
 apps/client/src/widgets/tab_row.ts            |  2 +-
 apps/client/src/widgets/toc.ts                |  8 +++---
 .../widgets/type_widgets/attachment_detail.ts |  2 +-
 .../widgets/type_widgets/attachment_list.ts   |  2 +-
 .../src/widgets/type_widgets/editable_text.ts |  4 +--
 .../type_widgets/options/code_notes.css       |  4 +--
 .../widgets/type_widgets/read_only_text.ts    |  2 +-
 26 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/apps/client/src/layouts/mobile_layout.tsx b/apps/client/src/layouts/mobile_layout.tsx
index 91953b1a3..6014fa810 100644
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -40,7 +40,7 @@ kbd {
     border: none;
     cursor: pointer;
     font-size: 1.25em;
-    padding-left: 0.5em;
+    padding-inline-start: 0.5em;
     padding-right: 0.5em;
     color: var(--main-text-color);
 }
@@ -59,7 +59,7 @@ const FANCYTREE_CSS = `
     margin-top: 0px;
     overflow-y: auto;
     contain: content;
-    padding-left: 10px;
+    padding-inline-start: 10px;
 }
 
 .fancytree-custom-icon {
@@ -126,7 +126,7 @@ export default class MobileLayout {
                             .class("d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-3 col-xl-3")
                             .id("mobile-sidebar-wrapper")
                             .css("max-height", "100%")
-                            .css("padding-left", "0")
+                            .css("padding-inline-start", "0")
                             .css("padding-right", "0")
                             .css("contain", "content")
                             .child(new FlexContainer("column").filling().id("mobile-sidebar-wrapper").child(new QuickSearchWidget()).child(new NoteTreeWidget().cssBlock(FANCYTREE_CSS)))
diff --git a/apps/client/src/stylesheets/print.css b/apps/client/src/stylesheets/print.css
index 114a52559..99f9f2a96 100644
--- a/apps/client/src/stylesheets/print.css
+++ b/apps/client/src/stylesheets/print.css
@@ -218,7 +218,7 @@ span[style] {
         --box-vert-offset: calc((1lh - var(--box-size)) / 2);
 
         display: inline-block;
-        padding-left: calc(var(--box-size) + var(--box-text-gap));
+        padding-inline-start: calc(var(--box-size) + var(--box-text-gap));
         /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-blank-outline/ */
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5C3.89%2c3 3%2c3.89 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5C21%2c3.89 20.1%2c3 19%2c3M19%2c5V19H5V5H19Z' /%3e%3c/svg%3e");
         background-position: 0 var(--box-vert-offset);
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 5e9b3daf3..ef1207e85 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -634,7 +634,7 @@ pre > button.copy-button:active {
 .full-text-search-button {
     cursor: pointer;
     font-size: 1.3em;
-    padding-left: 5px;
+    padding-inline-start: 5px;
     padding-right: 5px;
 }
 
@@ -642,14 +642,14 @@ pre > button.copy-button:active {
     cursor: pointer;
     font-size: 1.3em;
     background: inherit !important;
-    padding-left: 5px;
+    padding-inline-start: 5px;
     padding-right: 5px;
 }
 
 .open-external-link-button {
     cursor: pointer;
     font-size: 1.3em;
-    padding-left: 5px;
+    padding-inline-start: 5px;
     padding-right: 5px;
     padding-top: 8px;
 }
@@ -657,7 +657,7 @@ pre > button.copy-button:active {
 .go-to-selected-note-button {
     cursor: pointer;
     font-size: 1.3em;
-    padding-left: 4px;
+    padding-inline-start: 4px;
     padding-right: 3px;
 }
 
@@ -890,7 +890,7 @@ table.promoted-attributes-in-tooltip th {
 .aa-dropdown-menu .aa-suggestion .text {
     display: inline-block;
     width: calc(100% - 20px);
-    padding-left: 4px;
+    padding-inline-start: 4px;
 }
 
 .aa-dropdown-menu .aa-suggestion .search-result-title {
@@ -1076,7 +1076,7 @@ svg.ck-icon .note-icon {
 }
 
 .help-cards ul {
-    padding-left: 20px;
+    padding-inline-start: 20px;
 }
 
 .help-cards kbd {
@@ -1153,7 +1153,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 }
 
 .toast.no-title .toast-body {
-    padding-left: 0;
+    padding-inline-start: 0;
     padding-right: 0;
 }
 
@@ -1445,7 +1445,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 }
 
 .area-expander-text {
-    padding-left: 20px;
+    padding-inline-start: 20px;
     padding-right: 20px;
     white-space: nowrap;
 }
@@ -1789,7 +1789,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 }
 
 #right-pane .card-body ul {
-    padding-left: 25px;
+    padding-inline-start: 25px;
     margin-bottom: 5px;
 }
 
@@ -1966,7 +1966,7 @@ textarea {
 }
 
 body.electron.platform-darwin:not(.native-titlebar) .tab-row-container {
-    padding-left: 1em;
+    padding-inline-start: 1em;
 }
 
 #tab-row-left-spacer {
@@ -2049,7 +2049,7 @@ body.zen .title-row {
     display: block !important;
     height: unset !important;
     -webkit-app-region: drag;
-    padding-left: env(titlebar-area-x);
+    padding-inline-start: env(titlebar-area-x);
     padding-right: calc(100vw - env(titlebar-area-width, 100vw) + 2.5em);
 }
 
@@ -2280,7 +2280,7 @@ footer.webview-footer button {
     padding: 1em;
     margin: 1.25em 0;
     position: relative;
-    padding-left: 2.5em;
+    padding-inline-start: 2.5em;
     overflow: hidden;
 }
 
@@ -2338,7 +2338,7 @@ footer.webview-footer button {
 
 .thinking-step {
     margin-bottom: 8px;
-    padding-left: 10px;
+    padding-inline-start: 10px;
 }
 
 .thinking-step.observation {
diff --git a/apps/client/src/stylesheets/table.css b/apps/client/src/stylesheets/table.css
index 1579a6853..c77228a7e 100644
--- a/apps/client/src/stylesheets/table.css
+++ b/apps/client/src/stylesheets/table.css
@@ -90,7 +90,7 @@
 }
 
 .tabulator-row .tabulator-cell input {
-    padding-left: var(--cell-horiz-padding-size) !important;
+    padding-inline-start: var(--cell-horiz-padding-size) !important;
     padding-right: var(--cell-horiz-padding-size) !important;
 }
 
@@ -156,14 +156,14 @@
 /* Align items without children/expander to the ones with. */
 .tabulator-cell[tabulator-field="title"] > span:first-child,         /* 1st level */
 .tabulator-cell[tabulator-field="title"] > div:first-child + span {  /* sub-level */
-    padding-left: 21px;
+    padding-inline-start: 21px;
 }
 
 /* Checkbox cells */
 
 .tabulator .tabulator-cell:has(svg),
 .tabulator .tabulator-cell:has(input[type="checkbox"]) {
-    padding-left: 8px;
+    padding-inline-start: 8px;
     display: inline-flex;
     flex-direction: column;
     justify-content: center;
diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css
index 882e0b942..099c3df61 100644
--- a/apps/client/src/stylesheets/theme-next/dialogs.css
+++ b/apps/client/src/stylesheets/theme-next/dialogs.css
@@ -197,7 +197,7 @@ div.tn-tool-dialog {
     border: unset;
     padding-top: var(--timeline-item-top-padding);
     padding-bottom: var(--timeline-item-bottom-padding);
-    padding-left: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
+    padding-inline-start: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
     padding-right: var(--timeline-left-gap);
     color: var(--active-item-text-color);
 }
@@ -392,7 +392,7 @@ div.tn-tool-dialog {
 }
 
 .delete-notes-list .note-path {
-    padding-left: 8px;
+    padding-inline-start: 8px;
 }
 
 /*
diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css
index b548e97d1..9ed3844b0 100644
--- a/apps/client/src/stylesheets/theme-next/forms.css
+++ b/apps/client/src/stylesheets/theme-next/forms.css
@@ -462,7 +462,7 @@ optgroup {
         --box-label-gap: 0.5em;
 
         position: relative;
-        padding-left: calc(var(--box-size) + var(--box-label-gap)) !important;
+        padding-inline-start: calc(var(--box-size) + var(--box-label-gap)) !important;
         user-select: none;
     }
 
diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css
index 4c4e6cec2..e30099a86 100644
--- a/apps/client/src/stylesheets/theme-next/notes/text.css
+++ b/apps/client/src/stylesheets/theme-next/notes/text.css
@@ -492,7 +492,7 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck
     /* Move the label above the text box regardless of the text box state */
     transform: translate(0, calc(-.2em - var(--ck-input-label-height))) !important;
     
-    padding-left: 0 !important;
+    padding-inline-start: 0 !important;
     background: transparent;
     font-size: .85em;
     font-weight: 600;
diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index cdb9bae09..be0c598ea 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -450,7 +450,7 @@ div.bookmark-folder-widget .note-link:hover {
 }
 
 div.bookmark-folder-widget .note-link a {
-    padding-left: 8px;
+    padding-inline-start: 8px;
     color: var(--menu-text-color);
     cursor: default;
 }
@@ -471,7 +471,7 @@ div.bookmark-folder-widget .note-link .bx {
 
 div.quick-search {
     --padding-top: 8px;
-    --padding-left: 8px;
+    --padding-inline-start: 8px;
     --padding-right: 8px;
     --padding-bottom: 8px;
 
@@ -480,7 +480,7 @@ div.quick-search {
     align-items: center;
     height: unset;
     contain: unset;
-    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
+    padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-inline-start);
 }
 
 div.quick-search,
@@ -496,7 +496,7 @@ div.quick-search::before {
     position: absolute;
     content: "";
     top: var(--padding-top);
-    left: var(--padding-left);
+    left: var(--padding-inline-start);
     bottom: var(--padding-bottom);
     right: var(--padding-right);
     z-index: 0;
@@ -520,7 +520,7 @@ div.quick-search:focus-within:before {
 }
 
 div.quick-search input {
-    padding-left: 15px !important;
+    padding-inline-start: 15px !important;
     box-shadow: unset !important;
     background: transparent !important;
 }
@@ -631,12 +631,12 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
 }
 
 #left-pane .ui-fancytree ul {
-    padding-left: 10px;
+    padding-inline-start: 10px;
 }
 
 /* The root element of the tree */
 #left-pane .fancytree-container > li:first-child > span {
-    padding-left: 12px;
+    padding-inline-start: 12px;
 }
 
 #left-pane span.fancytree-node.fancytree-active {
@@ -1237,7 +1237,7 @@ body.mobile .note-title {
     --input-background-color: transparent;
 
     border-radius: 8px;
-    padding-left: 12px;
+    padding-inline-start: 12px;
 }
 
 /* The "Change note icon" button */
@@ -1326,7 +1326,7 @@ div.promoted-attributes-container input {
 
 /* A promoted attribute card */
 div.promoted-attribute-cell {
-    --pa-card-padding-left: 16px;
+    --pa-card-padding-inline-start: 16px;
     --pa-card-padding-right: 2px;
     --input-background-color: transparent;
 
@@ -1335,7 +1335,7 @@ div.promoted-attribute-cell {
     display: inline-flex;
     margin: 0;
     border-radius: 8px;
-    padding: 2px var(--pa-card-padding-right) 2px var(--pa-card-padding-left);
+    padding: 2px var(--pa-card-padding-right) 2px var(--pa-card-padding-inline-start);
     background: var(--promoted-attribute-card-background-color);
     overflow-y: visible;
 }
@@ -1350,7 +1350,7 @@ div.promoted-attribute-cell {
 /* A promoted attribute card (boolean attribute) */
 div.promoted-attribute-cell:has(input[type="checkbox"]):not(:has(.multiplicity > span)) {
     /* Checbox attribute, without multiplicity */
-    padding-right: var(--pa-card-padding-left);
+    padding-right: var(--pa-card-padding-inline-start);
 }
 
 div.promoted-attribute-cell > * {
@@ -1408,7 +1408,7 @@ div.promoted-attribute-cell .multiplicity:has(span) {
     --icon-button-size: 24px;
 
     margin-inline-start: 8px;
-    margin-inline-end: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right));
+    margin-inline-end: calc(var(--pa-card-padding-inline-start) - var(--pa-card-padding-right));
     font-size: 0; /* Prevent whitespaces creating a gap between buttons */
     display: flex;
 }
@@ -1637,7 +1637,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 }
 
 .find-replace-widget .form-check {
-    padding-left: 0;
+    padding-inline-start: 0;
     white-space: nowrap;
 }
 
diff --git a/apps/client/src/stylesheets/tree.css b/apps/client/src/stylesheets/tree.css
index 00e131936..df7d00bd7 100644
--- a/apps/client/src/stylesheets/tree.css
+++ b/apps/client/src/stylesheets/tree.css
@@ -1,5 +1,5 @@
 ul.fancytree-container {
-    padding-left: 0;
+    padding-inline-start: 0;
 }
 
 ul.fancytree-container li {
@@ -169,11 +169,11 @@ span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-tit
 
 /* first nesting level has lower left padding to avoid extra left padding. Other levels are not affected */
 .ui-fancytree > li > ul {
-    padding-left: 5px;
+    padding-inline-start: 5px;
 }
 
 .ui-fancytree ul {
-    padding-left: 20px;
+    padding-inline-start: 20px;
 }
 
 span.fancytree-active {
diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css
index 56a6c20b0..6106ff9fc 100644
--- a/apps/client/src/widgets/FloatingButtons.css
+++ b/apps/client/src/widgets/FloatingButtons.css
@@ -151,7 +151,7 @@
 
 .backlink-excerpt {
     border-left: 2px solid var(--main-border-color);
-    padding-left: 10px;
+    padding-inline-start: 10px;
     opacity: 80%;
     font-size: 90%;
 }
diff --git a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
index 7ce3372b9..f39f43fae 100644
--- a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
+++ b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
@@ -36,7 +36,7 @@ const TPL = /*html*/`
         }
 
         .related-notes-list {
-            padding-left: 20px;
+            padding-inline-start: 20px;
             margin-top: 10px;
             margin-bottom: 10px;
         }
diff --git a/apps/client/src/widgets/basic_widget.ts b/apps/client/src/widgets/basic_widget.ts
index e33267daf..61499dbda 100644
--- a/apps/client/src/widgets/basic_widget.ts
+++ b/apps/client/src/widgets/basic_widget.ts
@@ -76,7 +76,7 @@ export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedCompon
     /**
      * Sets the CSS attribute of the given name to the given value.
      *
-     * @param name the name of the CSS attribute to set (e.g. `padding-left`).
+     * @param name the name of the CSS attribute to set (e.g. `padding-inline-start`).
      * @param value the value of the CSS attribute to set (e.g. `12px`).
      * @returns self for chaining.
      */
@@ -89,7 +89,7 @@ export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedCompon
      * Sets the CSS attribute of the given name to the given value, but only if the condition provided is truthy.
      *
      * @param condition `true` in order to apply the CSS, `false` to ignore it.
-     * @param name the name of the CSS attribute to set (e.g. `padding-left`).
+     * @param name the name of the CSS attribute to set (e.g. `padding-inline-start`).
      * @param value the value of the CSS attribute to set (e.g. `12px`).
      * @returns self for chaining.
      */
diff --git a/apps/client/src/widgets/buttons/bookmark_folder.ts b/apps/client/src/widgets/buttons/bookmark_folder.ts
index b41a88ef8..b749a1ab6 100644
--- a/apps/client/src/widgets/buttons/bookmark_folder.ts
+++ b/apps/client/src/widgets/buttons/bookmark_folder.ts
@@ -35,7 +35,7 @@ const DROPDOWN_TPL = `
         }
 
         .bookmark-folder-widget li .note-link {
-            padding-left: 35px;
+            padding-inline-start: 35px;
         }
     </style>
 
diff --git a/apps/client/src/widgets/collections/board/index.css b/apps/client/src/widgets/collections/board/index.css
index 318b645ab..1cc663354 100644
--- a/apps/client/src/widgets/collections/board/index.css
+++ b/apps/client/src/widgets/collections/board/index.css
@@ -168,7 +168,7 @@
   right: 4px;
   color: var(--main-text-color);
   background-color: var(--main-background-color);
-  padding-left: 6px;
+  padding-inline-start: 6px;
 }
 
 .board-view-container .board-note.fade-in {
diff --git a/apps/client/src/widgets/dialogs/export.css b/apps/client/src/widgets/dialogs/export.css
index a3916d1be..a0903b06c 100644
--- a/apps/client/src/widgets/dialogs/export.css
+++ b/apps/client/src/widgets/dialogs/export.css
@@ -4,11 +4,11 @@
 }
 
 .export-dialog form .format-choice {
-    padding-left: 40px;
+    padding-inline-start: 40px;
 }
 
 .export-dialog form .opml-versions {
-    padding-left: 60px;
+    padding-inline-start: 60px;
 }
 
 .export-dialog form .form-check-label {
diff --git a/apps/client/src/widgets/highlights_list.ts b/apps/client/src/widgets/highlights_list.ts
index c9843a479..5023facb9 100644
--- a/apps/client/src/widgets/highlights_list.ts
+++ b/apps/client/src/widgets/highlights_list.ts
@@ -24,7 +24,7 @@ const TPL = /*html*/`<div class="highlights-list-widget">
         }
 
         .highlights-list > ol {
-            padding-left: 20px;
+            padding-inline-start: 20px;
         }
 
         .highlights-list li {
diff --git a/apps/client/src/widgets/llm_chat/ui.ts b/apps/client/src/widgets/llm_chat/ui.ts
index a17167840..29bdf8d93 100644
--- a/apps/client/src/widgets/llm_chat/ui.ts
+++ b/apps/client/src/widgets/llm_chat/ui.ts
@@ -9,7 +9,7 @@ import { formatMarkdown, applyHighlighting } from "./utils.js";
 export const TPL = `
 <div class="note-context-chat h-100 w-100 d-flex flex-column">
     <!-- Move validation warning outside the card with better styling -->
-    <div class="provider-validation-warning alert alert-warning m-2 border-left border-warning" style="display: none; padding-left: 15px; border-left: 4px solid #ffc107; background-color: rgba(255, 248, 230, 0.9); font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05);"></div>
+    <div class="provider-validation-warning alert alert-warning m-2 border-left border-warning" style="display: none; padding-inline-start: 15px; border-left: 4px solid #ffc107; background-color: rgba(255, 248, 230, 0.9); font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05);"></div>
 
     <div class="note-context-chat-container flex-grow-1 overflow-auto p-3">
         <div class="note-context-chat-messages"></div>
diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css
index acfbfaa03..810438a8a 100644
--- a/apps/client/src/widgets/note_icon.css
+++ b/apps/client/src/widgets/note_icon.css
@@ -1,5 +1,5 @@
 .note-icon-widget {
-    padding-left: 7px;
+    padding-inline-start: 7px;
     margin-inline-end: 0;
     width: 50px;
     height: 50px;
@@ -36,7 +36,7 @@
 
 .note-icon-widget .filter-row span {
     display: block;
-    padding-left: 15px;
+    padding-inline-start: 15px;
     padding-right: 15px;
     font-weight: bold;
 }
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index c4809c853..f43e8c111 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -49,7 +49,7 @@
 }
 
 .ribbon-tab-title:first-of-type {
-    padding-left: 10px;
+    padding-inline-start: 10px;
 }
 
 .ribbon-tab-spacer {
diff --git a/apps/client/src/widgets/tab_row.ts b/apps/client/src/widgets/tab_row.ts
index 548dd7cd1..ce8682d66 100644
--- a/apps/client/src/widgets/tab_row.ts
+++ b/apps/client/src/widgets/tab_row.ts
@@ -155,7 +155,7 @@ const TAB_ROW_TPL = `
     }
 
     .tab-row-widget .note-tab[is-mini] .note-tab-wrapper {
-        padding-left: 2px;
+        padding-inline-start: 2px;
         padding-right: 2px;
     }
 
diff --git a/apps/client/src/widgets/toc.ts b/apps/client/src/widgets/toc.ts
index b2858cf71..cf8858171 100644
--- a/apps/client/src/widgets/toc.ts
+++ b/apps/client/src/widgets/toc.ts
@@ -29,13 +29,13 @@ const TPL = /*html*/`<div class="toc-widget">
             contain: none;
             overflow: auto;
             position: relative;
-            padding-left:0px !important;
+            padding-inline-start:0px !important;
         }
 
         .toc ol {
             position: relative;
             overflow: hidden;
-            padding-left: 0px;
+            padding-inline-start: 0px;
             transition: max-height 0.3s ease;
         }
 
@@ -56,7 +56,7 @@ const TPL = /*html*/`<div class="toc-widget">
             position: relative;
             list-style: none;
             align-items: center;
-            padding-left: 7px;
+            padding-inline-start: 7px;
             cursor: pointer;
             text-align: justify;
             word-wrap: break-word;
@@ -84,7 +84,7 @@ const TPL = /*html*/`<div class="toc-widget">
         }
 
         .toc li {
-            padding-left: calc((var(--toc-depth-level) - 1) * 20px + 4px);
+            padding-inline-start: calc((var(--toc-depth-level) - 1) * 20px + 4px);
         }
 
         .toc li .collapse-button {
diff --git a/apps/client/src/widgets/type_widgets/attachment_detail.ts b/apps/client/src/widgets/type_widgets/attachment_detail.ts
index 9dbfa5210..fe9f750e6 100644
--- a/apps/client/src/widgets/type_widgets/attachment_detail.ts
+++ b/apps/client/src/widgets/type_widgets/attachment_detail.ts
@@ -11,7 +11,7 @@ const TPL = /*html*/`
 <div class="attachment-detail note-detail-printable">
     <style>
         .attachment-detail {
-            padding-left: 15px;
+            padding-inline-start: 15px;
             padding-right: 15px;
             height: 100%;
             display: flex;
diff --git a/apps/client/src/widgets/type_widgets/attachment_list.ts b/apps/client/src/widgets/type_widgets/attachment_list.ts
index aced1223c..8ce13175b 100644
--- a/apps/client/src/widgets/type_widgets/attachment_list.ts
+++ b/apps/client/src/widgets/type_widgets/attachment_list.ts
@@ -9,7 +9,7 @@ const TPL = /*html*/`
 <div class="attachment-list note-detail-printable">
     <style>
         .attachment-list {
-            padding-left: 15px;
+            padding-inline-start: 15px;
             padding-right: 15px;
         }
 
diff --git a/apps/client/src/widgets/type_widgets/editable_text.ts b/apps/client/src/widgets/type_widgets/editable_text.ts
index a092ae696..8a2103c1b 100644
--- a/apps/client/src/widgets/type_widgets/editable_text.ts
+++ b/apps/client/src/widgets/type_widgets/editable_text.ts
@@ -21,7 +21,7 @@ const TPL = /*html*/`
     <style>
     .note-detail-editable-text {
         font-family: var(--detail-font-family);
-        padding-left: 14px;
+        padding-inline-start: 14px;
         padding-top: 10px;
         height: 100%;
     }
@@ -32,7 +32,7 @@ const TPL = /*html*/`
     }
 
     body.mobile .note-detail-editable-text {
-        padding-left: 4px;
+        padding-inline-start: 4px;
     }
 
     .note-detail-editable-text a:hover {
diff --git a/apps/client/src/widgets/type_widgets/options/code_notes.css b/apps/client/src/widgets/type_widgets/options/code_notes.css
index 7b51f619d..c8f8ad9fd 100644
--- a/apps/client/src/widgets/type_widgets/options/code_notes.css
+++ b/apps/client/src/widgets/type_widgets/options/code_notes.css
@@ -2,7 +2,7 @@
 .options-mime-types {
     list-style-type: none;
     column-width: 250px;
-    padding-left: 0;
+    padding-inline-start: 0;
 }
 
 .options-mime-types > section {
@@ -11,6 +11,6 @@
 }
 
 .options-mime-types ul {
-    padding-left: 0;
+    padding-inline-start: 0;
 }
 /* #endregion */
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/read_only_text.ts b/apps/client/src/widgets/type_widgets/read_only_text.ts
index 59f99af33..51c83cd5b 100644
--- a/apps/client/src/widgets/type_widgets/read_only_text.ts
+++ b/apps/client/src/widgets/type_widgets/read_only_text.ts
@@ -41,7 +41,7 @@ const TPL = /*html*/`
     }
 
     body.mobile .note-detail-readonly-text {
-        padding-left: 10px;
+        padding-inline-start: 10px;
     }
 
     .note-detail-readonly-text p:first-child, .note-detail-readonly-text::before {