spree_admin 5.5.3 → 5.6.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7e631d3077a757dbf4d85a7d7186f3a540aa212194a760bd2fd0b84c868b10f5
-  data.tar.gz: 5696eeb0ae858a76b940650bf801ac03466372f1cd5529ae7a7a9c027f46b53f
+  metadata.gz: 112e0c3ee899331fe67fe9874d7db6b61b37e9d550acfed787b83122370014e9
+  data.tar.gz: 044e5b68c2fea6efe2d86709ca3d450914d9b1605945f38667ffca087ab0ff0e
 SHA512:
-  metadata.gz: bf5b38f7ee184476edc920994977207aa759a4aa7eabc6cf7efdc9eaff19715acc483fede552caa935127787d667e6b33a39ea572360ab8fcaf7a6f698f10089
-  data.tar.gz: a295010282908ae8e0e4f8a00413153b9eea9623213e8a4d2ab57033ccca239d2d969112c12acbe71d8de863272369b18b536c151070a4afdd811663b7dc5e31
+  metadata.gz: 35b0083ddb0541ca5bc4e2c4e33ec788335a97636cb907cbea742b5524bf9dbba311057de5fcc3439805a08eda45e92318626dc62650e38fc505cef2e1754794
+  data.tar.gz: 361c2693dc6870aab5bc23b95f45b43121e05c76d889058e7a0f69474520314c5cccbcf9af0993746feadc50d050b3b5236a3bef52034f7b4ef1426a32d53f31

data/app/assets/images/vercel-deploy-button.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="103" height="32" fill="none">
+  <rect width="103" height="32" fill="#1A1A1A" rx="6"/>
+  <rect width="102" height="31" x=".5" y=".5" stroke="#fff" stroke-opacity=".14" rx="5.5" />
+  <g clip-path="url(#a)">
+    <path fill="#EDEDED" fill-rule="evenodd" d="m16 10.75 6 10.5H10l6-10.5Z" clip-rule="evenodd" />
+  </g>
+  <path stroke="#fff" stroke-opacity=".14" d="M31.5 1v30" />
+  <path fill="#EDEDED" d="M47.4 11.06c3.1 0 4.85 1.8 4.85 4.98 0 3.18-1.7 4.96-4.77 4.96h-3.26v-9.94h3.18Zm-1.7 8.57h1.7c2.22 0 3.31-1.18 3.31-3.59 0-2.43-1.09-3.6-3.31-3.6h-1.7v7.19Zm7.83-2.34c0-2.37 1.38-3.88 3.51-3.88 1.74 0 3.25 1.15 3.33 3.8l.02.5h-5.34c.12 1.39.82 2.2 2 2.2.73 0 1.4-.42 1.7-1.14l1.53.12a3.3 3.3 0 0 1-3.24 2.28c-2.13 0-3.51-1.51-3.51-3.88Zm1.55-.7h3.77c-.2-1.43-.97-1.92-1.8-1.92-1.1 0-1.79.72-1.97 1.92Zm6.98 6.51v-9.52h1.36l.04 1.08c.4-.8 1.17-1.25 2.25-1.25 2.19 0 3.2 1.8 3.2 3.88 0 2.07-1.01 3.88-3.2 3.88-1.02 0-1.78-.4-2.2-1.18v3.11h-1.45Zm1.31-5.81c0 1.33.6 2.6 2 2.6 1.42 0 2-1.26 2-2.6 0-1.33-.58-2.6-2-2.6-1.4 0-2 1.27-2 2.6Zm7.36-6.23h1.45v8.25c0 .33.16.49.48.49h.62V21h-.93c-.98 0-1.62-.63-1.62-1.62v-8.32Zm7.1 10.1c-2.13 0-3.52-1.5-3.52-3.87s1.39-3.88 3.51-3.88c2.13 0 3.52 1.51 3.52 3.88s-1.39 3.88-3.52 3.88Zm-2-3.87c0 1.62.72 2.6 2 2.6 1.27 0 2-.98 2-2.6s-.73-2.6-2-2.6c-1.28 0-2 .98-2 2.6Zm6.07-3.71h1.49l2.11 5.88 2.05-5.88h1.47l-2.97 8.29c-.31.85-.87 1.23-1.78 1.23h-1v-1.19h.8c.38 0 .6-.14.73-.49l.25-.63h-.46l-2.69-7.21Z"/>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h12v12H0z" fill-opacity="1" transform="translate(10 10)"/>
+    </clipPath>
+  </defs>
+</svg>

data/app/assets/tailwind/spree/admin/components/_alerts.css

@@ -4,11 +4,15 @@
 
 @layer components {
   .alert {
-    @apply inline-flex flex-col justify-center relative bg-no-repeat py-3 px-4 pl-11 mb-4 min-h-10 border border-transparent rounded-lg;
+    @apply inline-flex flex-col justify-center relative bg-no-repeat py-3 px-4 ps-11 mb-4 min-h-10 border border-transparent rounded-lg;
     background-position: 1rem center;
     background-size: 1rem 1rem;
   }
 
+  [dir="rtl"] .alert {
+    background-position: right 1rem center;
+  }
+
   .alert > p:last-child {
     @apply mb-0;
   }

data/app/assets/tailwind/spree/admin/components/_badges.css

@@ -8,7 +8,7 @@
   }
 
   .badge i {
-    @apply mr-1 text-[100%];
+    @apply me-1 text-[100%];
   }
 
   .badge .ti {

data/app/assets/tailwind/spree/admin/components/_breadcrumbs.css

@@ -5,7 +5,7 @@
 @layer components {
   .breadcrumb {
     @apply flex flex-wrap items-center mb-0 list-none font-medium bg-transparent rounded-none;
-    @apply gap-2 p-0 pl-4 h-8 border-l border-gray-100;
+    @apply gap-2 p-0 ps-4 h-8 border-s border-gray-100;
   }
 
   .breadcrumb li a {

data/app/assets/tailwind/spree/admin/components/_buttons.css

@@ -109,6 +109,6 @@
   }
 
   .actions .btn {
-    @apply ml-1;
+    @apply ms-1;
   }
 }

data/app/assets/tailwind/spree/admin/components/_cards.css

@@ -127,7 +127,7 @@
   }
 
   .card-link + .card-link {
-    @apply ml-3;
+    @apply ms-3;
   }
 
   .card-img-top {

data/app/assets/tailwind/spree/admin/components/_dialogs.css

@@ -69,7 +69,9 @@
      ========================================================================== */
 
   .drawer {
-    @apply fixed top-0 right-0 left-auto flex-col justify-between p-0 overflow-hidden;
+    @apply fixed top-0 flex-col justify-between p-0 overflow-hidden;
+    inset-inline-end: 0;
+    inset-inline-start: auto;
     height: calc(100dvh - 1rem);
     max-height: calc(100dvh - 1rem);
     width: calc(100vw - 1rem);

data/app/assets/tailwind/spree/admin/components/_dropdowns.css

@@ -73,11 +73,11 @@
 
   .dropdown-item {
     @apply flex items-center justify-start w-full clear-both text-inherit no-underline whitespace-nowrap bg-transparent border-0 font-normal;
-    @apply h-8 mb-1 pr-8 rounded-xl transition-colors duration-75 ease-linear gap-3;
+    @apply h-8 mb-1 pe-8 rounded-xl transition-colors duration-75 ease-linear gap-3;
   }
 
   .dropdown-item .badge {
-    @apply ml-auto self-center;
+    @apply ms-auto self-center;
   }
 
   .dropdown-item:hover,

data/app/assets/tailwind/spree/admin/components/_filters.css

@@ -17,7 +17,7 @@
 
 
   #table-filter {
-    @apply absolute p-4 rounded-2xl shadow-dropdown bg-white mt-2 right-2 w-full overflow-y-auto;
+    @apply absolute p-4 rounded-2xl shadow-dropdown bg-white mt-2 end-2 w-full overflow-y-auto;
     animation: fadeIn 0.2s ease-in-out;
     z-index: 1050;
     max-height: calc(100vh - var(--spacing-header-height) - 4rem);

data/app/assets/tailwind/spree/admin/components/_forms.css

@@ -124,11 +124,11 @@
   }
 
   .custom-control-label {
-    @apply relative mb-0 align-top cursor-pointer select-none pl-7 font-normal;
+    @apply relative mb-0 align-top cursor-pointer select-none ps-7 font-normal;
   }
 
   .custom-control-label::before {
-    @apply absolute left-0 top-0.5 block pointer-events-none bg-white border border-gray-300 rounded;
+    @apply absolute start-0 top-0.5 block pointer-events-none bg-white border border-gray-300 rounded;
     content: "";
     width: 1.125rem;
     height: 1.125rem;
@@ -139,7 +139,7 @@
   }
 
   .custom-control-label::after {
-    @apply absolute left-0 top-0.5 block bg-no-repeat bg-center;
+    @apply absolute start-0 top-0.5 block bg-no-repeat bg-center;
     content: "";
     width: 1.125rem;
     height: 1.125rem;
@@ -207,18 +207,18 @@
 
   /* Custom switch styles */
   .custom-switch {
-    @apply pl-12;
+    @apply ps-12;
   }
 
   .custom-switch .custom-control-label::before {
-    @apply left-0 rounded-full bg-gray-200 border-gray-200;
+    @apply start-0 rounded-full bg-gray-200 border-gray-200;
     width: 2.5rem;
     height: 1.25rem;
     pointer-events: all;
   }
 
   .custom-switch .custom-control-label::after {
-    @apply left-0.5 top-1 rounded-full bg-white shadow;
+    @apply start-0.5 top-1 rounded-full bg-white shadow;
     width: 1rem;
     height: 1rem;
     transition:
@@ -235,6 +235,10 @@
     transform: translateX(1.25rem);
   }
 
+  [dir="rtl"] .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
+    transform: translateX(-1.25rem);
+  }
+
   .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
     @apply ring-2 ring-blue-500/25 ring-offset-1;
   }

data/app/assets/tailwind/spree/admin/components/_layout.css

@@ -8,17 +8,17 @@
     height: var(--spacing-header-height);
     background-color: var(--color-white);
     box-shadow: inset 0 -1px 0 var(--color-gray-200);
-    transition: margin-left 0.1s ease;
+    transition: margin-inline-start 0.1s ease;
   }
 
   @media (min-width: 992px) {
     #header {
-      margin-left: var(--spacing-sidebar-width);
+      margin-inline-start: var(--spacing-sidebar-width);
     }
   }
 
   body.sidebar-collapsed #header {
-    margin-left: var(--spacing-sidebar-collapsed);
+    margin-inline-start: var(--spacing-sidebar-collapsed);
   }
 
   #page-header {
@@ -48,17 +48,17 @@
   #settings-header {
     @apply sticky top-0 flex items-center p-0 bg-white z-1000;
     height: var(--spacing-header-height);
-    transition: margin-left 0.1s ease;
+    transition: margin-inline-start 0.1s ease;
   }
 
   @media (min-width: 992px) {
     #settings-header {
-      margin-left: var(--spacing-sidebar-width);
+      margin-inline-start: var(--spacing-sidebar-width);
     }
   }
 
   body.sidebar-collapsed #settings-header {
-    margin-left: var(--spacing-sidebar-collapsed);
+    margin-inline-start: var(--spacing-sidebar-collapsed);
   }
 
   #settings-header #page-header {
@@ -93,18 +93,18 @@
 
   /* Main Content */
   #content {
-    transition: margin-left 0.1s ease;
+    transition: margin-inline-start 0.1s ease;
   }
 
   @media (min-width: 992px) {
     #content {
-      margin-left: calc(var(--spacing-sidebar-width) + 1px);
+      margin-inline-start: calc(var(--spacing-sidebar-width) + 1px);
     }
   }
 
   /* Store Dropdown */
   .store-dropdown {
-    @apply flex items-center justify-between pr-3 pl-2 mr-px;
+    @apply flex items-center justify-between pe-3 ps-2 me-px;
     transition: padding 0.1s ease;
     height: var(--spacing-header-height);
   }
@@ -131,7 +131,7 @@
 
   /* User Dropdown */
   .user-dropdown {
-    @apply hidden items-center justify-between p-2 bg-gray-25 border-t border-gray-200 mt-auto mr-px;
+    @apply hidden items-center justify-between p-2 bg-gray-25 border-t border-gray-200 mt-auto me-px;
   }
 
   @media (min-width: 992px) {
@@ -175,7 +175,8 @@
   #main-sidebar {
     @apply flex flex-col gap-0 bg-gray-25 h-screen overflow-x-hidden fixed top-0;
     width: var(--spacing-sidebar-width);
-    box-shadow: inset -1px 0 0 var(--color-gray-200);
+    inset-inline-start: 0;
+    border-inline-end: 1px solid var(--color-gray-200);
   }
 
   @media (max-width: 992px) {
@@ -198,7 +199,7 @@
   }
 
   #main-sidebar .nav-link .ti {
-    @apply mr-2 rounded-lg shrink-0 text-gray-400 transition-colors duration-200 ease-in-out;
+    @apply me-2 rounded-lg shrink-0 text-gray-400 transition-colors duration-200 ease-in-out;
     padding: 0.2rem;
   }
 
@@ -224,11 +225,11 @@
   }
 
   #main-sidebar .nav-submenu {
-    @apply flex flex-col list-none pt-1 pl-8 relative;
+    @apply flex flex-col list-none pt-1 ps-8 relative;
   }
 
   #main-sidebar .nav-submenu:before {
-    @apply absolute bg-gray-200 left-4 top-0 bottom-1;
+    @apply absolute bg-gray-200 start-4 top-0 bottom-1;
     content: '';
     width: 1px;
   }
@@ -252,7 +253,7 @@
   #main-sidebar .nav-submenu .nav-link:focus:before {
     @apply absolute bg-zinc-950 rounded-sm;
     content: '';
-    left: calc(-1rem - 1px);
+    inset-inline-start: calc(-1rem - 1px);
     top: 10%;
     width: 3px;
     height: 80%;
@@ -309,7 +310,7 @@
   }
 
   body.sidebar-collapsed #main-sidebar .sidebar-content .nav > .nav-item > .nav-link .badge {
-    @apply flex absolute top-0 right-0 justify-center items-center text-2xs px-1 py-0 rounded-full;
+    @apply flex absolute top-0 end-0 justify-center items-center text-2xs px-1 py-0 rounded-full;
     transform: translate(25%, -25%);
     min-width: 18px;
     height: 18px;
@@ -414,7 +415,7 @@
   }
 
   body.sidebar-collapsed #content {
-    margin-left: calc(var(--spacing-sidebar-collapsed) + 1px);
+    margin-inline-start: calc(var(--spacing-sidebar-collapsed) + 1px);
   }
 
   /* Mobile Sidebar */
@@ -427,8 +428,14 @@
   }
 
   .sidebar-mobile .sidebar-panel {
-    @apply absolute left-0 top-0 bottom-0 bg-gray-25 overflow-y-auto flex flex-col shadow-lg transition-transform duration-500 -translate-x-full;
+    @apply absolute top-0 bottom-0 bg-gray-25 overflow-y-auto flex flex-col shadow-lg transition-transform duration-500;
+    inset-inline-start: 0;
     width: var(--spacing-sidebar-width);
+    transform: translateX(-100%);
+  }
+
+  [dir="rtl"] .sidebar-mobile .sidebar-panel {
+    transform: translateX(100%);
   }
 
   .sidebar-mobile .sidebar-mobile-header {
@@ -459,7 +466,7 @@
   }
 
   .sidebar-mobile .sidebar-mobile-content .nav-link .ti {
-    @apply mr-2 rounded-lg  shrink-0;
+    @apply me-2 rounded-lg  shrink-0;
     padding: 0.2rem;
   }
 
@@ -485,11 +492,11 @@
   }
 
   .sidebar-mobile .sidebar-mobile-content .nav-submenu {
-    @apply flex flex-col list-none pt-1 pl-8 relative;
+    @apply flex flex-col list-none pt-1 ps-8 relative;
   }
 
   .sidebar-mobile .sidebar-mobile-content .nav-submenu:before {
-    @apply absolute bg-gray-200 left-4 top-0 bottom-1;
+    @apply absolute bg-gray-200 start-4 top-0 bottom-1;
     content: '';
     width: 1px;
   }
@@ -513,7 +520,7 @@
   .sidebar-mobile .sidebar-mobile-content .nav-submenu .nav-link:focus:before {
     @apply absolute bg-zinc-950 rounded-sm;
     content: '';
-    left: calc(-1rem - 1px);
+    inset-inline-start: calc(-1rem - 1px);
     top: 10%;
     width: 3px;
     height: 80%;
@@ -565,7 +572,7 @@
   }
 
   #enterprise-edition-notice .btn-close {
-    @apply absolute right-1 top-1 text-inherit!;
+    @apply absolute end-1 top-1 text-inherit!;
   }
 
   #enterprise-edition-notice .btn-close:hover {

data/app/assets/tailwind/spree/admin/components/_rtl.css

@@ -0,0 +1,53 @@
+/* ==========================================================================
+   RTL — direction-specific rules that logical properties can't express.
+
+   Layout/spacing flips are handled in the base component CSS via logical
+   utilities (ms-/me-/ps-/pe-/start-/end-/border-s/border-e) and logical
+   properties (margin-inline-start, inset-inline-start, …), which mirror
+   automatically under <html dir="rtl">. Only transforms, keyframe
+   animations, background positions, and the script font remain here.
+   ========================================================================== */
+
+@layer components {
+  /* Arabic-capable typeface for RTL locales */
+  [dir="rtl"] body.admin {
+    font-family: "Noto Sans Arabic", "Geist", ui-sans-serif, system-ui, sans-serif;
+  }
+
+  /* Sidebar collapse chevron — rotation is a transform, not a logical prop */
+  [dir="rtl"] body.sidebar-collapsed .sidebar-toggle-btn {
+    transform: rotate(0deg);
+  }
+
+  /* Collapsed nav badge — translate must flip horizontally */
+  [dir="rtl"] body.sidebar-collapsed #main-sidebar .sidebar-content .nav > .nav-item > .nav-link .badge {
+    transform: translate(-25%, -25%);
+  }
+
+  /* Drawer slides from the inline-start edge in RTL */
+  [dir="rtl"] .drawer[open] {
+    animation: slideInLeft 0.25s ease-out forwards;
+  }
+
+  [dir="rtl"] dialog.drawer[closing] {
+    animation: slideOutLeft 0.2s ease-in forwards;
+  }
+
+  @keyframes slideInLeft {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideOutLeft {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+}

data/app/assets/tailwind/spree/admin/components/_search-picker.css

@@ -8,7 +8,7 @@
   }
 
   .search-picker__option {
-    @apply relative mb-2 flex cursor-pointer items-center border border-transparent rounded-md pr-8;
+    @apply relative mb-2 flex cursor-pointer items-center border border-transparent rounded-md pe-8;
   }
 
   .search-picker__option label {
@@ -29,7 +29,7 @@
   }
 
   .search-picker__option:has(input:checked)::after {
-    @apply inline-block absolute right-2 w-6 h-6;
+    @apply inline-block absolute end-2 w-6 h-6;
     content: '';
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-check text-zinc-950"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10"/></svg>') no-repeat center center;
   }

data/app/assets/tailwind/spree/admin/components/_tables.css

@@ -121,7 +121,7 @@
 
   /* Filters search bar */
   #filters-search-bar {
-    @apply max-w-xs mr-auto;
+    @apply max-w-xs me-auto;
   }
 
   /* Table active filters */

data/app/assets/tailwind/spree/admin/index.css

@@ -47,6 +47,7 @@
 
 /* Components - Layout */
 @import "./components/_layout.css";
+@import "./components/_rtl.css";
 @import "./components/_filters.css";
 @import "./components/_search-picker.css";
 @import "./components/_sortable-tree.css";

data/app/assets/tailwind/spree/admin/plugins/_tom-select.css

@@ -16,7 +16,7 @@
   /* Dropdown */
   .ts-dropdown,
   .ts-dropdown.form-input {
-    @apply absolute mt-2! top-full left-0 w-full h-auto p-1 z-[10000000]! bg-white rounded-lg;
+    @apply absolute mt-2! top-full start-0 w-full h-auto p-1 z-[10000000]! bg-white rounded-lg;
     box-shadow: var(--shadow-dropdown);
   }
 
@@ -34,7 +34,7 @@
   }
 
   .ts-dropdown .create {
-    @apply pl-3;
+    @apply ps-3;
   }
 
   .ts-dropdown-content {
@@ -131,7 +131,7 @@
 
   /* Multi-select items */
   .ts-wrapper.multi .ts-control > div {
-    @apply cursor-pointer mr-[3px] mb-[3px] py-[1px] px-[5px] text-gray-800 border-0 border-gray-200 rounded-[calc(var(--radius-md)-1px)];
+    @apply cursor-pointer me-[3px] mb-[3px] py-[1px] px-[5px] text-gray-800 border-0 border-gray-200 rounded-[calc(var(--radius-md)-1px)];
     background: #efefef;
   }
 
@@ -140,7 +140,7 @@
   }
 
   .ts-wrapper.multi.has-items .ts-control {
-    @apply pl-[calc(0.75rem-5px)];
+    @apply ps-[calc(0.75rem-5px)];
   }
 
   /* Disabled state */
@@ -266,7 +266,7 @@
   }
 
   .ts-wrapper .ts-control > .item .remove {
-    @apply inline-block align-middle text-base font-semibold ml-[3px] py-0 px-[3px] text-inherit no-underline rounded-sm opacity-50;
+    @apply inline-block align-middle text-base font-semibold ms-[3px] py-0 px-[3px] text-inherit no-underline rounded-sm opacity-50;
   }
 
   .ts-wrapper .ts-control > .item .remove:hover {
@@ -276,7 +276,7 @@
 
   /* Clear button plugin */
   .ts-wrapper .clear-button {
-    @apply absolute right-[calc(0.75rem+20px)] top-1/2 -translate-y-1/2 opacity-0 cursor-pointer transition-opacity duration-200;
+    @apply absolute end-[calc(0.75rem+20px)] top-1/2 -translate-y-1/2 opacity-0 cursor-pointer transition-opacity duration-200;
   }
 
   .ts-wrapper.focus .clear-button,

data/app/assets/tailwind/spree/admin/plugins/_trix.css

@@ -85,7 +85,7 @@
   }
 
   trix-toolbar .trix-dialog .trix-button {
-    @apply inline-block text-center align-middle select-none text-sm leading-normal bg-gray-50 font-normal py-2 px-4 mr-1 mb-0 rounded-lg border border-gray-200!;
+    @apply inline-block text-center align-middle select-none text-sm leading-normal bg-gray-50 font-normal py-2 px-4 me-1 mb-0 rounded-lg border border-gray-200!;
   }
 
   trix-toolbar .trix-dialog__link-fields {

data/app/assets/tailwind/spree/admin/plugins/_uppy.css

@@ -66,7 +66,7 @@
 }
 
 .uppy-Dashboard-browse {
-  @apply ml-2;
+  @apply ms-2;
 }
 
 /* Save button - btn btn-primary btn-sm styles */

data/app/assets/tailwind/spree/admin/views/_page-builder.css

@@ -11,7 +11,7 @@
   }
 
   #page-builder #content {
-    @apply ml-0 pt-0;
+    @apply ms-0 pt-0;
   }
 
   #page-builder #main-part {
@@ -51,7 +51,9 @@
   }
 
   #page-builder-sidebar {
-    @apply fixed left-0 bg-white border-r border-gray-200 overflow-x-hidden;
+    @apply fixed bg-white overflow-x-hidden;
+    inset-inline-start: 0;
+    border-inline-end: 1px solid var(--color-gray-200);
     width: var(--pb-sidebar-width);
     top: var(--pb-header-height);
     height: calc(100vh - var(--pb-header-height));
@@ -64,7 +66,8 @@
   }
 
   #page-builder-sidebar .sidebar-footer {
-    @apply fixed bottom-0 left-0 p-2 bg-white flex items-center justify-between;
+    @apply fixed bottom-0 p-2 bg-white flex items-center justify-between;
+    inset-inline-start: 0;
     width: calc(var(--pb-sidebar-width) - 1px);
     box-shadow: 0 0 0 1px var(--color-gray-200);
     z-index: 1031;
@@ -115,7 +118,7 @@
   }
 
   .sidebar-page-block {
-    margin-left: 25px;
+    margin-inline-start: 25px;
   }
 
   .edit-block .trix-button--icon-heading-1,
@@ -166,7 +169,7 @@
 
   @media (min-width: 768px) {
     #main-part {
-      margin-left: 339px;
+      margin-inline-start: 339px;
     }
 
     .mobileLiveView #page-builder-preview {

data/app/controllers/concerns/spree/admin/locale_concern.rb

@@ -0,0 +1,76 @@
+module Spree
+  module Admin
+    # Decouples the admin UI language from the store's content language.
+    #
+    # `I18n.locale` drives the UI chrome (`Spree.t` labels) and follows the
+    # staff member's chosen admin language. `Mobility.locale` and
+    # `Spree::Current.content_locale` drive translated record fields
+    # (product/store names) and are pinned to the store's content locale —
+    # otherwise switching the admin to, say, Polish would make every
+    # Mobility-backed field fall back to nil for stores that don't translate
+    # their catalog into Polish.
+    #
+    # Shared by `Spree::Admin::BaseController` and the Devise-based pre-auth
+    # controllers (`UserSessionsController`), which can't inherit admin
+    # behavior via the controller chain — hence a concern both include.
+    # Devise-based includers opt into the login-screen locale handling with
+    # `before_action :set_login_locale`.
+    module LocaleConcern
+      extend ActiveSupport::Concern
+
+      # Cookie storing the admin UI language chosen on the login screen, so a
+      # guest's pre-auth selection carries into the authenticated session. A
+      # signed-in user's saved `selected_locale` still takes precedence.
+      ADMIN_LOCALE_COOKIE = :spree_admin_locale
+
+      private
+
+      # Pin content reads to the store's content locale (its default locale),
+      # independent of the chosen UI language. Request-local state only — the
+      # content locale must never be written to the process-global
+      # `I18n.default_locale`, which every thread in the server process shares.
+      # The fallback for storeless hosts lives in the
+      # `Spree::Current#content_locale` reader.
+      def pin_content_locale!
+        Spree::Current.content_locale = (current_store&.default_locale if defined?(current_store))
+        Mobility.locale = Spree::Current.content_locale
+      end
+
+      # Pre-auth locale handling for Devise-based screens, where the
+      # `set_locale` before_action from `Spree::Core::ControllerHelpers::Locale`
+      # never runs. A supported `?locale=` is applied and persisted; an
+      # unsupported one is ignored rather than shadowing an already-valid
+      # cookie. Falls back to the cookie set on a previous visit, then to the
+      # application default — always an explicit assignment, so a plain visit
+      # can never render in whatever locale the thread's previous request
+      # happened to set.
+      def set_login_locale
+        pin_content_locale!
+
+        if supported_admin_locale?(params[:locale])
+          cookies[ADMIN_LOCALE_COOKIE] = { value: params[:locale], expires: 1.year }
+          I18n.locale = params[:locale]
+        elsif supported_admin_locale?(admin_locale_cookie)
+          I18n.locale = admin_locale_cookie
+        else
+          I18n.locale = I18n.default_locale
+        end
+      end
+
+      def admin_user_selected_locale
+        defined?(try_spree_current_user) && try_spree_current_user&.selected_locale
+      end
+
+      def admin_locale_cookie
+        cookies[ADMIN_LOCALE_COOKIE]
+      end
+
+      # True when the admin UI is actually translated into +locale+
+      # (`Spree.available_locales`) — distinct from the storefront's
+      # store-scoped `supported_locale?`.
+      def supported_admin_locale?(locale)
+        locale.present? && Spree.available_locales.map(&:to_s).include?(locale.to_s)
+      end
+    end
+  end
+end