From 08e5753921690ade26fb9a7935d833ccdc942d25 Mon Sep 17 00:00:00 2001
From: Jessica Chowdhury <jessica@trbl.design>
Date: Mon, 16 Jun 2025 16:27:56 +0100
Subject: [PATCH 1/5] chore(ui): update lexical field error state styling

---
 .../src/lexical/ui/ContentEditable.scss       | 32 ++++---------------
 1 file changed, 7 insertions(+), 25 deletions(-)

diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
index dca212cfc22..1af8b88db06 100644
--- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
+++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
@@ -46,38 +46,20 @@ $lexical-contenteditable-bottom-padding: 8px;
   }
 
   html[data-theme='light'] {
-    .rich-text-lexical.rich-text-lexical--show-gutter {
-      &.error:not(:hover) {
-        > .rich-text-lexical__wrap
-          > .editor-container
-          > .editor-scroller
-          > .editor
-          > .ContentEditable__root::before {
-          border-left: 2px solid var(--theme-error-400);
-        }
-      }
-
-      &.error:hover {
-        > .rich-text-lexical__wrap
-          > .editor-container
-          > .editor-scroller
-          > .editor
-          > .ContentEditable__root::before {
-          border-left: 2px solid var(--theme-error-500);
+    .rich-text-lexical {
+      &.error {
+        > .rich-text-lexical__wrap {
+          @include lightInputError;
         }
       }
     }
   }
 
   html[data-theme='dark'] {
-    .rich-text-lexical.rich-text-lexical--show-gutter {
+    .rich-text-lexical {
       &.error {
-        > .rich-text-lexical__wrap
-          > .editor-container
-          > .editor-scroller
-          > .editor
-          > .ContentEditable__root::before {
-          border-left: 2px solid var(--theme-error-500);
+        > .rich-text-lexical__wrap {
+          @include darkInputError;
         }
       }
     }

From 347000d30c8a49555545fbb21301b7e9ecd89330 Mon Sep 17 00:00:00 2001
From: Jessica Chowdhury <jessica@trbl.design>
Date: Mon, 16 Jun 2025 18:48:08 +0100
Subject: [PATCH 2/5] chore(richtext-lexical): revert error state change and
 apply same styling on small break

---
 .../src/lexical/ui/ContentEditable.scss       | 49 +++++++++++++++----
 1 file changed, 39 insertions(+), 10 deletions(-)

diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
index 1af8b88db06..3355f74f2e8 100644
--- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
+++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
@@ -25,11 +25,7 @@ $lexical-contenteditable-bottom-padding: 8px;
     }
   }
 
-  .rich-text-lexical--show-gutter
-    > .rich-text-lexical__wrap
-    > .editor-container
-    > .editor-scroller
-    > .editor {
+  .rich-text-lexical > .rich-text-lexical__wrap > .editor-container > .editor-scroller > .editor {
     > .ContentEditable__root {
       padding-left: 3rem;
     }
@@ -47,9 +43,23 @@ $lexical-contenteditable-bottom-padding: 8px;
 
   html[data-theme='light'] {
     .rich-text-lexical {
-      &.error {
-        > .rich-text-lexical__wrap {
-          @include lightInputError;
+      &.error:not(:hover) {
+        > .rich-text-lexical__wrap
+          > .editor-container
+          > .editor-scroller
+          > .editor
+          > .ContentEditable__root::before {
+          border-left: 2px solid var(--theme-error-400);
+        }
+      }
+
+      &.error:hover {
+        > .rich-text-lexical__wrap
+          > .editor-container
+          > .editor-scroller
+          > .editor
+          > .ContentEditable__root::before {
+          border-left: 2px solid var(--theme-error-500);
         }
       }
     }
@@ -58,8 +68,27 @@ $lexical-contenteditable-bottom-padding: 8px;
   html[data-theme='dark'] {
     .rich-text-lexical {
       &.error {
-        > .rich-text-lexical__wrap {
-          @include darkInputError;
+        > .rich-text-lexical__wrap
+          > .editor-container
+          > .editor-scroller
+          > .editor
+          > .ContentEditable__root::before {
+          border-left: 2px solid var(--theme-error-500);
+        }
+      }
+    }
+  }
+
+  @include small-break {
+    .rich-text-lexical {
+      &.error {
+        > .rich-text-lexical__wrap
+          > .editor-container
+          > .editor-scroller
+          > .editor
+          > .ContentEditable__root::before {
+          top: 0;
+          height: 100%;
         }
       }
     }

From 208abad2e9c2c652df149501c3d39974a3701fb5 Mon Sep 17 00:00:00 2001
From: Jessica Chowdhury <jessica@trbl.design>
Date: Wed, 25 Jun 2025 10:40:01 +0100
Subject: [PATCH 3/5] chore(ui): remove gutter on lexical field below small
 break

---
 .../src/lexical/ui/ContentEditable.scss       | 49 +++++++++----------
 1 file changed, 22 insertions(+), 27 deletions(-)

diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
index 3355f74f2e8..728b139f7f3 100644
--- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
+++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
@@ -25,24 +25,34 @@ $lexical-contenteditable-bottom-padding: 8px;
     }
   }
 
-  .rich-text-lexical > .rich-text-lexical__wrap > .editor-container > .editor-scroller > .editor {
+  .rich-text-lexical--show-gutter
+    > .rich-text-lexical__wrap
+    > .editor-container
+    > .editor-scroller
+    > .editor {
     > .ContentEditable__root {
       padding-left: 3rem;
     }
+  }
+
+  .rich-text-lexical
+    > .rich-text-lexical__wrap
+    > .editor-container
+    > .editor-scroller
+    > .editor
     > .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);
-    }
+    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);
   }
 
   html[data-theme='light'] {
-    .rich-text-lexical {
+    .rich-text-lexical.rich-text-lexical {
       &.error:not(:hover) {
         > .rich-text-lexical__wrap
           > .editor-container
@@ -66,7 +76,7 @@ $lexical-contenteditable-bottom-padding: 8px;
   }
 
   html[data-theme='dark'] {
-    .rich-text-lexical {
+    .rich-text-lexical.rich-text-lexical {
       &.error {
         > .rich-text-lexical__wrap
           > .editor-container
@@ -78,19 +88,4 @@ $lexical-contenteditable-bottom-padding: 8px;
       }
     }
   }
-
-  @include small-break {
-    .rich-text-lexical {
-      &.error {
-        > .rich-text-lexical__wrap
-          > .editor-container
-          > .editor-scroller
-          > .editor
-          > .ContentEditable__root::before {
-          top: 0;
-          height: 100%;
-        }
-      }
-    }
-  }
 }

From 69242bbd7fa24d30282229acb4807f615b7fdf82 Mon Sep 17 00:00:00 2001
From: Jessica Chowdhury <jessica@trbl.design>
Date: Mon, 30 Jun 2025 16:36:38 +0100
Subject: [PATCH 4/5] fix(richtext-lexical): prevent gutter border being shown
 on small screens

---
 packages/richtext-lexical/src/lexical/ui/ContentEditable.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
index 728b139f7f3..393b9501979 100644
--- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
+++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
@@ -32,6 +32,9 @@ $lexical-contenteditable-bottom-padding: 8px;
     > .editor {
     > .ContentEditable__root {
       padding-left: 3rem;
+      &::before {
+        border-left: 1px solid var(--theme-elevation-100);
+      }
     }
   }
 
@@ -48,7 +51,6 @@ $lexical-contenteditable-bottom-padding: 8px;
     height: calc(
       100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
     );
-    border-left: 1px solid var(--theme-elevation-100);
   }
 
   html[data-theme='light'] {

From 90541cbf89b13950783a9ccc482f99dabefc1feb Mon Sep 17 00:00:00 2001
From: Jessica Chowdhury <jessica@trbl.design>
Date: Tue, 1 Jul 2025 09:49:40 +0100
Subject: [PATCH 5/5] chore: apply input error style to lexical field at small
 break

---
 .../src/lexical/ui/ContentEditable.scss       | 50 ++++++++++++-------
 1 file changed, 31 insertions(+), 19 deletions(-)

diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
index 393b9501979..f8e336f0367 100644
--- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
+++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.scss
@@ -32,29 +32,21 @@ $lexical-contenteditable-bottom-padding: 8px;
     > .editor {
     > .ContentEditable__root {
       padding-left: 3rem;
-      &::before {
-        border-left: 1px solid var(--theme-elevation-100);
-      }
     }
-  }
-
-  .rich-text-lexical
-    > .rich-text-lexical__wrap
-    > .editor-container
-    > .editor-scroller
-    > .editor
     > .ContentEditable__root::before {
-    content: ' ';
-    position: absolute;
-    top: $lexical-contenteditable-top-padding;
-    left: 0;
-    height: calc(
-      100% - #{$lexical-contenteditable-top-padding} - #{$lexical-contenteditable-bottom-padding}
-    );
+      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);
+    }
   }
 
   html[data-theme='light'] {
-    .rich-text-lexical.rich-text-lexical {
+    .rich-text-lexical.rich-text-lexical--show-gutter {
       &.error:not(:hover) {
         > .rich-text-lexical__wrap
           > .editor-container
@@ -75,10 +67,20 @@ $lexical-contenteditable-bottom-padding: 8px;
         }
       }
     }
+
+    @include small-break {
+      .rich-text-lexical {
+        &.error {
+          > .rich-text-lexical__wrap {
+            @include lightInputError;
+          }
+        }
+      }
+    }
   }
 
   html[data-theme='dark'] {
-    .rich-text-lexical.rich-text-lexical {
+    .rich-text-lexical.rich-text-lexical--show-gutter {
       &.error {
         > .rich-text-lexical__wrap
           > .editor-container
@@ -89,5 +91,15 @@ $lexical-contenteditable-bottom-padding: 8px;
         }
       }
     }
+
+    @include small-break {
+      .rich-text-lexical {
+        &.error {
+          > .rich-text-lexical__wrap {
+            @include darkInputError;
+          }
+        }
+      }
+    }
   }
 }