From 6e6aef15cbf205848a25415e02aba81cbb9a451e Mon Sep 17 00:00:00 2001
From: mohvn <mohan.elias@proton.me>
Date: Thu, 5 Sep 2024 11:45:35 -0300
Subject: [PATCH] fix: responsiviness in both legacy and main mode

---
 .../base/content/zen-styles/zen-urlbar.css    | 59 ++++++++++++++-----
 src/browser/themes/shared/zen-icons/icons.css | 31 +++++++---
 2 files changed, 65 insertions(+), 25 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index b25681c75..75953d09a 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -172,25 +172,52 @@ button.popup-notification-dropmarker {
   margin-top: 5px
 }
 
-@media (max-width: 550px) {
-  #urlbar-container {
-    width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
-  }
+:root:not([zen-sidebar-legacy="true"]) {
+  @media (max-width: 650px) {
+    #urlbar-container {
+      width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
+    }
 
-  #nav-bar[downloadsbuttonshown] #urlbar-container,
-  #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
-    width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding));
-  }
+    #nav-bar[downloadsbuttonshown] #urlbar-container,
+    #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
+      width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding));
+    }
 
-  #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
-    width: 176px;
-  }
+    #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
+      width: 176px;
+    }
 
-  #identity-icon-box {
-    max-width: 70px;
-  }
+    #identity-icon-box {
+      max-width: 70px;
+    }
 
-  #urlbar-zoom-button {
-    display: none;
+    #urlbar-zoom-button {
+      display: none;
+    }
+  }
+}
+
+:root[zen-sidebar-legacy="true"] {
+  @media (max-width: 550px) {
+    #urlbar-container {
+      width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding)));
+    }
+
+    #nav-bar[downloadsbuttonshown] #urlbar-container,
+    #nav-bar[unifiedextensionsbuttonshown] #urlbar-container {
+      width: calc(76px + 24px + 2 * var(--toolbarbutton-inner-padding));
+    }
+
+    #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container {
+      width: 176px;
+    }
+
+    #identity-icon-box {
+      max-width: 70px;
+    }
+
+    #urlbar-zoom-button {
+      display: none;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css
index c64cd501a..e49412899 100644
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -20,8 +20,8 @@
 }
 
 
-#forward-button,
-#zen-sidebar-web-panel-forward {
+:root[zen-sidebar-legacy="true"] #forward-button,
+:root[zen-sidebar-legacy="true"] #zen-sidebar-web-panel-forward {
 	list-style-image: url("forward.svg") !important;
 
 	@media (max-width: 650px) {
@@ -29,8 +29,26 @@
 	}
 }
 
-#reload-button,
-#zen-sidebar-web-panel-reload {
+:root:not([zen-sidebar-legacy="true"]) #forward-button,
+:root:not([zen-sidebar-legacy="true"]) #zen-sidebar-web-panel-forward {
+	list-style-image: url("forward.svg") !important;
+
+	@media (max-width: 650px) {
+		display: none;
+	}
+}
+
+:root[zen-sidebar-legacy="true"] #reload-button,
+:root[zen-sidebar-legacy="true"] #zen-sidebar-web-panel-reload {
+	list-style-image: url("reload.svg") !important;
+
+	@media (max-width: 650px) {
+		display: none;
+	}
+}
+
+:root:not([zen-sidebar-legacy="true"]) #reload-button,
+:root:not([zen-sidebar-legacy="true"]) #zen-sidebar-web-panel-reload {
 	list-style-image: url("reload.svg") !important;
 
 	@media (max-width: 700px) {
@@ -164,11 +182,6 @@
 #appMenu-extensions-themes-button,
 #unified-extensions-button {
 	list-style-image: url("extension.svg") !important;
-
-	@media (max-width: 700px) {
-		display: none;
-	}
-
 }
 
 #zoom-out-button,