fixed issues with variable names and inline css

src/browser/base/content/zen-popupset.inc.xhtml

@@ -188,28 +188,9 @@
       </html:moz-button-group>
     </panelview>
     <panelview id="PanelUI-zen-workspaces-icon-picker" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
-      <vbox id="PanelUI-zen-workspaces-icon-picker-wrapper"
-      style=" display: flex;
-              flex-wrap: wrap;
-              justify-content: flex-start;
-              gap: 2px;">
-        <html:div id="workspace-icon-search-bar" 
-                  style="position: sticky; 
-                         top: 0; 
-                         background-color: inherit; 
-                         z-index: 1000; 
-                         padding: 10px; 
-                         width: 100%;">
-          <html:input autofocus="true"
-                      type="text" 
-                      id="workspace-icon-search-input" 
-                      placeholder="Search icons..." 
-                      style="width: 100%; 
-                             padding: 8px; 
-                             font-size: 16px; 
-                             border: 1px solid #ccc; 
-                             border-radius: 4px; 
-                             box-sizing: border-box;"/>
+      <vbox id="PanelUI-zen-workspaces-icon-picker-wrapper">
+        <html:div id="PanelUI-zen-workspaces-icon-search-bar">
+          <html:input autofocus="true" type="text" id="PanelUI-zen-workspaces-icon-search-input" oninput="ZenWorkspaces.conductSearch();"/>
         </html:div>
       </vbox>
     </panelview>

src/browser/base/content/zen-styles/zen-popup.css

@@ -196,6 +196,36 @@ panel {
   min-height: calc((var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px);
 }
 
+/* Workspace icon picker styles */
+#PanelUI-zen-workspaces-icon-picker-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 2px;
+}
+
+#PanelUI-zen-workspaces-icon-search-bar {
+  display: flex;
+  position: sticky;
+  top: 0;
+  background-color: inherit;
+  z-index: 1000;
+  padding: 8px;
+  width: 100%;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+#PanelUI-zen-workspaces-icon-search-input {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 14px;
+  border: 1px solid var(--panel-separator-color, #ccc);
+  border-radius: 4px;
+  box-sizing: border-box;
+  margin: 0;
+}
+
 /* URL bar popup */
 
 .identity-popup-security-connection > hbox > description {