diff --git a/src/browser/base/content/zen-popupset.inc.xhtml b/src/browser/base/content/zen-popupset.inc.xhtml
index 2fe1b2a20..472c4a9c4 100644
--- a/src/browser/base/content/zen-popupset.inc.xhtml
+++ b/src/browser/base/content/zen-popupset.inc.xhtml
@@ -151,10 +151,9 @@
+
+
-
-
-
\ No newline at end of file
+
diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css
index 7723c7d7b..af01ab769 100644
--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -37,7 +37,11 @@
width: 4px;
border-radius: 99px;
height: 4px;
- background: color-mix(in srgb, var(--zen-primary-color) 10%, light-dark(rgba(0,0,0,.4), rgba(255,255,255,.4)) 90%);
+ background: color-mix(
+ in srgb,
+ var(--zen-primary-color) 10%,
+ light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)) 90%
+ );
left: 50%;
top: 50%;
filter: saturate(140%) brightness(110%) !important;
@@ -157,7 +161,7 @@
/* Workspaces Panel UI */
#PanelUI-zen-workspaces {
- --panel-width: 320px;
+ --subpanel-width: 320px;
--panel-padding: 0;
}
@@ -167,10 +171,10 @@
overflow-y: auto;
}
-#PanelUI-zen-workspaces panelmultiview panelview {
+#PanelUI-zen-workspaces panelmultiview panelview:not(#PanelUI-zen-workspaces-icon-picker) {
position: relative;
padding: 15px;
- width: var(--panel-width);
+ width: var(--subpanel-width);
}
#PanelUI-zen-workspaces-icon-picker toolbarbutton {
@@ -196,17 +200,25 @@
}
#PanelUI-zen-workspaces-icon-picker {
+ display: grid;
+ grid-template-columns: auto auto auto;
+
overflow-x: hidden;
justify-items: center;
overflow-y: auto;
- max-width: 290px;
- max-height: 290px;
+ max-width: 150px !important;
+ min-width: 150px !important;
+
+ max-height: 200px;
+ min-height: 200px;
+
+ padding: 0px !important;
&::part(content) {
padding: 5px;
display: flex;
- gap: 10px;
+ gap: 5px;
flex-wrap: wrap;
}
@@ -253,7 +265,7 @@
}
}
-#PanelUI-zen-workspaces-list toolbarbutton{
+#PanelUI-zen-workspaces-list toolbarbutton {
padding: 5px;
border-radius: var(--zen-button-border-radius);
@@ -299,13 +311,13 @@
font-weight: normal;
}
- & .zen-workspace-actions, .zen-workspace-actions-reorder-icon {
+ & .zen-workspace-actions,
+ .zen-workspace-actions-reorder-icon {
display: none;
margin: 0;
margin-left: auto !important;
}
-
&.zen-workspace-button[active='true'] {
position: relative;
}
@@ -342,14 +354,14 @@
color: var(--toolbarbutton-icon-fill-attention) !important;
}
-#PanelUI-zen-workspaces-list:not([reorder-mode="true"]) toolbarbutton {
+#PanelUI-zen-workspaces-list:not([reorder-mode='true']) toolbarbutton {
&:hover .zen-workspace-actions,
& .zen-workspace-actions[active='true'] {
display: flex;
}
}
-#PanelUI-zen-workspaces-list[reorder-mode="true"] toolbarbutton {
+#PanelUI-zen-workspaces-list[reorder-mode='true'] toolbarbutton {
.zen-workspace-actions-reorder-icon {
display: flex;
}
@@ -359,7 +371,8 @@
margin-top: 10px;
}
-#PanelUI-zen-workspaces-new, #PanelUI-zen-workspaces-reorder-mode {
+#PanelUI-zen-workspaces-new,
+#PanelUI-zen-workspaces-reorder-mode {
margin-left: auto;
min-height: 1px !important;
padding: 3px;