fix: Fixes lists left margin on Super editor on mobile (#2983)

antsgar · web-flow · commit 0c4ce38aa4ca · 2026-02-24T13:01:38.000-03:00
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/lists.scss b/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/lists.scss
@@ -1,24 +1,27 @@
 :root {
-  --lexical-ordered-list-left-margin: 16px;
+  --lexical-list-left-margin: 16px;
 
   --checkbox-size: 18px;
   @media screen and (max-width: 450px) {
     --checkbox-size: 26px;
   }
+  @media screen and (max-width: 768px) {
+    --lexical-list-left-margin: 20px;
+  }
 }
 .monospace-font {
-  --lexical-ordered-list-left-margin: 42px;
+  --lexical-list-left-margin: 42px;
 }
 @for $i from 1 through 5 {
   .Lexical__ol#{$i} {
     padding: 0;
     margin: 0;
-    margin-left: var(--lexical-ordered-list-left-margin);
+    margin-left: var(--lexical-list-left-margin);
     list-style-position: outside;
 
     &.Lexical__rtl {
       margin-left: 0;
-      margin-right: var(--lexical-ordered-list-left-margin);
+      margin-right: var(--lexical-list-left-margin);
     }
   }
 }
@@ -37,12 +40,12 @@
 .Lexical__ul {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
+  margin-left: var(--lexical-list-left-margin);
   list-style-position: outside;
 
   &.Lexical__rtl {
     margin-left: 0;
-    margin-right: 16px;
+    margin-right: var(--lexical-list-left-margin);
   }
 }
 .Lexical__checkList {

Original file line number	Diff line number	Diff line change
`@@ -1,24 +1,27 @@`
`1`	`1`	`:root {`
`2`		`- --lexical-ordered-list-left-margin: 16px;`
	`2`	`+ --lexical-list-left-margin: 16px;`
`3`	`3`
`4`	`4`	`--checkbox-size: 18px;`
`5`	`5`	`@media screen and (max-width: 450px) {`
`6`	`6`	`--checkbox-size: 26px;`
`7`	`7`	`}`
	`8`	`+ @media screen and (max-width: 768px) {`
	`9`	`+ --lexical-list-left-margin: 20px;`
	`10`	`+ }`
`8`	`11`	`}`
`9`	`12`	`.monospace-font {`
`10`		`- --lexical-ordered-list-left-margin: 42px;`
	`13`	`+ --lexical-list-left-margin: 42px;`
`11`	`14`	`}`
`12`	`15`	`@for $i from 1 through 5 {`
`13`	`16`	`.Lexical__ol#{$i} {`
`14`	`17`	`padding: 0;`
`15`	`18`	`margin: 0;`
`16`		`- margin-left: var(--lexical-ordered-list-left-margin);`
	`19`	`+ margin-left: var(--lexical-list-left-margin);`
`17`	`20`	`list-style-position: outside;`
`18`	`21`
`19`	`22`	`&.Lexical__rtl {`
`20`	`23`	`margin-left: 0;`
`21`		`- margin-right: var(--lexical-ordered-list-left-margin);`
	`24`	`+ margin-right: var(--lexical-list-left-margin);`
`22`	`25`	`}`
`23`	`26`	`}`
`24`	`27`	`}`
`@@ -37,12 +40,12 @@`
`37`	`40`	`.Lexical__ul {`
`38`	`41`	`padding: 0;`
`39`	`42`	`margin: 0;`
`40`		`- margin-left: 16px;`
	`43`	`+ margin-left: var(--lexical-list-left-margin);`
`41`	`44`	`list-style-position: outside;`
`42`	`45`
`43`	`46`	`&.Lexical__rtl {`
`44`	`47`	`margin-left: 0;`
`45`		`- margin-right: 16px;`
	`48`	`+ margin-right: var(--lexical-list-left-margin);`
`46`	`49`	`}`
`47`	`50`	`}`
`48`	`51`	`.Lexical__checkList {`