Upgrade Tailwind to v4 (#491)

apps/yaak-client/components/core/AutoScroller.tsx

@@ -72,7 +72,7 @@ export function AutoScroller<T>({
             size="sm"
             iconSize="md"
             variant="border"
-            className="!bg-surface z-10"
+            className="bg-surface! z-10"
             onClick={() => setAutoScroll((v) => !v)}
           />
         </div>
@@ -80,7 +80,7 @@ export function AutoScroller<T>({
       {header ?? <span aria-hidden />}
       <div
         ref={containerRef}
-        className="h-full w-full overflow-y-auto focus:outline-none"
+        className="h-full w-full overflow-y-auto focus:outline-hidden"
         onScroll={handleScroll}
         tabIndex={focusable ? 0 : undefined}
       >

apps/yaak-client/components/core/Checkbox.tsx

@@ -39,10 +39,10 @@ export function Checkbox({
         <input
           aria-hidden
           className={classNames(
-            "appearance-none flex-shrink-0 border border-border",
+            "appearance-none shrink-0 border border-border",
             size === "sm" && "w-4 h-4",
             size === "md" && "w-5 h-5",
-            "rounded outline-none ring-0",
+            "rounded-sm outline-hidden ring-0",
             !disabled && "hocus:border-border-focus hocus:bg-focus/[5%]",
             disabled && "border-dotted",
           )}

apps/yaak-client/components/core/ColorPicker.tsx

@@ -17,7 +17,7 @@ export function ColorPicker({ onChange, color, className }: Props) {
     <div className={className}>
       <HexColorPicker
         color={color ?? undefined}
-        className="!w-full"
+        className="w-full!"
         onChange={(color) => {
           onChange(color);
           regenerateKey(); // To force input to change
@@ -96,7 +96,7 @@ export function ColorPickerWithThemeColors({ onChange, color, className }: Props
         <>
           <HexColorPicker
             color={color ?? undefined}
-            className="!w-full"
+            className="w-full!"
             onChange={(color) => {
               onChange(color);
               regenerateKey(); // To force input to change

apps/yaak-client/components/core/CountBadge.tsx

@@ -18,7 +18,7 @@ export function CountBadge({ count, count2, className, color, showZero }: Props)
       className={classNames(
         className,
         "flex items-center",
-        "opacity-70 border text-4xs rounded mb-0.5 px-1 ml-1 h-4 font-mono",
+        "opacity-70 border text-4xs rounded-sm mb-0.5 px-1 ml-1 h-4 font-mono",
         color == null && "border-border-subtle",
         color === "primary" && "text-primary",
         color === "secondary" && "text-secondary",

apps/yaak-client/components/core/DetailsBanner.tsx

@@ -42,7 +42,7 @@ export function DetailsBanner({
   return (
     <Banner color={color} className={className}>
       <details className="group list-none" open={isOpen} onToggle={handleToggle} {...extraProps}>
-        <summary className="!cursor-default !select-none list-none flex items-center gap-3 focus:outline-none opacity-70">
+        <summary className="cursor-default! select-none! list-none flex items-center gap-3 focus:outline-hidden opacity-70">
           <div
             className={classNames(
               "transition-transform",

apps/yaak-client/components/core/Dialog.tsx

@@ -74,13 +74,13 @@ export function Dialog({
             "relative bg-surface pointer-events-auto",
             "rounded-lg",
             "border border-border-subtle shadow-lg shadow-[rgba(0,0,0,0.1)]",
-            "min-h-[10rem]",
+            "min-h-40",
             "max-w-[calc(100vw-5rem)] max-h-[calc(100vh-5rem)]",
-            size === "sm" && "w-[30rem]",
-            size === "md" && "w-[50rem]",
-            size === "lg" && "w-[70rem]",
-            size === "full" && "w-[100vw] h-[100vh]",
-            size === "dynamic" && "min-w-[20rem] max-w-[100vw]",
+            size === "sm" && "w-120",
+            size === "md" && "w-200",
+            size === "lg" && "w-280",
+            size === "full" && "w-screen h-screen",
+            size === "dynamic" && "min-w-80 max-w-[100vw]",
           )}
         >
           {title ? (

apps/yaak-client/components/core/Dropdown.tsx

@@ -712,7 +712,7 @@ const Menu = forwardRef<Omit<DropdownRef, "open" | "isOpen" | "toggle" | "items"
         className={classNames(
           className,
           "x-theme-menu",
-          "outline-none my-1 pointer-events-auto z-40",
+          "outline-hidden my-1 pointer-events-auto z-40",
           "fixed",
         )}
       >
@@ -734,7 +734,7 @@ const Menu = forwardRef<Omit<DropdownRef, "open" | "isOpen" | "toggle" | "items"
           {filter && (
             <HStack
               space={2}
-              className="pb-0.5 px-1.5 mb-2 text-sm border border-border-subtle mx-2 rounded font-mono h-xs"
+              className="pb-0.5 px-1.5 mb-2 text-sm border border-border-subtle mx-2 rounded-sm font-mono h-xs"
             >
               <Icon icon="search" size="xs" />
               <div className="text">{filter}</div>
@@ -916,24 +916,24 @@ function MenuItem({
         )
       }
       rightSlot={rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
-      innerClassName="!text-left"
+      innerClassName="text-left!"
       color="custom"
       className={classNames(
         className,
         "h-xs", // More compact
-        "min-w-[8rem] outline-none px-2 mx-1.5 flex whitespace-nowrap",
-        "focus:bg-surface-highlight focus:text rounded focus:outline-none focus-visible:outline-1",
-        isParentOfActiveSubmenu && "bg-surface-highlight text rounded",
-        item.color === "danger" && "!text-danger",
-        item.color === "primary" && "!text-primary",
-        item.color === "success" && "!text-success",
-        item.color === "warning" && "!text-warning",
-        item.color === "notice" && "!text-notice",
-        item.color === "info" && "!text-info",
+        "min-w-32 outline-hidden px-2 mx-1.5 flex whitespace-nowrap",
+        "focus:bg-surface-highlight focus:text rounded-sm focus:outline-hidden focus-visible:outline-1",
+        isParentOfActiveSubmenu && "bg-surface-highlight text rounded-sm",
+        item.color === "danger" && "text-danger!",
+        item.color === "primary" && "text-primary!",
+        item.color === "success" && "text-success!",
+        item.color === "warning" && "text-warning!",
+        item.color === "notice" && "text-notice!",
+        item.color === "info" && "text-info!",
       )}
       {...props}
     >
-      <div className={classNames("truncate min-w-[5rem]")}>{item.label}</div>
+      <div className={classNames("truncate min-w-20")}>{item.label}</div>
     </Button>
   );
 }

apps/yaak-client/components/core/Editor/DiffViewer.css

@@ -1,3 +1,5 @@
+@reference "../../../main.css";
+
 .cm-wrapper.cm-multiline .cm-mergeView {
   @apply h-full w-full overflow-auto pr-0.5;
 
@@ -9,7 +11,7 @@
     @apply w-full min-h-full relative;
 
     .cm-collapsedLines {
-      @apply bg-none bg-surface border border-border py-1 mx-0.5 text-text opacity-80 hover:opacity-100 rounded cursor-default;
+      @apply bg-none bg-surface border border-border py-1 mx-0.5 text-text opacity-80 hover:opacity-100 rounded-sm cursor-default;
     }
   }
 
@@ -19,21 +21,21 @@
   .cm-changedLine {
     /* Round top corners only if previous line is not a changed line */
     &:not(.cm-changedLine + &) {
-      @apply rounded-t;
+      @apply rounded-t-sm;
     }
     /* Round bottom corners only if next line is not a changed line */
     &:not(:has(+ .cm-changedLine)) {
-      @apply rounded-b;
+      @apply rounded-b-sm;
     }
   }
 
   /* Let content grow and disable individual scrolling for sync */
   .cm-editor {
-    @apply h-auto relative !important;
+    @apply h-auto! relative!;
     position: relative !important;
   }
 
   .cm-scroller {
-    @apply overflow-visible !important;
+    @apply overflow-visible!;
   }
 }

apps/yaak-client/components/core/Editor/Editor.css

@@ -1,3 +1,5 @@
+@reference "../../../main.css";
+
 .cm-wrapper {
   @apply h-full overflow-hidden;
 
@@ -7,7 +9,7 @@
     /* Regular cursor */
 
     .cm-cursor {
-      @apply border-text !important;
+      @apply border-text!;
       /* Widen the cursor a bit */
       @apply border-l-[2px];
     }
@@ -15,8 +17,8 @@
     /* Vim-mode cursor */
 
     .cm-fat-cursor {
-      @apply outline-0 bg-text !important;
-      @apply text-surface !important;
+      @apply outline-0! bg-text!;
+      @apply text-surface!;
     }
 
     /* Matching bracket */
@@ -59,12 +61,12 @@
 
       * {
         @apply cursor-text;
-        @apply caret-transparent !important;
+        @apply caret-transparent!;
       }
     }
 
     .cm-selectionBackground {
-      @apply bg-selection !important;
+      @apply bg-selection!;
     }
 
     /* Fix WebKit/WKWebView rendering bug where selection layer leaves a ghost
@@ -88,7 +90,7 @@
     }
 
     .cm-gutter-lint {
-      @apply w-auto !important;
+      @apply w-auto!;
 
       .cm-gutterElement {
         @apply px-0;
@@ -111,7 +113,7 @@
       @apply bg-surface text-text-subtle border-border-subtle whitespace-nowrap cursor-default;
       @apply hover:border-border hover:text-text hover:bg-surface-highlight;
 
-      @apply inline border px-1 mx-[0.5px] rounded dark:shadow;
+      @apply inline border px-1 mx-[0.5px] rounded-sm dark:shadow;
 
       -webkit-text-security: none;
 
@@ -162,7 +164,7 @@
 
       &::-webkit-scrollbar-corner,
       &::-webkit-scrollbar {
-        @apply hidden !important;
+        @apply hidden!;
       }
     }
   }
@@ -189,16 +191,16 @@
 
 /* Style search matches */
 .cm-searchMatch {
-  @apply bg-transparent !important;
+  @apply bg-transparent!;
   @apply rounded-[2px] outline outline-1;
 
   &.cm-searchMatch-selected {
     @apply outline-text;
-    @apply bg-text !important;
+    @apply bg-text!;
 
     &,
     * {
-      @apply text-surface font-semibold !important;
+      @apply text-surface! font-semibold!;
     }
   }
 }
@@ -223,8 +225,8 @@
 }
 
 .cm-editor .fold-gutter-icon {
-  @apply pt-[0.25em] pl-[0.4em] px-[0.4em] h-4 rounded;
-  @apply cursor-default !important;
+  @apply pt-[0.25em] pl-[0.4em] px-[0.4em] h-4 rounded-sm;
+  @apply cursor-default!;
 }
 
 .cm-editor .fold-gutter-icon::after {
@@ -248,7 +250,7 @@
 .cm-editor .cm-foldPlaceholder {
   @apply px-2 border border-border-subtle bg-surface-highlight;
   @apply hover:text-text hover:border-border-subtle text-text;
-  @apply cursor-default !important;
+  @apply cursor-default!;
 }
 
 .cm-editor .cm-activeLineGutter {
@@ -277,7 +279,7 @@
 }
 
 .cm-tooltip-lint {
-  @apply font-mono text-editor rounded overflow-hidden bg-surface-highlight border border-border shadow !important;
+  @apply font-mono! text-editor! rounded-sm! overflow-hidden! bg-surface-highlight! border! border-border! shadow!;
 
   .cm-diagnostic-error {
     @apply border-l-danger px-4 py-2;
@@ -293,18 +295,18 @@
 }
 
 .cm-tooltip.cm-tooltip-hover {
-  @apply shadow-lg bg-surface rounded text-text-subtle border border-border-subtle z-50 pointer-events-auto text-sm;
+  @apply shadow-lg bg-surface rounded-sm text-text-subtle border border-border-subtle z-50 pointer-events-auto text-sm;
   @apply p-1.5;
 
   /* Style the tooltip for popping up "open in browser" and other stuff */
 
   a,
   button {
-    @apply text-text hover:bg-surface-highlight w-full h-sm flex items-center px-2 rounded;
+    @apply text-text hover:bg-surface-highlight w-full h-sm flex items-center px-2 rounded-sm;
   }
 
   a {
-    @apply cursor-default !important;
+    @apply cursor-default!;
 
     &::after {
       @apply text-text bg-text h-3 w-3 ml-1;
@@ -319,10 +321,10 @@
 /* NOTE: Extra selector required to override default styles */
 .cm-tooltip.cm-tooltip-autocomplete,
 .cm-tooltip.cm-completionInfo {
-  @apply shadow-lg bg-surface rounded text-text-subtle border border-border-subtle z-50 pointer-events-auto;
+  @apply shadow-lg bg-surface rounded-sm text-text-subtle border border-border-subtle z-50 pointer-events-auto;
 
   & * {
-    @apply font-mono text-editor !important;
+    @apply font-mono! text-editor!;
   }
 
   .cm-completionIcon {
@@ -409,7 +411,7 @@
     }
 
     .cm-completionIcon {
-      @apply text-sm flex items-center pb-0.5 flex-shrink-0;
+      @apply text-sm flex items-center pb-0.5 shrink-0;
     }
 
     .cm-completionLabel {
@@ -427,7 +429,7 @@
 
   input,
   button {
-    @apply rounded-sm outline-none;
+    @apply rounded-sm outline-hidden;
   }
 
   button {
@@ -436,12 +438,12 @@
   }
 
   button[name="close"] {
-    @apply text-text-subtle hocus:text-text px-2 -mr-1.5 !important;
+    @apply text-text-subtle! hocus:text-text! px-2! -mr-1.5!;
   }
 
   input {
     @apply bg-surface border-border-subtle focus:border-border-focus;
-    @apply border outline-none;
+    @apply border outline-hidden;
   }
 
   input.cm-textfield {

apps/yaak-client/components/core/Editor/Editor.tsx

@@ -486,7 +486,7 @@ function EditorInner({
   const decoratedActions = useMemo(() => {
     const results = [];
     const actionClassName = classNames(
-      "bg-surface transition-opacity transform-gpu opacity-0 group-hover:opacity-100 hover:!opacity-100 shadow",
+      "bg-surface transition-opacity transform-gpu opacity-0 group-hover:opacity-100 hover:opacity-100! shadow",
     );
 
     if (format) {

apps/yaak-client/components/core/EventViewerRow.tsx

@@ -24,8 +24,8 @@ export function EventViewerRow({
         onClick={onClick}
         className={classNames(
           "w-full grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2 items-center text-left",
-          "px-1.5 h-xs font-mono text-editor cursor-default group focus:outline-none focus:text-text rounded",
-          isActive && "bg-surface-active !text-text",
+          "px-1.5 h-xs font-mono text-editor cursor-default group focus:outline-hidden focus:text-text rounded-sm",
+          isActive && "bg-surface-active text-text!",
           "text-text-subtle hover:text",
         )}
       >

apps/yaak-client/components/core/Hotkey.tsx

@@ -30,7 +30,7 @@ export function HotkeyRaw({ labelParts, className, variant }: HotkeyRawProps) {
       className={classNames(
         className,
         variant === "with-bg" &&
-          "rounded bg-surface-highlight px-1 border border-border text-text-subtle",
+          "rounded-sm bg-surface-highlight px-1 border border-border text-text-subtle",
         variant === "text" && "text-text-subtlest",
       )}
     >

apps/yaak-client/components/core/HttpMethodTag.tsx

@@ -81,7 +81,7 @@ export function HttpMethodTagRaw({
         colored && m === "PATCH" && "text-notice",
         colored && m === "POST" && "text-success",
         colored && m === "DELETE" && "text-danger",
-        "font-mono flex-shrink-0 whitespace-pre",
+        "font-mono shrink-0 whitespace-pre",
         "pt-[0.15em]", // Fix for monospace font not vertically centering
       )}
     >

apps/yaak-client/components/core/Input.tsx

@@ -201,7 +201,7 @@ function BaseInput({
   const id = useRef(`input-${generateId()}`);
   const editorClassName = classNames(
     className,
-    "!bg-transparent min-w-0 h-auto w-full focus:outline-none placeholder:text-placeholder",
+    "bg-transparent! min-w-0 h-auto w-full focus:outline-hidden placeholder:text-placeholder",
   );
 
   const isValid = useMemo(() => {
@@ -264,7 +264,7 @@ function BaseInput({
           "border",
           focused && !disabled ? "border-border-focus" : "border-border",
           disabled && "border-dotted",
-          !isValid && hasChanged && "!border-danger",
+          !isValid && hasChanged && "border-danger!",
           size === "md" && "min-h-md",
           size === "sm" && "min-h-sm",
           size === "xs" && "min-h-xs",
@@ -333,7 +333,7 @@ function BaseInput({
                 : `Obscure ${typeof label === "string" ? label : "field"}`
             }
             size="xs"
-            className={classNames("mr-0.5 !h-auto my-0.5", disabled && "opacity-disabled")}
+            className={classNames("mr-0.5 h-auto! my-0.5", disabled && "opacity-disabled")}
             color={tint}
             // iconClassName={classNames(
             //   tint === 'primary' && 'text-primary',
@@ -548,9 +548,9 @@ function EncryptionInput({
             color={tint}
             aria-label="Configure encryption"
             className={classNames(
-              "flex items-center justify-center !h-full !px-1",
+              "flex items-center justify-center h-full! px-1!",
               "opacity-70", // Makes it a bit subtler
-              props.disabled && "!opacity-disabled",
+              props.disabled && "opacity-disabled!",
             )}
           >
             <HStack space={0.5}>

apps/yaak-client/components/core/KeyValueRow.tsx

@@ -73,7 +73,7 @@ export function KeyValueRow({
     <>
       <td
         className={classNames(
-          "select-none py-0.5 pr-2 h-full max-w-[10rem]",
+          "select-none py-0.5 pr-2 h-full max-w-40",
           align === "top" && "align-top",
           align === "middle" && "align-middle",
           labelClassName,
@@ -86,12 +86,12 @@ export function KeyValueRow({
       </td>
       <td
         className={classNames(
-          "select-none py-0.5 break-all max-w-[15rem]",
+          "select-none py-0.5 break-all max-w-60",
           align === "top" && "align-top",
           align === "middle" && "align-middle",
         )}
       >
-        <div className="select-text cursor-text max-h-[12rem] overflow-y-auto grid grid-cols-[auto_minmax(0,1fr)_auto]">
+        <div className="select-text cursor-text max-h-48 overflow-y-auto grid grid-cols-[auto_minmax(0,1fr)_auto]">
           {leftSlot ?? <span aria-hidden />}
           {children}
           {resolvedRightSlot ? (

apps/yaak-client/components/core/Label.tsx

@@ -27,7 +27,7 @@ export function Label({
       className={classNames(
         className,
         visuallyHidden && "sr-only",
-        "flex-shrink-0 text-sm",
+        "shrink-0 text-sm",
         "text-text-subtle whitespace-nowrap flex items-center gap-1 mb-0.5",
       )}
       {...props}

apps/yaak-client/components/core/PairEditor.tsx

@@ -566,7 +566,7 @@ export function PairEditorRow({
         title={pair.enabled ? "Disable item" : "Enable item"}
         disabled={isLast || disabled}
         checked={isLast ? false : !!pair.enabled}
-        className={classNames(isLast && "!opacity-disabled")}
+        className={classNames(isLast && "opacity-disabled!")}
         onChange={handleChangeEnabled}
       />
       {!isLast && !disableDrag ? (
@@ -586,7 +586,7 @@ export function PairEditorRow({
       <div
         className={classNames(
           "grid items-center",
-          "@xs:gap-2 @xs:!grid-rows-1 @xs:!grid-cols-[minmax(0,1fr)_minmax(0,1fr)]",
+          "@xs:gap-2 @xs:grid-rows-1! @xs:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]!",
           "gap-0.5 grid-cols-1 grid-rows-2",
         )}
       >
@@ -830,7 +830,7 @@ function MultilineEditDialog({
   const [value, setValue] = useState<string>(defaultValue);
   const language = languageFromContentType(contentType, value);
   return (
-    <div className="w-[100vw] max-w-[40rem] h-[50vh] max-h-full grid grid-rows-[minmax(0,1fr)_auto]">
+    <div className="w-screen max-w-160 h-[50vh] max-h-full grid grid-rows-[minmax(0,1fr)_auto]">
       <Editor
         heightMode="auto"
         defaultValue={defaultValue}

apps/yaak-client/components/core/PairOrBulkEditor.tsx

@@ -26,7 +26,7 @@ export function PairOrBulkEditor({ preferenceName, ...props }: Props) {
           variant="border"
           title={useBulk ? "Enable form edit" : "Enable bulk edit"}
           className={classNames(
-            "transition-opacity opacity-0 group-hover:opacity-80 hover:!opacity-100 shadow",
+            "transition-opacity opacity-0 group-hover:opacity-80 hover:opacity-100! shadow",
             "bg-surface hover:text group-hover/wrapper:opacity-100",
           )}
           onClick={() => setUseBulk((b) => !b)}

apps/yaak-client/components/core/PillButton.tsx

@@ -7,7 +7,7 @@ export function PillButton({ className, ...props }: ButtonProps) {
     <Button
       size="2xs"
       variant="border"
-      className={classNames(className, "!rounded-full mx-1 !px-3")}
+      className={classNames(className, "rounded-full! mx-1 px-3!")}
       {...props}
     />
   );

apps/yaak-client/components/core/PlainInput.tsx

@@ -116,7 +116,7 @@ export const PlainInput = forwardRef<{ focus: () => void }, PlainInputProps>(fun
   const id = useRef(`input-${generateId()}`);
   const commonClassName = classNames(
     className,
-    "!bg-transparent min-w-0 w-full focus:outline-none placeholder:text-placeholder",
+    "bg-transparent! min-w-0 w-full focus:outline-hidden placeholder:text-placeholder",
     "px-2 text-xs font-mono cursor-text",
   );
 
@@ -167,7 +167,7 @@ export const PlainInput = forwardRef<{ focus: () => void }, PlainInputProps>(fun
           "overflow-hidden",
           focused && !disabled ? "border-border-focus" : "border-border-subtle",
           disabled && "border-dotted",
-          hasChanged && "has-[:invalid]:border-danger", // For built-in HTML validation
+          hasChanged && "has-invalid:border-danger", // For built-in HTML validation
           size === "md" && "min-h-md",
           size === "sm" && "min-h-sm",
           size === "xs" && "min-h-xs",
@@ -225,7 +225,7 @@ export const PlainInput = forwardRef<{ focus: () => void }, PlainInputProps>(fun
                 : `Obscure ${typeof label === "string" ? label : "field"}`
             }
             size="xs"
-            className="mr-0.5 group/obscure !h-auto my-0.5"
+            className="mr-0.5 group/obscure h-auto! my-0.5"
             iconClassName="group-hover/obscure:text"
             iconSize="sm"
             icon={obscured ? "eye" : "eye_closed"}

apps/yaak-client/components/core/RadioCards.tsx

@@ -43,7 +43,7 @@ export function RadioCards<T extends string>({
             />
             <div
               className={classNames(
-                "mt-1 w-4 h-4 flex-shrink-0 rounded-full border",
+                "mt-1 w-4 h-4 shrink-0 rounded-full border",
                 "flex items-center justify-center",
                 selected ? "border-focus" : "border-border",
               )}

apps/yaak-client/components/core/SegmentedControl.tsx

@@ -92,7 +92,7 @@ export function SegmentedControl<T extends string>({
                 role="radio"
                 tabIndex={isSelected ? 0 : -1}
                 className={classNames(
-                  isActive && "!text-text",
+                  isActive && "text-text!",
                   "focus:ring-1 focus:ring-border-focus",
                 )}
                 onClick={() => onChange(o.value)}
@@ -111,8 +111,8 @@ export function SegmentedControl<T extends string>({
                 role="radio"
                 tabIndex={isSelected ? 0 : -1}
                 className={classNames(
-                  isActive && "!text-text",
-                  "!px-1.5 !w-auto",
+                  isActive && "text-text!",
+                  "px-1.5! w-auto!",
                   "focus:ring-border-focus",
                 )}
                 title={o.label}

apps/yaak-client/components/core/Select.tsx

@@ -90,8 +90,8 @@ export function Select<T extends string>({
             onBlur={() => setFocused(false)}
             disabled={disabled}
             className={classNames(
-              "pr-7 w-full outline-none bg-transparent disabled:opacity-disabled",
-              "leading-[1] rounded-none", // Center the text better vertically
+              "pr-7 w-full outline-hidden bg-transparent disabled:opacity-disabled",
+              "leading-none rounded-none", // Center the text better vertically
             )}
           >
             {isInvalidSelection && <option value={"__NONE__"}>-- Select an Option --</option>}

apps/yaak-client/components/core/SettingRow.tsx

@@ -189,7 +189,7 @@ export function ModelSettingRowBoolean<M extends AnyModel, K extends ModelKeyOfV
 
 export function SettingRowNumber({
   inputClassName,
-  inputWidthClassName = "!w-48",
+  inputWidthClassName = "w-48!",
   name,
   onChange,
   placeholder,
@@ -251,7 +251,7 @@ export function ModelSettingRowNumber<M extends AnyModel, K extends ModelKeyOfVa
 
 export function SettingRowText({
   inputClassName,
-  inputWidthClassName = "!w-80",
+  inputWidthClassName = "w-80!",
   name,
   onChange,
   placeholder,
@@ -358,7 +358,7 @@ export function SettingRowSelect<T extends string>({
   name,
   onChange,
   options,
-  selectClassName = "!w-48",
+  selectClassName = "w-48!",
   title,
   value,
   ...props
@@ -393,7 +393,7 @@ export function SettingSelectControl<T extends string>({
   name,
   onChange,
   options,
-  selectClassName = "!w-48",
+  selectClassName = "w-48!",
   value,
 }: {
   defaultValue?: T;

apps/yaak-client/components/core/Tabs/Tabs.tsx

@@ -342,7 +342,7 @@ export const Tabs = forwardRef<TabsRef, Props>(function Tabs(
       <div
         className={classNames(
           layout === "horizontal" && "flex flex-col w-full pb-3 mb-auto",
-          layout === "vertical" && "flex flex-row flex-shrink-0 w-full",
+          layout === "vertical" && "flex flex-row shrink-0 w-full",
         )}
       >
         {tabButtons}
@@ -456,9 +456,9 @@ function TabButton({
           onChangeValue?.(tab.value);
         },
     className: classNames(
-      "flex items-center rounded whitespace-nowrap",
-      "!px-2 ml-[1px]",
-      "outline-none",
+      "flex items-center rounded-sm whitespace-nowrap",
+      "px-2! ml-px",
+      "outline-hidden",
       "ring-none",
       "focus-visible-or-class:outline-2",
       addBorders && "border focus-visible:bg-surface-highlight",
@@ -468,7 +468,7 @@ function TabButton({
         : layout === "vertical"
           ? "border-border-subtle"
           : "border-transparent",
-      layout === "horizontal" && "min-w-[10rem]",
+      layout === "horizontal" && "min-w-40",
       isDragging && "opacity-50",
       overlay && "opacity-80",
     ),

apps/yaak-client/components/core/Toast.tsx

@@ -54,11 +54,11 @@ export function Toast({ children, open, onClose, timeout, action, icon, color }:
           `x-theme-toast x-theme-toast--${color}`,
           "pointer-events-auto overflow-hidden",
           "relative pointer-events-auto bg-surface text-text rounded-lg",
-          "border border-border shadow-lg w-[25rem]",
+          "border border-border shadow-lg w-100",
         )}
       >
-        <div className="pl-3 py-3 pr-10 flex items-start gap-2 w-full max-h-[11rem] overflow-auto">
-          {toastIcon && <Icon icon={toastIcon} color={color} className="mt-1 flex-shrink-0" />}
+        <div className="pl-3 py-3 pr-10 flex items-start gap-2 w-full max-h-44 overflow-auto">
+          {toastIcon && <Icon icon={toastIcon} color={color} className="mt-1 shrink-0" />}
           <VStack space={2} className="w-full min-w-0">
             <div className="select-auto">{children}</div>
             {action?.({ hide: onClose })}
@@ -68,7 +68,7 @@ export function Toast({ children, open, onClose, timeout, action, icon, color }:
         <IconButton
           color={color}
           variant="border"
-          className="opacity-60 border-0 !absolute top-2 right-2"
+          className="opacity-60 border-0 absolute! top-2 right-2"
           title="Dismiss"
           icon="x"
           onClick={onClose}

apps/yaak-client/components/core/Tooltip.tsx

@@ -116,7 +116,7 @@ export function Tooltip({ children, className, content, tabIndex, size = "md" }:
         role="button"
         aria-describedby={openState ? id.current : undefined}
         tabIndex={tabIndex ?? -1}
-        className={classNames(className, "flex-grow-0 flex items-center")}
+        className={classNames(className, "grow-0 flex items-center")}
         onClick={handleToggleImmediate}
         onMouseEnter={handleOpen}
         onMouseLeave={handleClose}
@@ -141,10 +141,10 @@ function Triangle({ className, position }: { className?: string; position: "top"
       shapeRendering="crispEdges"
       className={classNames(
         className,
-        "absolute z-50 left-[calc(50%-0.4rem)] h-[0.5rem] w-[0.8rem]",
+        "absolute z-50 left-[calc(50%-0.4rem)] h-2 w-[0.8rem]",
         isBottom
-          ? "border-t-[2px] border-surface-highlight -bottom-[calc(0.5rem-3px)] mb-2"
-          : "border-b-[2px] border-surface-highlight -top-[calc(0.5rem-3px)] mt-2",
+          ? "border-t-2 border-surface-highlight -bottom-[calc(0.5rem-3px)] mb-2"
+          : "border-b-2 border-surface-highlight -top-[calc(0.5rem-3px)] mt-2",
       )}
     >
       <title>Triangle</title>