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

fix(richtext-lexical): editor placeholder had incorrect padding set for small viewports (#10531)

Browse Source 
Before:
![CleanShot 2025-01-12 at 19 01
56@2x](https://github.com/user-attachments/assets/7f35bb0f-0dad-4976-8205-feef3a073914)

After: 
![CleanShot 2025-01-12 at 18 59
36@2x](https://github.com/user-attachments/assets/0b34caea-f7bf-4312-a4bb-de508d2c056c)
This commit is contained in:
Alessio Gravili
2025-01-12 19:15:44 -07:00
committed by GitHub
parent 142c504a46
commit 26711a7a55
4 changed files with 47 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
View File

@@ -12,7 +12,8 @@ $lexical-contenteditable-bottom-padding: 8px;
outline: 0;
padding-top: $lexical-contenteditable-top-padding;
padding-bottom: $lexical-contenteditable-bottom-padding;
//min-height: base(10);
padding-left: 0;
padding-right: 0;
&:focus-visible {
outline: none !important;
@@ -24,32 +25,23 @@ $lexical-contenteditable-bottom-padding: 8px;
}
}
@media (max-width: 768px) {
.ContentEditable__root {
padding-left: 0;
padding-right: 0;
.rich-text-lexical--show-gutter
> .rich-text-lexical__wrap
> .editor-container
> .editor-scroller
> .editor {
> .ContentEditable__root {
padding-left: 3rem;
}
}
@media (min-width: 769px) {
.rich-text-lexical--show-gutter
> .rich-text-lexical__wrap
> .editor-container
> .editor-scroller
> .editor {
> .ContentEditable__root {
padding-left: 3rem;
}
> .ContentEditable__root::before {
content: ' ';
position: absolute;
top: $lexical-contenteditable-top-padding;
left: 0;
height: calc(
100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
);
border-left: 1px solid var(--theme-elevation-100);
}
> .ContentEditable__root::before {
content: ' ';
position: absolute;
top: $lexical-contenteditable-top-padding;
left: 0;
height: calc(
100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
);
border-left: 1px solid var(--theme-elevation-100);
}
}