Fixed the Settings Menu

apps/zui/package.json

@@ -154,6 +154,7 @@
     "tmp": "^0.1.0",
     "tree-model": "^1.0.7",
     "use-resize-observer": "^8.0.0",
+    "utopia-core-scss": "^1.0.1",
     "web-file-polyfill": "^1.0.4",
     "web-streams-polyfill": "^3.2.0",
     "zed": "brimdata/zed#v1.15.0",

apps/zui/src/components/icon-button.tsx

@@ -22,7 +22,7 @@ const BG = styled.button`
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  transition: background var(--quick), transform var(--quick);
+  transition: background var(--hover-duration), transform var(--hover-duration);
   -webkit-app-region: no-drag;
 
   &:disabled {

apps/zui/src/components/popover-modal.tsx

@@ -37,7 +37,7 @@ export const PopoverModal = forwardRef(function PopoverModal(
         data-debut="popover:drop-in"
         className={classNames(
           props.className,
-          "width:full bg:normal shadow:l radius:l border:solid"
+          "width:full bg:normal shadow:l radius:l border:solid h-fit overflow-hidden"
         )}
       >
         {props.children}

apps/zui/src/css/_blocks.scss

@@ -1,37 +1,39 @@
 .field {
-    &>*+* {
-        margin-block-start: var(--space-2xs);
-    }
+  & > * + * {
+    margin-block-start: var(--space-2xs);
+  }
 }
 
 .field-stack {
-    &>*+* {
-        margin-block-start: var(--space-s);
-    }
+  & > * + * {
+    margin-block-start: var(--space-s);
+  }
 }
 
 .modal {
-    background: var(--bg-color);
-    box-shadow: 0 20px 50px 10px rgb(0 0 0 /0.25);
-    border-radius: 8px;
-    border: none;
-    padding: 0;
-    will-change: opacity, transform;
-    color: var(--fg-color);
+  background: var(--bg-color);
+  box-shadow: 0 20px 50px 10px rgb(0 0 0 /0.25);
+  border-radius: 8px;
+  border: none;
+  padding: 0;
+  will-change: opacity, transform;
+  color: var(--fg-color);
 }
 
 .modal::backdrop {
-    background-color: black;
-    opacity: 0.25;
-    will-change: opacity;
+  background-color: black;
+  opacity: 0.25;
+  will-change: opacity;
 }
 
 @media (prefers-color-scheme: dark) {
-    .modal::backdrop {
-        opacity: 0.8;
-    }
+  .modal::backdrop {
+    opacity: 0.8;
+  }
 
-    .modal {
-        border: 1px solid var(--border-color);
-    }
+  .modal {
+    border: 1px solid var(--border-color);
+  }
 }
+
+

apps/zui/src/css/_global.scss

@@ -21,55 +21,10 @@ body {
   width: 100%;
 }
 
-body {
-  line-height: 1.5;
-  font-size: var(--step-0);
-  -webkit-font-smoothing: antialiased;
-  font-family: var(--body-font);
-  color: var(--fg-color);
-
-  &:not(.is-mac) {
-    background-color: var(--window-color);
-  }
-}
-
-
-input,
-button,
-textarea,
-select {
-  color: var(--fg-color);
-  font: inherit;
-}
-
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
-
-h4 {
-  font-size: var(--step-1);
+body:not(.is-mac) {
+  background-color: var(--window-color);
 }
 
-h3 {
-  font-size: var(--step-2);
-}
-
-h2 {
-  font-size: var(--step-3);
-}
-
-h1 {
-  font-size: var(--step-4);
-}
-
-
-
 pre,
 code {
   border-radius: 3px;
@@ -106,7 +61,6 @@ button {
   height: 0.75rem;
 }
 
-
 *::-webkit-scrollbar-track {
   background-color: var(--emphasis-bg-less);
 }
@@ -133,17 +87,6 @@ dd {
   user-select: none;
 }
 
-label {
-  display: block;
-  font-weight: bold;
-  color: var(--fg-color-less);
-  opacity: 0.9;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.8px;
-  font-size: var(--step--1);
-}
-
 input {
   font-size: inherit;
 }