From b43fe77d3c6e3219d24aaeb66bcbabee4ca55154 Mon Sep 17 00:00:00 2001
From: m1tya <mitya.hero@gmail.com>
Date: Sun, 15 Feb 2026 16:05:43 +0100
Subject: [PATCH 1/4] feat: improve UI animations and tab behavior

- Fix scrollbar colors in dark mode (darker thumb)
- Improve tab sizing: 1.1x for 2-4 tabs, 1.6x for 5+ tabs
- Add trackpad scroll transform animation support
---
 css/base.css   |  7 +++++--
 css/tabBar.css | 17 +++++++++++++++--
 index.html     |  2 +-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/css/base.css b/css/base.css
index b5b927671..2158fd4a4 100644
--- a/css/base.css
+++ b/css/base.css
@@ -106,8 +106,11 @@ a {
   border-radius: 0.25em;
 }
 .dark-theme .has-thin-scrollbar::-webkit-scrollbar-track {
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: rgba(0, 0, 0, 0.3);
 }
 .dark-theme .has-thin-scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.6);
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.dark-theme .has-thin-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.5);
 }
diff --git a/css/tabBar.css b/css/tabBar.css
index e956064a5..d7810eb71 100644
--- a/css/tabBar.css
+++ b/css/tabBar.css
@@ -100,7 +100,7 @@ body.linux #menu-button {
 .tab-item {
   flex: 1;
   min-width: 125px;
-  transition: 0.2s transform;
+  transition: flex 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, transform 0.2s;
   line-height: 36px;
   height: 36px;
   overflow: hidden;
@@ -113,7 +113,13 @@ body.linux #menu-button {
   padding-right: 0.5rem;
 }
 .tab-item.active {
-  min-width: 168px;
+  flex: 1.1;
+  min-width: 220px;
+}
+/* When 5 or more tabs are open, make active tab grow more */
+.tab-item:first-child:nth-last-child(n+5).active,
+.tab-item:first-child:nth-last-child(n+5) ~ .tab-item.active {
+  flex: 1.6;
 }
 .tab-item.gu-mirror {
   top: var(--control-space-top) !important;
@@ -161,6 +167,13 @@ body.linux #menu-button {
 
 .tab-item:not(.active):hover {
   background-color: rgba(0, 0, 0, 0.03);
+  flex: 1.05;
+  min-width: 156px;
+}
+/* When 5 or more tabs are open, make hover grow more */
+.tab-item:first-child:nth-last-child(n+5):not(.active):hover,
+.tab-item:first-child:nth-last-child(n+5) ~ .tab-item:not(.active):hover {
+  flex: 1.25;
 }
 .dark-theme .tab-item:not(.active):hover {
   background-color: rgba(255, 255, 255, 0.1);
diff --git a/index.html b/index.html
index d0e97bc17..b6144ca69 100644
--- a/index.html
+++ b/index.html
@@ -241,7 +241,7 @@
         <input type="search" id="task-search-input"/>
       </div>
     </div>
-      <div id="task-area"></div>
+      <div id="task-area" class="has-thin-scrollbar"></div>
       <button id="add-task">
         <i class="i carbon:new-tab"></i>
         <span></span>

From c85a5b1b877ea5b87840605ba067279e3c7ef419 Mon Sep 17 00:00:00 2001
From: m1tya <mitya.hero@gmail.com>
Date: Fri, 13 Mar 2026 18:59:21 +0100
Subject: [PATCH 2/4] Tab animations

---
 css/tabBar.css      | 30 +++++++++++++++---------------
 js/navbar/tabBar.js |  6 +++++-
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/css/tabBar.css b/css/tabBar.css
index d7810eb71..779de73e5 100644
--- a/css/tabBar.css
+++ b/css/tabBar.css
@@ -100,7 +100,7 @@ body.linux #menu-button {
 .tab-item {
   flex: 1;
   min-width: 125px;
-  transition: flex 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, transform 0.2s;
+  transition: 0.2s transform;
   line-height: 36px;
   height: 36px;
   overflow: hidden;
@@ -112,14 +112,21 @@ body.linux #menu-button {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.tab-item.active {
-  flex: 1.1;
-  min-width: 220px;
+
+#tabs.safari-tab-resize-enabled .tab-item {
+  transition: flex-grow 0.22s ease;
 }
-/* When 5 or more tabs are open, make active tab grow more */
-.tab-item:first-child:nth-last-child(n+5).active,
-.tab-item:first-child:nth-last-child(n+5) ~ .tab-item.active {
-  flex: 1.6;
+
+#tabs.safari-tab-resize-enabled .tab-item:hover {
+  flex-grow: 1.1;
+}
+
+#tabs.safari-tab-resize-enabled .tab-item.active {
+  flex-grow: 1.3;
+}
+
+.tab-item.active {
+  min-width: 168px;
 }
 .tab-item.gu-mirror {
   top: var(--control-space-top) !important;
@@ -167,13 +174,6 @@ body.linux #menu-button {
 
 .tab-item:not(.active):hover {
   background-color: rgba(0, 0, 0, 0.03);
-  flex: 1.05;
-  min-width: 156px;
-}
-/* When 5 or more tabs are open, make hover grow more */
-.tab-item:first-child:nth-last-child(n+5):not(.active):hover,
-.tab-item:first-child:nth-last-child(n+5) ~ .tab-item:not(.active):hover {
-  flex: 1.25;
 }
 .dark-theme .tab-item:not(.active):hover {
   background-color: rgba(255, 255, 255, 0.1);
diff --git a/js/navbar/tabBar.js b/js/navbar/tabBar.js
index c162dfd8c..755bb51fe 100644
--- a/js/navbar/tabBar.js
+++ b/js/navbar/tabBar.js
@@ -263,7 +263,11 @@ const tabBar = {
     })
   },
   handleSizeChange: function () {
-    if (window.innerWidth / tabBar.containerInner.childNodes.length < 190) {
+    const tabCount = tabBar.containerInner.children.length
+
+    tabBar.container.classList.toggle('safari-tab-resize-enabled', tabCount > 3)
+
+    if (window.innerWidth / tabCount < 190) {
       tabBar.container.classList.add('compact-tabs')
     } else {
       tabBar.container.classList.remove('compact-tabs')

From 6abcb524af62b9cc6ebd6e1aaa117e83adb2f766 Mon Sep 17 00:00:00 2001
From: m1tya <mitya.hero@gmail.com>
Date: Fri, 13 Mar 2026 19:21:27 +0100
Subject: [PATCH 3/4] Added a button to reload the page

---
 css/tabBar.css      | 20 ++++++++++++++++----
 js/navbar/tabBar.js | 11 +++++++++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/css/tabBar.css b/css/tabBar.css
index 779de73e5..6d60768d1 100644
--- a/css/tabBar.css
+++ b/css/tabBar.css
@@ -192,7 +192,7 @@ body.linux #menu-button {
 }
 body:not(.touch)
   .tab-item:not(:hover)
-  .tab-icon-area:has(.tab-close-button:only-child) {
+  .tab-icon-area:not(:has(.tab-info-icon)) {
   margin-left: -0.5rem;
 }
 
@@ -394,15 +394,27 @@ body.windows.dark-theme .navbar-action-button:not(:disabled):hover {
   font-size: 0.9em;
 }
 
-/* when the tab is hovered, hide info buttons and show the close button */
+.tab-item .tab-reload-button {
+  font-size: 1.1em;
+  box-sizing: border-box;
+  order: 0;
+}
+
+.tab-item.is-ntp .tab-reload-button {
+  display: none !important;
+}
+
+/* when the tab is hovered, hide info buttons and show the close/reload buttons */
 
 body:not(.touch) .tab-item:hover .tab-info-icon {
   display: none;
 }
-body:not(.touch) .tab-item .tab-close-button {
+body:not(.touch) .tab-item .tab-close-button,
+body:not(.touch) .tab-item .tab-reload-button {
   display: none;
 }
-body:not(.touch) .tab-item:hover .tab-close-button {
+body:not(.touch) .tab-item:hover .tab-close-button,
+body:not(.touch) .tab-item.active:not(.is-ntp):hover .tab-reload-button {
   display: inline-block;
 }
 
diff --git a/js/navbar/tabBar.js b/js/navbar/tabBar.js
index 755bb51fe..c2c8a1f64 100644
--- a/js/navbar/tabBar.js
+++ b/js/navbar/tabBar.js
@@ -64,6 +64,16 @@ const tabBar = {
       iconArea.appendChild(pbIcon)
     }
 
+    var reloadButton = document.createElement('button')
+    reloadButton.className = 'tab-icon tab-reload-button i carbon:renew'
+
+    reloadButton.addEventListener('click', function (e) {
+      webviews.callAsync(data.id, 'reload')
+      e.stopPropagation()
+    })
+
+    iconArea.appendChild(reloadButton)
+
     var closeTabButton = document.createElement('button')
     closeTabButton.className = 'tab-icon tab-close-button i carbon:close'
 
@@ -143,6 +153,7 @@ const tabBar = {
     var tabTitle
 
     const isNewTab = tabData.url === '' || tabData.url === urlParser.parse('min://newtab')
+    tabEl.classList.toggle('is-ntp', isNewTab)
     if (isNewTab) {
       tabTitle = l('newTabLabel')
     } else if (tabData.title) {

From 407d08632da781a334c0f53a24d07e4a06fff1da Mon Sep 17 00:00:00 2001
From: m1tya <mitya.hero@gmail.com>
Date: Sun, 15 Mar 2026 16:14:08 +0100
Subject: [PATCH 4/4] brought back animations for closing tabs using the
 touchpad

---
 css/tabBar.css      | 22 +++++-----------------
 js/navbar/tabBar.js | 11 -----------
 2 files changed, 5 insertions(+), 28 deletions(-)

diff --git a/css/tabBar.css b/css/tabBar.css
index 6d60768d1..90fdb8e21 100644
--- a/css/tabBar.css
+++ b/css/tabBar.css
@@ -114,7 +114,7 @@ body.linux #menu-button {
 }
 
 #tabs.safari-tab-resize-enabled .tab-item {
-  transition: flex-grow 0.22s ease;
+  transition: flex-grow 0.22s ease, transform 0.15s ease;
 }
 
 #tabs.safari-tab-resize-enabled .tab-item:hover {
@@ -192,7 +192,7 @@ body.linux #menu-button {
 }
 body:not(.touch)
   .tab-item:not(:hover)
-  .tab-icon-area:not(:has(.tab-info-icon)) {
+  .tab-icon-area:has(.tab-close-button:only-child) {
   margin-left: -0.5rem;
 }
 
@@ -394,27 +394,15 @@ body.windows.dark-theme .navbar-action-button:not(:disabled):hover {
   font-size: 0.9em;
 }
 
-.tab-item .tab-reload-button {
-  font-size: 1.1em;
-  box-sizing: border-box;
-  order: 0;
-}
-
-.tab-item.is-ntp .tab-reload-button {
-  display: none !important;
-}
-
-/* when the tab is hovered, hide info buttons and show the close/reload buttons */
+/* when the tab is hovered, hide info buttons and show the close button */
 
 body:not(.touch) .tab-item:hover .tab-info-icon {
   display: none;
 }
-body:not(.touch) .tab-item .tab-close-button,
-body:not(.touch) .tab-item .tab-reload-button {
+body:not(.touch) .tab-item .tab-close-button {
   display: none;
 }
-body:not(.touch) .tab-item:hover .tab-close-button,
-body:not(.touch) .tab-item.active:not(.is-ntp):hover .tab-reload-button {
+body:not(.touch) .tab-item:hover .tab-close-button {
   display: inline-block;
 }
 
diff --git a/js/navbar/tabBar.js b/js/navbar/tabBar.js
index c2c8a1f64..755bb51fe 100644
--- a/js/navbar/tabBar.js
+++ b/js/navbar/tabBar.js
@@ -64,16 +64,6 @@ const tabBar = {
       iconArea.appendChild(pbIcon)
     }
 
-    var reloadButton = document.createElement('button')
-    reloadButton.className = 'tab-icon tab-reload-button i carbon:renew'
-
-    reloadButton.addEventListener('click', function (e) {
-      webviews.callAsync(data.id, 'reload')
-      e.stopPropagation()
-    })
-
-    iconArea.appendChild(reloadButton)
-
     var closeTabButton = document.createElement('button')
     closeTabButton.className = 'tab-icon tab-close-button i carbon:close'
 
@@ -153,7 +143,6 @@ const tabBar = {
     var tabTitle
 
     const isNewTab = tabData.url === '' || tabData.url === urlParser.parse('min://newtab')
-    tabEl.classList.toggle('is-ntp', isNewTab)
     if (isNewTab) {
       tabTitle = l('newTabLabel')
     } else if (tabData.title) {