From 2fc7aa5981332548d461d2116fcbdda1f714a47d Mon Sep 17 00:00:00 2001
From: Seif Soliman <byseif21@gmail.com>
Date: Fri, 25 Jul 2025 15:32:24 +0300
Subject: [PATCH] fix(themes): clipped logo letters in some themes (@byseif21)
 (#6745)

### Description

all themes that use `background-clip: text` should have the
`padding-bottom: 0.1em` to prevent the cut logo letters.

---------

Co-authored-by: Miodec <jack@monkeytype.com>
---
 frontend/static/themes/incognito.css        | 10 +++++++++-
 frontend/static/themes/rainbow_trail.css    | 14 ++++++++++++++
 frontend/static/themes/sewing_tin_light.css | 14 ++++++++++++++
 frontend/static/themes/suisei.css           | 10 ++++++++++
 4 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/frontend/static/themes/incognito.css b/frontend/static/themes/incognito.css
index 0249d0726..60a014ebc 100644
--- a/frontend/static/themes/incognito.css
+++ b/frontend/static/themes/incognito.css
@@ -26,6 +26,14 @@ header #logo .icon svg path {
   fill: var(--text-color);
 }
 
+/* fix logo clipping */
 header #logo .icon {
-  padding-bottom: 0.1em;
+  padding-bottom: 0.05em;
 }
+nav {
+  padding-bottom: 0.2em;
+}
+header {
+  margin-bottom: -0.1em;
+}
+/*  */
diff --git a/frontend/static/themes/rainbow_trail.css b/frontend/static/themes/rainbow_trail.css
index e18e62f5d..9bc10e2a1 100644
--- a/frontend/static/themes/rainbow_trail.css
+++ b/frontend/static/themes/rainbow_trail.css
@@ -27,8 +27,22 @@ header #logo .text {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: rainbow-gradient 30s alternate ease-in-out infinite;
+  padding-bottom: 0.1em;
 }
 
+/* fix logo clipping */
+header #logo .icon {
+  padding-bottom: 0.05em;
+}
+nav {
+  padding-bottom: 0.2em;
+}
+
+header {
+  margin-bottom: -0.1em;
+}
+/*  */
+
 header #logo .top,
 .view-account .levelAndBar .level,
 [aria-label][data-balloon-pos]::after {
diff --git a/frontend/static/themes/sewing_tin_light.css b/frontend/static/themes/sewing_tin_light.css
index 314a26b57..b37243152 100644
--- a/frontend/static/themes/sewing_tin_light.css
+++ b/frontend/static/themes/sewing_tin_light.css
@@ -34,8 +34,22 @@ header #logo .text {
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  padding-bottom: 0.1em;
 }
 
+/* fix logo clipping */
+header #logo .icon {
+  padding-bottom: 0.05em;
+}
+nav {
+  padding-bottom: 0.2em;
+}
+
+header {
+  margin-bottom: -0.1em;
+}
+/*  */
+
 header #logo .text .top {
   /* prevent it from being transparent */
   -webkit-text-fill-color: #385eca;
diff --git a/frontend/static/themes/suisei.css b/frontend/static/themes/suisei.css
index 440b81aad..5923984d8 100644
--- a/frontend/static/themes/suisei.css
+++ b/frontend/static/themes/suisei.css
@@ -30,6 +30,16 @@ header #logo .text {
   color: transparent;
   padding-bottom: 0.1em;
 }
+
+/* fix logo clipping */
+header #logo .icon {
+  padding-bottom: 0.05em;
+}
+header {
+  margin-bottom: -0.1em;
+}
+/*  */
+
 header #logo .text .top {
   color: var(--main-color);
 }