From 4384e6865886c4e3ba3ea9b6100420de489c35b9 Mon Sep 17 00:00:00 2001
From: Gerome Matilla <gerome.matilla07@gmail.com>
Date: Sun, 2 Aug 2020 15:44:33 +0800
Subject: [PATCH] fix broken pinned tab if there's too many tab

---
 README.md      | 7 ++++---
 userChrome.css | 9 +++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index d444e8a..1cbfd0d 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,10 @@
 
 ### If there's no blur effect
 
+### If you're using Windows or Mac and something's wrong
+
+1. **Sadly, I only have archlinux, so I cannot guarantee that it will work on Windows10 and macOS. A feedback is welcome if it works on your platform.**
+
 1. **The theme does not provide the blur effect!** Make sure you have a compositor with blur support running! KDE Plasma, macOS, and Windows 10 have this by default, but you need to enable it! If you're using linux, use tryone144's [feature/dual_kawase](https://github.com/tryone144/picom/tree/feature/dual_kawase) branch of picom. It includes the dual kawase shader.
 
 ### If you're using Plasma and there's no blur effect,
@@ -50,6 +54,3 @@
 
 3. Go to `System Settings > KWin Scripts > Enable Force Blur`.
 
-### If you're using Windows or Mac and something's wrong
-
-1. Sadly, I only have archlinux, so a feedback is welcome if it works on your platform.
diff --git a/userChrome.css b/userChrome.css
index a26c52b..5649d9f 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -398,8 +398,6 @@ hbox.tab-content[pinned=true] .tab-text {
 	height: var(--bf-tab-height) !important;
 	margin-top: 0 !important;
 	margin-bottom: 0 !important;
-	margin-inline-start: 2px !important;
-	margin-inline-end: 2px !important;
 }
 
 .tabbrowser-tab[soundplaying="true"] {
@@ -412,6 +410,13 @@ hbox.tab-content[pinned=true] .tab-text {
 	display: none !important;
 }
 
+/* Center pinned tab stack(Contains icon) if #tabbrowser-tabs[positionpinnedtabs=true] */
+#tabbrowser-tabs[positionpinnedtabs=true] .tabbrowser-tab[pinned=true] .tab-stack {
+	position: relative !important;
+	top: 50% !important;
+	transform: translateY(-50%) !important;
+}
+
 #tabs-newtab-button {
 	list-style-image: url("add.svg") !important;
 	opacity: 1;