tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(ui): incorrect padding when using rtl (#13338)

Browse Source 
Fixes inconsistent padding in the doc view for RTL viewing.

### ❌ Before

#### Desktop
<img width="1331" height="310" alt="CleanShot 2025-07-30 at 16 37 30"
src="https://github.com/user-attachments/assets/48d3e127-09dd-4356-99ae-16fe47817937"
/>

#### Mobile
<img width="619" height="328" alt="CleanShot 2025-07-30 at 16 37 52"
src="https://github.com/user-attachments/assets/36169ca5-c1a2-4175-a6e1-f0a4784d5e9e"
/>


### ✅ After

#### Desktop
<img width="1675" height="291" alt="CleanShot 2025-07-30 at 16 39 18"
src="https://github.com/user-attachments/assets/1da78a8a-b236-4f95-9eb2-8b5055b676ae"
/>

#### Mobile
<img width="531" height="309" alt="CleanShot 2025-07-30 at 16 39 30"
src="https://github.com/user-attachments/assets/af858bfc-6d75-4139-ada1-4f8100744bfb"
/>
This commit is contained in:
Jarrod Flesch
2025-07-30 17:03:03 -04:00
committed by GitHub
parent 8a489410ad
commit f2d4004237
2 changed files with 41 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui/src/elements/DocumentControls/index.scss
View File

@@ -187,6 +187,12 @@
}
}
&__popup {
[dir='rtl'] & {
padding-left: var(--gutter-h);
}
}
&__meta {
width: auto;
gap: calc(var(--base) / 2);
@@ -216,7 +222,9 @@
}
&__controls {
[dir='ltr'] & {
padding-left: var(--gutter-h);
}
overflow: auto;
// do not show scrollbar because the parent container has a static height

49
packages/ui/src/elements/DocumentFields/index.scss
View File

@@ -5,6 +5,24 @@
width: 100%;
display: flex;
--doc-sidebar-width: 325px;
--sidebar-gutter-h-right: var(--gutter-h);
--sidebar-gutter-h-left: calc(var(--base) * 2);
--main-gutter-h-left: var(--gutter-h);
--main-gutter-h-right: calc(var(--base) * 2);
[dir='rtl'] &:not(&--force-sidebar-wrap) {
--sidebar-gutter-h-left: var(--gutter-h);
--sidebar-gutter-h-right: calc(var(--base) * 2);
--main-gutter-h-left: calc(var(--base) * 2);
--main-gutter-h-right: var(--gutter-h);
}
&--force-sidebar-wrap {
--sidebar-gutter-h-left: var(--gutter-h);
--sidebar-gutter-h-right: var(--gutter-h);
--main-gutter-h-left: var(--gutter-h);
--main-gutter-h-right: var(--gutter-h);
}
&--has-sidebar {
.document-fields {
@@ -13,18 +31,18 @@
}
&__edit {
padding-left: var(--main-gutter-h-left);
padding-right: var(--main-gutter-h-right);
[dir='ltr'] & {
top: 0;
right: 0;
border-right: 1px solid var(--theme-elevation-100);
padding-right: calc(var(--base) * 2);
}
[dir='rtl'] & {
top: 0;
left: 0;
border-left: 1px solid var(--theme-elevation-100);
padding-left: calc(var(--base) * 2);
}
}
@@ -74,8 +92,8 @@
flex-direction: column;
gap: var(--base);
padding-top: calc(var(--base) * 1.5);
padding-left: calc(var(--base) * 2);
padding-right: var(--gutter-h);
padding-left: var(--sidebar-gutter-h-left);
padding-right: var(--sidebar-gutter-h-right);
padding-bottom: var(--spacing-view-bottom);
}
@@ -106,7 +124,6 @@
&__sidebar-fields {
padding-top: 0;
padding-left: var(--gutter-h);
padding-bottom: 0;
}
}
@@ -114,6 +131,16 @@
@include mid-break {
display: block;
[dir='rtl'] &:not(&--force-sidebar-wrap) {
--sidebar-gutter-h-left: var(--gutter-h);
--sidebar-gutter-h-right: var(--gutter-h);
--main-gutter-h-left: var(--gutter-h);
--main-gutter-h-right: var(--gutter-h);
}
--main-gutter-h-left: var(--gutter-h);
--main-gutter-h-right: var(--gutter-h);
--sidebar-gutter-h-left: var(--gutter-h);
--sidebar-gutter-h-right: var(--gutter-h);
&--has-sidebar {
.document-fields {
@@ -124,12 +151,10 @@
&__edit {
[dir='ltr'] & {
border-right: 0;
padding-right: var(--gutter-h);
}
[dir='rtl'] & {
border-left: 0;
padding-left: var(--gutter-h);
}
}
@@ -160,18 +185,8 @@
&__sidebar-fields {
padding-top: 0;
padding-left: var(--gutter-h);
padding-right: var(--gutter-h);
padding-bottom: 0;
gap: base(0.5);
[dir='ltr'] & {
padding-right: var(--gutter-h);
}
[dir='rtl'] & {
padding-left: var(--gutter-h);
}
}
&__sidebar {