chore(web): canonicalize Tailwind classes (#41718)

.agents/skills/how-to-write-component/SKILL.md

@@ -35,6 +35,11 @@ Use this skill to route component architecture decisions to its bundled referenc
 3. Implement one coherent vertical slice. Do not expand into equivalent patterns elsewhere unless the current contract cannot be completed without them.
 4. Verify observable behavior at the narrowest sufficient boundary, then run the checks documented by the owning package: `web/docs/test.md` or `web/docs/lint.md` for Web, and `packages/dify-ui/docs/testing.md` for Dify UI.
 
+## Tailwind CSS
+
+- Write canonical Tailwind v4 classes; prefer canonical utilities over equivalent arbitrary values.
+- Common forms include `w-105` instead of `w-[420px]`, `px-2.25` instead of `px-[9px]`, `bg-linear-to-b` instead of `bg-gradient-to-b`, `wrap-break-word` instead of `break-words`, and `field-sizing-content` instead of `[field-sizing:content]`.
+
 [data]: references/data.md
 [interactions]: references/interactions.md
 [ownership]: references/ownership.md

packages/dify-ui/src/autocomplete/index.stories.tsx

@@ -778,7 +778,7 @@ export const GroupedSuggestions: Story = {
         </AutocompleteInputGroup>
         <AutocompletePortal>
           <AutocompletePositioner>
-            <AutocompletePopup className="w-[420px]">
+            <AutocompletePopup className="w-105">
               <GroupedSuggestionList />
               <AutocompleteEmpty>No suggestion. Use the text as entered.</AutocompleteEmpty>
             </AutocompletePopup>
@@ -817,7 +817,7 @@ export const LimitResults: Story = {
         </AutocompleteInputGroup>
         <AutocompletePortal>
           <AutocompletePositioner>
-            <AutocompletePopup className="w-[420px]">
+            <AutocompletePopup className="w-105">
               <AutocompleteStatus className="border-b border-divider-subtle">
                 <LimitedStatus total={workflowSuggestions.length} />
               </AutocompleteStatus>
@@ -892,7 +892,7 @@ const VirtualizedLongSuggestionsDemo = () => {
         </AutocompleteInputGroup>
         <AutocompletePortal>
           <AutocompletePositioner>
-            <AutocompletePopup className="w-[440px] p-1">
+            <AutocompletePopup className="w-110 p-1">
               <VirtualizedStatus />
               <VirtualizedSuggestionList virtualizerRef={virtualizerRef} />
               <AutocompleteEmpty>No suggestion. Free-form text is still valid.</AutocompleteEmpty>

packages/dify-ui/src/button/index.tsx

@@ -43,7 +43,7 @@ const buttonVariants = cva(
         ],
       },
       size: {
-        small: 'h-6 gap-1 rounded-md px-[9px] text-xs font-medium',
+        small: 'h-6 gap-1 rounded-md px-2.25 text-xs font-medium',
         medium: 'h-8 gap-1 rounded-lg px-3.5 text-[13px] leading-4 font-medium',
         large: 'h-9 gap-1.5 rounded-[10px] px-4 text-sm font-semibold',
       },
@@ -56,7 +56,7 @@ const buttonVariants = cva(
       {
         variant: 'primary',
         size: 'small',
-        class: 'gap-[3px] px-2',
+        class: 'gap-0.75 px-2',
       },
       {
         variant: 'primary',

packages/dify-ui/src/popover/index.stories.tsx

@@ -185,7 +185,7 @@ export const Infotip: Story = {
         />
         <PopoverContent
           placement="top"
-          className="max-w-[300px] px-3 py-2 system-xs-regular text-text-tertiary"
+          className="max-w-75 px-3 py-2 system-xs-regular text-text-tertiary"
         >
           Set which resource to use first when running models. The Trial quota will be used after
           the paid quota is exhausted.

packages/dify-ui/src/preview-card/index.stories.tsx

@@ -76,7 +76,7 @@ function LinkPreviewDemo() {
 
       <PreviewCard handle={previewCardHandle}>
         {({ payload = typographyPreviewPayload }) => (
-          <PreviewCardContent className="w-[240px] p-2">
+          <PreviewCardContent className="w-60 p-2">
             <div className="flex flex-col gap-2">
               <img
                 width="224"

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx

@@ -91,7 +91,7 @@ const RangeSelector: FC<Props> = ({ isCustomRange, ranges, onSelect }) => {
       </SelectTrigger>
       <SelectPortal>
         <SelectPositioner className="-translate-x-6">
-          <SelectPopup className="w-[200px]">
+          <SelectPopup className="w-50">
             <SelectList className="p-1">
               {items.map((item) => (
                 <SelectItem

web/app/components/app-sidebar/snippet-info/dropdown.tsx

@@ -137,7 +137,7 @@ const SnippetInfoDropdown = ({ snippet }: SnippetInfoDropdownProps) => {
             </IconButton>
           }
         />
-        <DropdownMenuContent placement="bottom-end" sideOffset={4} className="w-[180px] p-1">
+        <DropdownMenuContent placement="bottom-end" sideOffset={4} className="w-45 p-1">
           {canCreateAndModifySnippet && (
             <>
               <DropdownMenuItem className="mx-0 gap-2" onClick={handleOpenEditDialog}>

web/app/components/app/annotation/header-opts/index.tsx

@@ -95,7 +95,7 @@ const OperationsMenu: FC<OperationsMenuProps> = ({
           />
           {t(($) => $['table.header.bulkExport'], { ns: 'appAnnotation' })}
         </DropdownMenuSubTrigger>
-        <DropdownMenuSubContent placement="left-start" sideOffset={4} className="min-w-[100px]">
+        <DropdownMenuSubContent placement="left-start" sideOffset={4} className="min-w-25">
           <DropdownMenuItem
             disabled={annotationUnavailable}
             onClick={() => {
@@ -190,7 +190,7 @@ const HeaderOptions: FC<Props> = ({ appId, onAdd, onAdded, controlUpdateList })
         >
           <span aria-hidden className="i-ri-more-fill size-4" />
         </DropdownMenuTrigger>
-        <DropdownMenuContent placement="bottom-end" sideOffset={4} className="w-[155px]">
+        <DropdownMenuContent placement="bottom-end" sideOffset={4} className="w-38.75">
           <OperationsMenu
             list={list}
             onClose={() => setIsOperationsMenuOpen(false)}

web/app/components/app/app-access-control/add-member-or-group-pop/index.tsx

@@ -137,7 +137,7 @@ export default function AddMemberOrGroupDialog({
       <PopoverContent
         placement="bottom-end"
         alignOffset={300}
-        className="relative flex max-h-[400px] w-[400px] flex-col overflow-hidden bg-components-panel-bg-blur p-0 backdrop-blur-[5px]"
+        className="relative flex max-h-100 w-100 flex-col overflow-hidden bg-components-panel-bg-blur p-0 backdrop-blur-[5px]"
       >
         <PopoverTitle className="sr-only">{searchLabel}</PopoverTitle>
         <ScrollArea className="min-h-0 flex-1 overflow-hidden">

web/app/components/app/configuration/config-var/config-modal/form-fields.tsx

@@ -169,7 +169,7 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
             <SelectPortal>
               <SelectPositioner>
                 <SelectPopup>
-                  <SelectList className="max-h-[140px] overflow-y-auto">
+                  <SelectList className="max-h-35 overflow-y-auto">
                     <SelectItem value={CHECKBOX_DEFAULT_TRUE_VALUE}>
                       <SelectItemText>
                         {t(($) => $['variableConfig.startChecked'], { ns: 'appDebug' })}
@@ -217,7 +217,7 @@ const ConfigModalFormFields: FC<ConfigModalFormFieldsProps> = ({
                 <SelectPortal>
                   <SelectPositioner>
                     <SelectPopup>
-                      <SelectList className="max-h-[140px] overflow-y-auto">
+                      <SelectList className="max-h-35 overflow-y-auto">
                         <SelectItem value={EMPTY_SELECT_VALUE}>
                           <SelectItemText>
                             {t(($) => $['variableConfig.noDefaultValue'], { ns: 'appDebug' })}

web/app/components/app/configuration/config-var/select-var-type.tsx

@@ -55,7 +55,7 @@ const SelectVarType: FC<Props> = ({ onChange }) => {
         placement="bottom-end"
         sideOffset={8}
         alignOffset={-2}
-        className="min-w-[192px] rounded-lg border bg-components-panel-bg-blur p-0 backdrop-blur-xs"
+        className="min-w-48 rounded-lg border bg-components-panel-bg-blur p-0 backdrop-blur-xs"
       >
         <div className="p-1">
           <SelectItem

web/app/components/app/configuration/config/automatic/version-selector.tsx

@@ -41,7 +41,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
         placement="bottom-start"
         sideOffset={4}
         alignOffset={-12}
-        className="w-[208px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
+        className="w-52 rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
       >
         <div className="flex h-5.5 items-center px-3 pl-3 system-xs-medium-uppercase text-text-tertiary">
           {t(($) => $['generate.versions'], { ns: 'appDebug' })}

web/app/components/app/configuration/configuration-view/legacy-agent-badge.tsx

@@ -23,7 +23,7 @@ export function LegacyAgentBadge() {
       <PopoverContent
         placement="bottom-start"
         sideOffset={6}
-        className="max-w-[300px] px-3 py-2 system-xs-regular text-text-tertiary"
+        className="max-w-75 px-3 py-2 system-xs-regular text-text-tertiary"
       >
         <div>{description}</div>
         <Link

web/app/components/app/configuration/debug/debug-with-multiple-model/debug-item.tsx

@@ -88,7 +88,7 @@ const DebugItem: FC<DebugItemProps> = ({ modelAndParameter, className, style })
               </IconButton>
             }
           />
-          <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-[160px]">
+          <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-40">
             {showDuplicate && (
               <DropdownMenuItem className="system-md-regular" onClick={handleDuplicate}>
                 {t(($) => $.duplicateModel, { ns: 'appDebug' })}

web/app/components/app/configuration/tools/external-data-tool-modal.tsx

@@ -133,7 +133,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
             >
               <SelectValue />
             </SelectTrigger>
-            <SelectContent className="w-[354px]">
+            <SelectContent className="w-88.5">
               {providers.map((option) => (
                 <SelectItem key={option.key} value={option.key}>
                   <SelectItemText>{option.name}</SelectItemText>

web/app/components/app/deploy/shared/version-label.tsx

@@ -61,7 +61,7 @@ export function VersionLabel({
         />
         <PopoverContent
           placement="top"
-          className="w-[296px] max-w-[calc(100vw-32px)] border-0 bg-components-tooltip-bg px-4 py-3.5 text-start inset-ring-[0.5px] inset-ring-components-panel-border backdrop-blur-[5px]"
+          className="w-74 max-w-[calc(100vw-32px)] border-0 bg-components-tooltip-bg px-4 py-3.5 text-start inset-ring-[0.5px] inset-ring-components-panel-border backdrop-blur-[5px]"
         >
           <div className="flex flex-col gap-1">
             <PopoverTitle className="system-sm-semibold text-text-secondary">{name}</PopoverTitle>

web/app/components/app/type-selector/index.tsx

@@ -63,7 +63,7 @@ const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
         <PopoverContent
           placement="bottom-start"
           sideOffset={4}
-          className="w-[240px] rounded-xl border border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]"
+          className="w-60 rounded-xl border border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]"
         >
           <ul className="relative w-full p-1">
             {allTypes.map((mode) => (

web/app/components/apps/app-sort-filter.tsx

@@ -54,7 +54,7 @@ export function AppSortFilter({ value, onChange }: AppSortFilterProps) {
         </span>
         <span aria-hidden className="i-ri-arrow-down-s-line size-4 shrink-0 text-text-tertiary" />
       </DropdownMenuTrigger>
-      <DropdownMenuContent placement="bottom-start" sideOffset={4} className="w-[220px]">
+      <DropdownMenuContent placement="bottom-start" sideOffset={4} className="w-55">
         <DropdownMenuRadioGroup<AppListSortBy>
           value={value}
           onValueChange={(nextValue) => onChange(nextValue)}

web/app/components/apps/app-type-filter.tsx

@@ -85,7 +85,7 @@ export function AppTypeFilter({ value, onChange }: AppTypeFilterProps) {
         <span className="px-1 text-text-tertiary">{triggerLabel}</span>
         <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary" />
       </DropdownMenuTrigger>
-      <DropdownMenuContent placement="bottom-start" className="w-[220px]">
+      <DropdownMenuContent placement="bottom-start" className="w-55">
         <DropdownMenuRadioGroup<AppListCategory>
           value={value}
           onValueChange={(nextValue) => onChange(nextValue)}

web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx

@@ -36,7 +36,7 @@ const MobileOperationDropdown = ({
           </IconButton>
         }
       />
-      <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-[160px]">
+      <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-40">
         <DropdownMenuItem
           className="system-md-regular"
           onClick={() => handleMenuAction(handleResetChat)}

web/app/components/base/chat/chat-with-history/header/operation.tsx

@@ -40,7 +40,7 @@ const Operation: FC<Props> = ({
         <span className="system-md-semibold">{title}</span>
         <span aria-hidden className="i-ri-arrow-down-s-line size-4" />
       </DropdownMenuTrigger>
-      <DropdownMenuContent placement="bottom-start" sideOffset={4} className="min-w-[120px]">
+      <DropdownMenuContent placement="bottom-start" sideOffset={4} className="min-w-30">
         <DropdownMenuItem className="system-md-regular" onClick={togglePin}>
           <span className="grow">
             {isPinned

web/app/components/base/chat/chat-with-history/sidebar/operation.tsx

@@ -58,7 +58,7 @@ const Operation: FC<Props> = ({
       <DropdownMenuContent
         placement="bottom-end"
         sideOffset={4}
-        className="min-w-[120px]"
+        className="min-w-30"
         onClick={(e) => e.stopPropagation()}
       >
         <DropdownMenuItem

web/app/components/base/chat/chat/answer/human-input-content/field-renderer.tsx

@@ -63,7 +63,7 @@ const HumanInputFieldRenderer = ({ field, value, onChange }: Props) => {
         <SelectPortal>
           <SelectPositioner>
             <SelectPopup>
-              <SelectList className="max-h-[140px] overflow-y-auto">
+              <SelectList className="max-h-35 overflow-y-auto">
                 {options.map((option) => (
                   <SelectItem key={option.value} value={option.value}>
                     <SelectItemText>{option.name}</SelectItemText>

web/app/components/base/chat/chat/answer/human-input-content/submitted-content-item.tsx

@@ -77,7 +77,7 @@ const SubmittedContentItem = ({ content, formInputFields, values }: SubmittedCon
           <SelectPortal>
             <SelectPositioner>
               <SelectPopup>
-                <SelectList className="max-h-[140px] overflow-y-auto">
+                <SelectList className="max-h-35 overflow-y-auto">
                   {field.option_source.value.map((option) => (
                     <SelectItem key={option} value={option}>
                       <SelectItemText>{option}</SelectItemText>

web/app/components/base/date-and-time-picker/date-range-picker/index.tsx

@@ -96,7 +96,7 @@ const DateRangePicker: FC<DateRangePickerProps> = ({
                   ? `${placeholder}: ${t(($) => $['operation.clear'], { ns: 'common' })}`
                   : t(($) => $['operation.clear'], { ns: 'common' })
               }
-              className="pointer-events-none absolute top-1/2 right-1 z-[1] flex size-4 -translate-y-1/2 items-center justify-center rounded border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg text-text-tertiary opacity-0 shadow-xs group-focus-within/date-trigger:pointer-events-auto group-focus-within/date-trigger:opacity-100 group-hover/date-trigger:pointer-events-auto group-hover/date-trigger:opacity-100 hover:bg-components-button-secondary-bg-hover hover:text-text-secondary [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100"
+              className="pointer-events-none absolute top-1/2 right-1 z-1 flex size-4 -translate-y-1/2 items-center justify-center rounded border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg text-text-tertiary opacity-0 shadow-xs group-focus-within/date-trigger:pointer-events-auto group-focus-within/date-trigger:opacity-100 group-hover/date-trigger:pointer-events-auto group-hover/date-trigger:opacity-100 hover:bg-components-button-secondary-bg-hover hover:text-text-secondary [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100"
               onClick={(event) => {
                 handleClear(event)
                 onChange(undefined)

web/app/components/base/form/components/base/base-field.tsx

@@ -300,7 +300,7 @@ const BaseField = ({
                     }
                   </SelectValue>
                 </SelectTrigger>
-                <SelectContent className="max-h-[320px] bg-components-panel-bg-blur">
+                <SelectContent className="max-h-80 bg-components-panel-bg-blur">
                   {memorizedOptions.map((option) => (
                     <SelectItem key={option.value} value={option.value}>
                       <SelectItemText>{option.label}</SelectItemText>
@@ -330,7 +330,7 @@ const BaseField = ({
                     }
                   </SelectValue>
                 </SelectTrigger>
-                <SelectContent className="max-h-[320px] bg-components-panel-bg-blur">
+                <SelectContent className="max-h-80 bg-components-panel-bg-blur">
                   {memorizedOptions.map((option) => (
                     <SelectItem key={option.value} value={option.value}>
                       <SelectItemText>{option.label}</SelectItemText>

web/app/components/base/form/components/field/input-type-select/index.tsx

@@ -45,7 +45,7 @@ const InputTypeSelectField = ({
         <SelectTrigger id={field.name} className="gap-x-0.5 px-2">
           <Trigger option={selected} />
         </SelectTrigger>
-        <SelectContent className="w-[368px] bg-components-panel-bg-blur shadow-shadow-shadow-5">
+        <SelectContent className="w-92 bg-components-panel-bg-blur shadow-shadow-shadow-5">
           {inputTypeOptions.map((option: FileTypeSelectOption) => (
             <SelectItem key={option.value} value={option.value} className="gap-x-1">
               <Option option={option} />

web/app/components/base/sort/index.tsx

@@ -51,7 +51,7 @@ function Sort({ order, value, items, onSelect }: Props) {
           <DropdownMenuContent
             placement="bottom-start"
             sideOffset={4}
-            className="relative w-[240px] rounded-xl bg-components-panel-bg-blur p-0"
+            className="relative w-60 rounded-xl bg-components-panel-bg-blur p-0"
           >
             <DropdownMenuRadioGroup
               value={value}

web/app/components/base/theme-selector.tsx

@@ -48,7 +48,7 @@ export default function ThemeSelector() {
           </IconButton>
         }
       />
-      <DropdownMenuContent placement="bottom-end" sideOffset={6} className="w-[144px]">
+      <DropdownMenuContent placement="bottom-end" sideOffset={6} className="w-36">
         <DropdownMenuRadioGroup<Theme>
           value={currentTheme}
           onValueChange={(nextTheme) => setTheme(nextTheme)}

web/app/components/billing/pricing/plans/cloud-plan-item/list/item/infotip.tsx

@@ -26,7 +26,7 @@ export function PlanFeatureInfotip({ label, content }: { label: string; content:
       />
       <PopoverContent
         placement="top-end"
-        className="w-[260px] rounded-none border-0 bg-saas-dify-blue-static px-5 py-[18px] system-xs-regular text-text-primary-on-surface shadow-none"
+        className="w-65 rounded-none border-0 bg-saas-dify-blue-static px-5 py-4.5 system-xs-regular text-text-primary-on-surface shadow-none"
       >
         <PopoverTitle className="sr-only">{label}</PopoverTitle>
         {content}

web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx

@@ -104,13 +104,10 @@ export function SelfHostedPlanItem({ plan }: { plan: SelfHostedPlan }) {
         <div className="flex grow flex-col justify-end gap-y-2 p-6 pt-0">
           <div className="flex items-center gap-x-1">
             <div className="flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs shadow-shadow-shadow-3">
-              <span aria-hidden className="i-custom-public-billing-azure h-5 w-[21px]" />
+              <span aria-hidden className="i-custom-public-billing-azure h-5 w-5.25" />
             </div>
             <div className="flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs shadow-shadow-shadow-3">
-              <span
-                aria-hidden
-                className="i-custom-public-billing-google-cloud h-[18px] w-[22px]"
-              />
+              <span aria-hidden className="i-custom-public-billing-google-cloud h-4.5 w-5.5" />
             </div>
           </div>
           <span className="system-xs-regular text-text-tertiary">

web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx

@@ -60,7 +60,7 @@ const Actions = ({
           </DropdownMenuTrigger>
           <DropdownMenuPortal>
             <DropdownMenuPositioner placement="bottom-end" sideOffset={4}>
-              <DropdownMenuPopup className="min-w-[160px]">
+              <DropdownMenuPopup className="min-w-40">
                 <Operations
                   openEditModal={openEditModal}
                   onExport={handleExportDSL}

web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx

@@ -230,7 +230,7 @@ const EmbeddingProcess = ({
                     >
                       <RiErrorWarningFill className="size-4 shrink-0 text-text-destructive" />
                     </PopoverTrigger>
-                    <PopoverContent className="max-w-60 rounded-xl border-[0.5px] border-components-panel-border px-4 py-[14px] body-xs-regular text-text-secondary">
+                    <PopoverContent className="max-w-60 rounded-xl border-[0.5px] border-components-panel-border px-4 py-3.5 body-xs-regular text-text-secondary">
                       {indexingStatusDetail.error}
                     </PopoverContent>
                   </Popover>

web/app/components/datasets/documents/detail/completed/components/menu-bar.tsx

@@ -72,7 +72,7 @@ function MenuBar({
         <SelectTrigger className="mr-2 w-25 shrink-0 shadow-none">
           {selectedStatus?.name ?? ''}
         </SelectTrigger>
-        <SelectContent className="w-[160px]">
+        <SelectContent className="w-40">
           {statusList.map((item) => (
             <SelectItem key={item.value} value={item.value}>
               <SelectItemText>{item.name}</SelectItemText>

web/app/components/datasets/documents/detail/segment-add/index.tsx

@@ -142,7 +142,7 @@ export function SegmentAdd({
         >
           <span aria-hidden className={cn('i-ri-arrow-down-s-line size-4', textColor)} />
         </DropdownMenuTrigger>
-        <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-[120px]">
+        <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-30">
           <DropdownMenuItem
             className="system-md-regular"
             onClick={() => openSegmentDialog(showBatchModal)}

web/app/components/datasets/settings/form/components/indexing-section.tsx

@@ -153,7 +153,7 @@ const IndexingSection = ({
       {/* Embedding Model */}
       {indexMethod === IndexingType.QUALIFIED && (
         <div className={rowClass}>
-          <div className="flex w-[180px] shrink-0 flex-col pt-1">
+          <div className="flex w-45 shrink-0 flex-col pt-1">
             <div className="system-sm-semibold text-text-secondary">
               {t(($) => $['form.embeddingModel'], { ns: 'datasetSettings' })}
             </div>

web/app/components/explore/item-operation/index.tsx

@@ -52,7 +52,7 @@ function ItemOperation({
           className="i-ri-more-fill size-4 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 group-focus-visible/operation:opacity-100 group-data-popup-open/operation:opacity-100"
         />
       </DropdownMenuTrigger>
-      <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-[120px]">
+      <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-30">
         <DropdownMenuItem
           className={cn(s.actionItem, 'gap-2 px-3')}
           onClick={(e) => {

web/app/components/header/account-dropdown/compliance.tsx

@@ -183,7 +183,7 @@ export default function Compliance() {
           label={t(($) => $['userProfile.compliance'], { ns: 'common' })}
         />
       </DropdownMenuSubTrigger>
-      <DropdownMenuSubContent className="w-[337px] divide-y divide-divider-subtle bg-components-panel-bg-blur! py-0! backdrop-blur-xs">
+      <DropdownMenuSubContent className="w-84.25 divide-y divide-divider-subtle bg-components-panel-bg-blur! py-0! backdrop-blur-xs">
         <DropdownMenuGroup className="py-1">
           <ComplianceDocRowItem
             icon={<Soc2 aria-hidden className="size-7 shrink-0" />}

web/app/components/header/account-dropdown/main-nav-menu-content.tsx

@@ -72,7 +72,7 @@ function AppearanceSubmenu() {
       <DropdownMenuSubContent
         placement="right-start"
         sideOffset={6}
-        className="max-h-[360px] w-[139px] bg-components-panel-bg-blur p-1 backdrop-blur-[5px]"
+        className="max-h-90 w-34.75 bg-components-panel-bg-blur p-1 backdrop-blur-[5px]"
       >
         <DropdownMenuRadioGroup<Theme>
           value={currentTheme}

web/app/components/header/account-setting/access-rules-page/access-rule-row-menu.tsx

@@ -85,7 +85,7 @@ const AccessRuleRowMenu = ({ rule, onView, onEdit }: AccessRuleRowMenuProps) =>
             </IconButton>
           }
         />
-        <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-[140px]">
+        <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-35">
           {isBuiltIn ? (
             <DropdownMenuItem
               className="system-sm-semibold text-text-secondary"

web/app/components/header/account-setting/data-source-page-new/operator.tsx

@@ -55,7 +55,7 @@ const Operator = ({
           </IconButton>
         }
       />
-      <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-[200px]">
+      <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-50">
         <DropdownMenuItem
           disabled={!canUseCredential}
           className="h-auto gap-2 py-2"

web/app/components/header/account-setting/members-page/member-menu.tsx

@@ -130,11 +130,7 @@ const MemberMenu = ({
             </IconButton>
           }
         />
-        <DropdownMenuContent
-          placement="bottom-end"
-          sideOffset={4}
-          className="min-w-[180px] rounded-xl"
-        >
+        <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-45 rounded-xl">
           {canAssignRoles && (
             <DropdownMenuItem
               className="system-sm-medium text-text-secondary"

web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx

@@ -347,7 +347,7 @@ function ModelSelectorPreviewCard({
   return (
     <PreviewCardContent
       placement="right"
-      className="w-[206px] bg-components-panel-bg-blur p-3 shadow-none backdrop-blur-xs"
+      className="w-51.5 bg-components-panel-bg-blur p-3 shadow-none backdrop-blur-xs"
     >
       <div className="flex flex-col gap-1">
         <div className="flex flex-col items-start gap-2">

web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx

@@ -61,7 +61,7 @@ const QuotaInfotip: FC<QuotaInfotipProps> = ({ tipText }) => {
       </PopoverTrigger>
       <PopoverContent
         placement="top"
-        className="max-w-[300px] rounded-md px-3 py-2 system-xs-regular text-text-tertiary"
+        className="max-w-75 rounded-md px-3 py-2 system-xs-regular text-text-tertiary"
       >
         {tipText}
       </PopoverContent>

web/app/components/header/account-setting/permissions-page/role-list/row-menu.tsx

@@ -120,7 +120,7 @@ const RowMenu = ({ roleCategory, role, onView, onEdit }: RowMenuProps) => {
             </IconButton>
           }
         />
-        <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-[160px]">
+        <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-40">
           {hasViewAction && (
             <DropdownMenuItem
               className="system-sm-semibold text-text-secondary"

web/app/components/main-nav/components/__tests__/workspace-card.spec.tsx

@@ -399,7 +399,6 @@ describe('WorkspaceCard', () => {
 
     const panel = await screen.findByRole('dialog', { name: 'Solar Studio' })
     expect(panel).toBeInTheDocument()
-    expect(panel).toHaveClass('w-[280px]')
     expect(
       within(panel).getByRole('button', { name: 'common.mainNav.workspace.settings' }),
     ).toBeInTheDocument()

web/app/components/main-nav/components/workspace-card.tsx

@@ -325,7 +325,7 @@ export function WorkspaceCard() {
           placement="bottom-start"
           sideOffset={-workspaceMenuTriggerHeight}
           alignOffset={workspaceMenuAlignOffset}
-          className="w-[280px] overflow-hidden bg-components-panel-bg-blur! p-0! backdrop-blur-[5px]"
+          className="w-70 overflow-hidden bg-components-panel-bg-blur! p-0! backdrop-blur-[5px]"
         >
           <WorkspaceMenuHeader
             name={currentWorkspace.name}

web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx

@@ -110,7 +110,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
               )}
             </div>
           </SelectTrigger>
-          <SelectContent className="w-[512px]">
+          <SelectContent className="w-lg">
             {versions.map((item) => (
               <SelectItem key={item.value} value={item.value}>
                 <SelectItemText>{item.name}</SelectItemText>
@@ -145,7 +145,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
               t(($) => $[`${i18nPrefix}.selectPackagePlaceholder`], { ns: 'plugin' }) ??
               ''}
           </SelectTrigger>
-          <SelectContent className="w-[512px]">
+          <SelectContent className="w-lg">
             {packages.map((item) => (
               <SelectItem key={item.value} value={item.value}>
                 <SelectItemText>{item.name}</SelectItemText>

web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx

@@ -88,7 +88,7 @@ const EndpointListContent = ({ declaration, detail }: EndpointListContentProps)
             />
             <PopoverContent
               placement="right"
-              className="w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4"
+              className="w-60 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4"
             >
               <div className="flex flex-col gap-2">
                 <div className="flex h-8 w-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle">

web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx

@@ -55,7 +55,7 @@ const TTSParamsPanel = ({ currentModel, language, voice, onChange }: Props) => {
           >
             <SelectValue />
           </SelectTrigger>
-          <SelectContent className="w-[354px]">
+          <SelectContent className="w-88.5">
             {supportedLanguages.map((item) => (
               <SelectItem key={item.value} value={item.value}>
                 <SelectItemText>{item.name}</SelectItemText>
@@ -82,7 +82,7 @@ const TTSParamsPanel = ({ currentModel, language, voice, onChange }: Props) => {
           >
             <SelectValue />
           </SelectTrigger>
-          <SelectContent className="w-[354px]">
+          <SelectContent className="w-88.5">
             {voiceList.map((item) => (
               <SelectItem key={item.value} value={item.value}>
                 <SelectItemText>{item.label}</SelectItemText>

web/app/components/plugins/plugin-page/nav-operations.tsx

@@ -97,7 +97,7 @@ export function SubmitRequestDropdown({ dividerAfterFirst }: SubmitRequestDropdo
           </IconButton>
         }
       />
-      <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-[200px] p-1">
+      <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-50 p-1">
         {options.map((option, index) => (
           <Fragment key={option.href}>
             {dividerAfterFirst && index === 1 && <DropdownMenuSeparator className="my-1" />}

web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx

@@ -46,7 +46,7 @@ function PluginTaskList({
         <ScrollAreaViewport
           aria-label={t(($) => $['task.installing'], { ns: 'plugin' })}
           style={{ overflowX: 'hidden' }}
-          className="max-h-[420px] overscroll-contain"
+          className="max-h-105 overscroll-contain"
           role="region"
         >
           <ScrollAreaContent style={{ minWidth: 0 }} className="w-full max-w-full pr-3">

web/app/components/plugins/update-plugin/plugin-version-picker.tsx

@@ -91,12 +91,12 @@ const PluginVersionPicker: FC<Props> = ({
         placement="bottom-start"
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        className="relative w-[209px] bg-components-panel-bg-blur p-1 backdrop-blur-[5px]"
+        className="relative w-52.25 bg-components-panel-bg-blur p-1 backdrop-blur-[5px]"
       >
         <div className="px-3 pt-1 pb-0.5 system-xs-medium-uppercase text-text-tertiary">
           {t(($) => $['detailPanel.switchVersion'], { ns: 'plugin' })}
         </div>
-        <div className="relative max-h-[224px] overflow-y-auto">
+        <div className="relative max-h-56 overflow-y-auto">
           {isLoading ? (
             <div
               role="status"

web/app/components/share/text-generation/menu-dropdown.tsx

@@ -61,11 +61,7 @@ const MenuDropdown: FC<Props> = ({ data, placement, hideLogout }) => {
             </IconButton>
           }
         />
-        <DropdownMenuContent
-          placement={placement || 'bottom-end'}
-          sideOffset={4}
-          className="w-[224px]"
-        >
+        <DropdownMenuContent placement={placement || 'bottom-end'} sideOffset={4} className="w-56">
           <div className="px-3 py-1.5 system-md-regular text-text-secondary">
             <div className="flex items-center gap-2">
               <div className="grow">{t(($) => $['theme.theme'], { ns: 'common' })}</div>

web/app/components/snippet-list/components/snippet-card.tsx

@@ -217,7 +217,7 @@ const SnippetCard = ({
                     <span aria-hidden className="i-ri-more-fill size-4 text-text-tertiary" />
                   </div>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent placement="bottom-end" sideOffset={4} className="w-[216px]">
+                <DropdownMenuContent placement="bottom-end" sideOffset={4} className="w-54">
                   {canCreateAndModifySnippet && (
                     <>
                       <DropdownMenuItem className="gap-2 px-3" onClick={handleOpenEditDialog}>

web/app/components/snippet-list/components/snippet-create-button.tsx

@@ -38,7 +38,7 @@ const SnippetCreateButton = () => {
         <PopoverContent
           placement="bottom-end"
           sideOffset={6}
-          className="w-[228px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs"
+          className="w-57 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-xs"
         >
           <PopoverTitle className="px-2 pt-2 pb-1 text-xs leading-4.5 font-medium text-text-tertiary">
             {t(($) => $.createFrom)}

web/app/components/snippet-list/components/snippet-publish-status-filter.tsx

@@ -58,7 +58,7 @@ const SnippetPublishStatusFilter = ({ value, onChange }: SnippetPublishStatusFil
         <span className="px-1 text-text-tertiary">{triggerLabel}</span>
         <span aria-hidden className="i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary" />
       </DropdownMenuTrigger>
-      <DropdownMenuContent placement="bottom-start" className="w-[220px]">
+      <DropdownMenuContent placement="bottom-start" className="w-55">
         <DropdownMenuRadioGroup<SnippetPublishStatus>
           value={value}
           onValueChange={(nextValue) => onChange(nextValue)}

web/app/components/tools/edit-custom-collection-modal/get-schema.tsx

@@ -51,7 +51,7 @@ const GetSchema: FC<Props> = ({ onChange }) => {
             {t(($) => $['createTool.importFromUrl'], { ns: 'tools' })}
           </span>
         </DropdownMenuTrigger>
-        <DropdownMenuContent placement="bottom-start" sideOffset={2} className="w-[300px] p-2">
+        <DropdownMenuContent placement="bottom-start" sideOffset={2} className="w-75 p-2">
           <div className="relative">
             <Input
               type="text"

web/app/components/tools/labels/filter.tsx

@@ -72,7 +72,7 @@ const LabelFilter: FC<LabelFilterProps> = ({ value, onChange }) => {
         <PopoverContent
           placement="bottom-start"
           sideOffset={4}
-          className="w-[240px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]"
+          className="w-60 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]"
         >
           <div className="relative">
             <div className="p-2">

web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx

@@ -98,14 +98,6 @@ describe('OperationDropdown', () => {
   })
 
   describe('Styling', () => {
-    it('should have correct dropdown width', () => {
-      render(<OperationDropdown {...defaultProps} />)
-
-      fireEvent.click(screen.getByRole('button', { name: 'common.operation.more' }))
-      const dropdown = document.querySelector('.w-\\[160px\\]')
-      expect(dropdown).toBeInTheDocument()
-    })
-
     it('should render dropdown content through the shared popup shell', () => {
       render(<OperationDropdown {...defaultProps} />)
 

web/app/components/tools/mcp/detail/operation-dropdown.tsx

@@ -34,7 +34,7 @@ const OperationDropdown: FC<Props> = ({ inCard, onOpenChange, onEdit, onRemove }
           </IconButton>
         }
       />
-      <DropdownMenuContent placement="bottom-end" sideOffset={4} className="w-[160px]">
+      <DropdownMenuContent placement="bottom-end" sideOffset={4} className="w-40">
         <DropdownMenuItem onClick={onEdit}>
           <span aria-hidden className="i-ri-edit-line size-4 shrink-0 text-text-tertiary" />
           <div className="ml-2 system-md-regular text-text-secondary">

web/app/components/tools/mcp/detail/tool-item.tsx

@@ -72,7 +72,7 @@ const MCPToolItem = ({ tool }: Props) => {
       />
       <PopoverContent
         placement="left"
-        className="w-[360px]! rounded-xl! border-[0.5px]! border-components-panel-border! px-4! py-3.5! shadow-lg!"
+        className="w-90! rounded-xl! border-[0.5px]! border-components-panel-border! px-4! py-3.5! shadow-lg!"
       >
         <div>
           <div className="mb-1 title-xs-semi-bold text-text-primary">{tool.label[language]}</div>

web/app/components/workflow/block-selector/marketplace-plugin/action.tsx

@@ -65,7 +65,7 @@ function OperationDropdown({ open, onOpenChange, author, name, version }: Props)
           </IconButton>
         }
       />
-      <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-[176px]">
+      <DropdownMenuContent placement="bottom-end" sideOffset={4} className="min-w-44">
         <DropdownMenuItem className="system-md-regular" onClick={handleDownload}>
           {t(($) => $['operation.download'], { ns: 'common' })}
         </DropdownMenuItem>

web/app/components/workflow/block-selector/preview-card.tsx

@@ -14,7 +14,7 @@ export function BlockSelectorPreviewCardContent({ children }: { children: ReactN
         placement="right"
         className="h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] duration-180 ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none motion-reduce:transition-none"
       >
-        <PreviewCardPopup className="relative h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] overflow-hidden rounded-xl bg-components-panel-bg shadow-lg transition-[width,height,transform,scale,opacity] duration-[180ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none motion-reduce:transition-none">
+        <PreviewCardPopup className="relative h-(--popup-height,auto) w-(--popup-width,auto) overflow-hidden rounded-xl bg-components-panel-bg shadow-lg transition-[width,height,transform,scale,opacity] duration-180 ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none motion-reduce:transition-none">
           <PreviewCardViewport
             className={cn(
               'relative h-full w-full overflow-clip',

web/app/components/workflow/block-selector/snippets/snippet-tags-filter.tsx

@@ -89,7 +89,7 @@ const SnippetTagsFilter = ({ embedded = false, value, onChange }: SnippetTagsFil
       <PopoverContent
         placement="bottom-end"
         sideOffset={6}
-        className="w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-0 shadow-lg backdrop-blur-xs"
+        className="w-60 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-0 shadow-lg backdrop-blur-xs"
       >
         <PopoverTitle className="sr-only">{triggerLabel}</PopoverTitle>
         <div className="p-2 pb-1">

web/app/components/workflow/header/checklist/index.tsx

@@ -88,7 +88,7 @@ const WorkflowChecklist = ({ disabled, showGoTo = true, onItemClick }: WorkflowC
         placement="bottom-start"
         sideOffset={12}
         alignOffset={-30}
-        className="w-[420px] rounded-2xl bg-background-default-subtle"
+        className="w-105 rounded-2xl bg-background-default-subtle"
       >
         <div className="overflow-y-auto" style={{ maxHeight: 'calc(2 / 3 * 100vh)' }}>
           <div className="flex flex-col gap-0.5 px-3 pt-3.5 pb-1">

web/app/components/workflow/header/test-run-menu.tsx

@@ -172,7 +172,7 @@ const TestRunMenu = forwardRef<TestRunMenuRef, TestRunMenuProps>(
           placement="bottom-start"
           sideOffset={8}
           alignOffset={-4}
-          className="w-[284px] p-1"
+          className="w-71 p-1"
         >
           <DropdownMenuGroup>
             <DropdownMenuLabel className="mb-1 px-3 pt-2 text-sm font-medium text-text-primary">

web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx

@@ -53,7 +53,7 @@ const ErrorHandleTypeSelector = ({ value, onSelected }: ErrorHandleTypeSelectorP
       <DropdownMenuContent
         placement="bottom-end"
         sideOffset={4}
-        className="w-[280px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
+        className="w-70 rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
       >
         <DropdownMenuRadioGroup value={value} onValueChange={onSelected}>
           {options.map((option) => (

web/app/components/workflow/nodes/_base/components/prompt/editor.tsx

@@ -193,7 +193,7 @@ const Editor: FC<Props> = ({
                       </button>
                     }
                   />
-                  <PopoverContent className="max-w-[300px] px-3 py-2 system-xs-regular text-text-tertiary">
+                  <PopoverContent className="max-w-75 px-3 py-2 system-xs-regular text-text-tertiary">
                     {titleTooltip}
                   </PopoverContent>
                 </Popover>

web/app/components/workflow/nodes/_base/components/variable/var-list.tsx

@@ -161,7 +161,7 @@ const VarList: FC<Props> = ({
           <div className={cn('flex items-center space-x-1', 'group relative')} key={index}>
             <Input
               aria-label={variableNameLabel}
-              className="w-[120px]"
+              className="w-30"
               disabled={readonly}
               value={variable.variable}
               onChange={handleVarNameChange(index)}

web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx

@@ -51,7 +51,7 @@ const VarReferencePicker: FC<Props> = ({ readonly, className, value, onChange })
         </SelectTrigger>
         <SelectPortal>
           <SelectPositioner sideOffset={4}>
-            <SelectPopup className="w-[120px] rounded-lg border-0 p-1 shadow-sm">
+            <SelectPopup className="w-30 rounded-lg border-0 p-1 shadow-sm">
               <SelectList className="p-0">
                 {TYPES.map((type) => (
                   <SelectItem<VarType>

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx

@@ -130,7 +130,7 @@ const KeyValueItem: FC<Props> = ({
             </SelectTrigger>
             <SelectPortal>
               <SelectPositioner>
-                <SelectPopup className="w-[80px]">
+                <SelectPopup className="w-20">
                   <SelectList className="min-w-0">
                     <SelectItem value="text">
                       <SelectItemText>text</SelectItemText>

web/app/components/workflow/nodes/human-input/components/variable-in-markdown.tsx

@@ -165,7 +165,7 @@ const SelectPreview: React.FC<{ label: string; options: string[] }> = ({ label,
         <SelectPortal>
           <SelectPositioner>
             <SelectPopup>
-              <SelectList className="max-h-[140px] overflow-y-auto">
+              <SelectList className="max-h-35 overflow-y-auto">
                 {options.map((option) => (
                   <SelectItem key={option} value={option}>
                     <SelectItemText>{option}</SelectItemText>

web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx

@@ -345,7 +345,7 @@ const ConditionItem = ({
                 </SelectTrigger>
                 <SelectPortal>
                   <SelectPositioner>
-                    <SelectPopup className="w-[165px]">
+                    <SelectPopup className="w-41.25">
                       <SelectList className="max-h-none p-1">
                         {subVarOptions.map((option) => (
                           <SelectItem

web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx

@@ -64,7 +64,7 @@ const ConditionNumberInput = ({
         <DropdownMenuContent
           placement="bottom-start"
           sideOffset={2}
-          className="w-[112px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
+          className="w-28 rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
         >
           <DropdownMenuRadioGroup value={numberVarType} onValueChange={onNumberVarTypeChange}>
             {options.map((option) => (

web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx

@@ -197,7 +197,7 @@ const ConditionWrap: FC<Props> = ({
                     </SelectTrigger>
                     <SelectPortal>
                       <SelectPositioner>
-                        <SelectPopup className="w-[165px]">
+                        <SelectPopup className="w-41.25">
                           <SelectList className="max-h-none p-1">
                             {subVarOptions.map((option) => (
                               <SelectItem key={option.value} value={option.value}>

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx

@@ -62,7 +62,7 @@ const MetadataFilterSelector = ({
       <DropdownMenuContent
         placement="bottom-end"
         sideOffset={4}
-        className="w-[280px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
+        className="w-70 rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
       >
         <DropdownMenuRadioGroup value={value} onValueChange={onSelect}>
           {options.map((option) => (

web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx

@@ -67,7 +67,7 @@ const SubVariablePicker: FC<Props> = ({ value, onChange, className }) => {
         </SelectTrigger>
         <SelectPortal>
           <SelectPositioner>
-            <SelectPopup className="w-[165px]">
+            <SelectPopup className="w-41.25">
               <SelectList className="max-h-none p-1">
                 {subVarOptions.map((option) => (
                   <SelectItem

web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx

@@ -266,7 +266,7 @@ const ConditionItem = ({
                 </SelectTrigger>
                 <SelectPortal>
                   <SelectPositioner>
-                    <SelectPopup className="w-[165px]">
+                    <SelectPopup className="w-41.25">
                       <SelectList className="max-h-none p-1">
                         {subVarOptions.map((option) => (
                           <SelectItem

web/app/components/workflow/nodes/loop/components/condition-number-input.tsx

@@ -64,7 +64,7 @@ const ConditionNumberInput = ({
         <DropdownMenuContent
           placement="bottom-start"
           sideOffset={2}
-          className="w-[112px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
+          className="w-28 rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
         >
           <DropdownMenuRadioGroup value={numberVarType} onValueChange={onNumberVarTypeChange}>
             {options.map((option) => (

web/app/components/workflow/nodes/loop/components/condition-wrap.tsx

@@ -150,7 +150,7 @@ const ConditionWrap: FC<Props> = ({
                 </SelectTrigger>
                 <SelectPortal>
                   <SelectPositioner>
-                    <SelectPopup className="w-[165px]">
+                    <SelectPopup className="w-41.25">
                       <SelectList className="max-h-none p-1">
                         {subVarOptions.map((option) => (
                           <SelectItem key={option.value} value={option.value}>

web/app/components/workflow/nodes/question-classifier/node.tsx

@@ -47,7 +47,7 @@ const TruncatedClassItem: FC<TruncatedClassItemProps> = ({ topic, index, nodeId,
           >
             {content}
           </PopoverTrigger>
-          <PopoverContent className="max-w-[300px] px-3 py-2 system-xs-regular wrap-break-word text-text-tertiary">
+          <PopoverContent className="max-w-75 px-3 py-2 system-xs-regular wrap-break-word text-text-tertiary">
             <ReadonlyInputWithSelectVar value={topic.name} nodeId={nodeId} />
           </PopoverContent>
         </Popover>

web/app/components/workflow/nodes/tool/components/tool-date-picker.tsx

@@ -94,7 +94,7 @@ const ToolDatePicker: FC<Props> = ({
             <button
               type="button"
               aria-label={t(($) => $['operation.clear'], { ns: 'common' })}
-              className="pointer-events-none absolute top-1/2 right-2 z-[1] flex size-4 -translate-y-1/2 items-center justify-center rounded border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg text-text-tertiary opacity-0 shadow-xs group-focus-within/date-trigger:pointer-events-auto group-focus-within/date-trigger:opacity-100 group-hover/date-trigger:pointer-events-auto group-hover/date-trigger:opacity-100 hover:bg-components-button-secondary-bg-hover hover:text-text-secondary [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100"
+              className="pointer-events-none absolute top-1/2 right-2 z-1 flex size-4 -translate-y-1/2 items-center justify-center rounded border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg text-text-tertiary opacity-0 shadow-xs group-focus-within/date-trigger:pointer-events-auto group-focus-within/date-trigger:opacity-100 group-hover/date-trigger:pointer-events-auto group-hover/date-trigger:opacity-100 hover:bg-components-button-secondary-bg-hover hover:text-text-secondary [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100"
               onClick={(event) => {
                 handleClear(event)
                 onChange('')

web/app/components/workflow/operator/more-actions.tsx

@@ -169,7 +169,7 @@ function MoreActions() {
             }
           />
         </TipPopup>
-        <DropdownMenuContent placement="right-end" className="min-w-[180px]">
+        <DropdownMenuContent placement="right-end" className="min-w-45">
           <div className="flex items-center gap-2 px-2 py-1 text-xs font-medium text-text-tertiary">
             <span aria-hidden className="i-ri-export-line size-3" />
             {t(($) => $['common.exportImage'], { ns: 'workflow' })}

web/app/components/workflow/panel-contextmenu.tsx

@@ -74,7 +74,7 @@ export function PanelContextmenu({ onClose }: { onClose: () => void }) {
   if (!isPanelContextMenu) return null
 
   return (
-    <ContextMenuContent className="w-[200px] rounded-lg" sideOffset={4}>
+    <ContextMenuContent className="w-50 rounded-lg" sideOffset={4}>
       <ContextMenuGroup>
         {canEditWorkflow && (
           <AddBlock

web/app/components/workflow/panel/version-history-panel/action-menu/index.tsx

@@ -44,7 +44,7 @@ const ActionMenu: FC<ActionMenuProps> = (props: ActionMenuProps) => {
       <DropdownMenuContent
         placement="bottom-end"
         sideOffset={4}
-        className="w-max max-w-[calc(100vw-24px)] min-w-[184px] shadow-shadow-shadow-5"
+        className="w-max max-w-[calc(100vw-24px)] min-w-46 shadow-shadow-shadow-5"
       >
         {options.map((option) => (
           <ActionMenuItem

web/app/components/workflow/panel/version-history-panel/version-history-item.tsx

@@ -100,7 +100,7 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
           className="pointer-events-none absolute top-6 left-4 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle"
         />
       )}
-      <div className="pointer-events-none relative z-[1] flex h-5 w-4.5 shrink-0 items-center justify-center">
+      <div className="pointer-events-none relative z-1 flex h-5 w-4.5 shrink-0 items-center justify-center">
         <div
           aria-hidden
           className={cn(
@@ -109,7 +109,7 @@ const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({
           )}
         />
       </div>
-      <div className="pointer-events-none relative z-[1] flex grow flex-col gap-y-0.5 overflow-hidden">
+      <div className="pointer-events-none relative z-1 flex grow flex-col gap-y-0.5 overflow-hidden">
         <div className="mr-6 flex h-5 items-center gap-x-1">
           <div
             id={titleId}

web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx

@@ -35,7 +35,7 @@ const AgentLogNavMore = ({ options, onShowAgentOrToolLog }: AgentLogNavMoreProps
         placement="bottom-start"
         sideOffset={2}
         alignOffset={-54}
-        className="w-[136px] p-1"
+        className="w-34 p-1"
       >
         {options.map((option) => (
           <DropdownMenuItem

web/app/components/workflow/selection-contextmenu.tsx

@@ -398,7 +398,7 @@ export function SelectionContextmenu({ onClose }: { onClose: () => void }) {
 
   return (
     <>
-      <ContextMenuContent className="w-[240px]" sideOffset={4}>
+      <ContextMenuContent className="w-60" sideOffset={4}>
         {canCreateSnippet && (
           <>
             <ContextMenuGroup>

web/app/components/workflow/workflow-preview/components/nodes/base.tsx

@@ -81,7 +81,7 @@ const BaseCard = ({ id, data, children }: NodeCardProps) => {
                 >
                   {t(($) => $['nodes.iteration.parallelModeUpper'], { ns: 'workflow' })}
                 </PopoverTrigger>
-                <PopoverContent className="w-[180px] px-3 py-2 system-xs-regular text-text-tertiary">
+                <PopoverContent className="w-45 px-3 py-2 system-xs-regular text-text-tertiary">
                   <div className="font-extrabold">
                     {t(($) => $['nodes.iteration.parallelModeEnableTitle'], { ns: 'workflow' })}
                   </div>

web/app/signin/_locale-menu.tsx

@@ -43,7 +43,7 @@ export default function LocaleMenu<T extends string>({
             </DropdownMenuTrigger>
           </div>
         </div>
-        <DropdownMenuContent placement="bottom-end" sideOffset={8} className="w-[200px]">
+        <DropdownMenuContent placement="bottom-end" sideOffset={8} className="w-50">
           <DropdownMenuRadioGroup<T>
             value={value}
             onValueChange={(nextValue) => onChange?.(nextValue)}

web/app/signin/components/mail-and-password-auth.tsx

@@ -156,7 +156,7 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup }: MailAndP
         </InputGroup>
         <Link
           href={`/reset-password?${searchParams.toString()}`}
-          className={`absolute end-0 top-1 rounded-sm system-xs-regular outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid ${isEmailSetup ? 'text-components-button-secondary-accent-text' : 'pointer-events-none text-components-button-secondary-accent-text-disabled'}`}
+          className={`absolute inset-e-0 top-1 rounded-sm system-xs-regular outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid ${isEmailSetup ? 'text-components-button-secondary-accent-text' : 'pointer-events-none text-components-button-secondary-accent-text-disabled'}`}
           tabIndex={isEmailSetup ? 0 : -1}
           aria-disabled={!isEmailSetup}
         >

web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/index.tsx

@@ -175,7 +175,7 @@ function WorkspaceSkillPreview({ skill }: { skill?: SkillResponse }) {
   }
 
   return (
-    <div className="flex max-h-[428px] flex-col gap-2 overflow-y-auto px-3 pt-3 pb-4">
+    <div className="flex max-h-107 flex-col gap-2 overflow-y-auto px-3 pt-3 pb-4">
       <div className="flex min-w-0 flex-col items-start gap-1">
         <WorkspaceSkillIcon />
         <div className="min-w-0 flex-1">
@@ -269,7 +269,7 @@ function WorkspaceSkillSelector({
   )
 
   return (
-    <div ref={selectorRef} className="relative h-[520px] w-[320px]">
+    <div ref={selectorRef} className="relative h-130 w-[320px]">
       <div className="flex h-full w-full flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg backdrop-blur-[5px]">
         <div className="border-b border-divider-subtle p-2">
           <div className="relative">
@@ -338,7 +338,7 @@ function WorkspaceSkillSelector({
           <span aria-hidden className="i-ri-arrow-right-up-line size-3" />
         </Link>
       </div>
-      <div className="absolute top-[52px] left-[-244px] w-[240px] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
+      <div className="absolute top-13 -left-61 w-60 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]">
         <WorkspaceSkillPreview skill={previewSkill} />
       </div>
     </div>
@@ -735,7 +735,7 @@ export function AgentSkills() {
                 sideOffset={4}
                 className={
                   addMenuView === 'menu'
-                    ? 'w-[280px] bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]'
+                    ? 'w-70 bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]'
                     : 'w-[320px] overflow-visible border-none bg-transparent p-0 shadow-none'
                 }
               >

web/features/agent-v2/agent-detail/configure/components/orchestrate/tools/index.tsx

@@ -344,8 +344,8 @@ function AddToolMenu({
         sideOffset={4}
         className={
           view === 'menu'
-            ? 'w-[280px] bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]'
-            : 'w-[400px] overflow-hidden border-none bg-transparent p-0 shadow-none'
+            ? 'w-70 bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]'
+            : 'w-100 overflow-hidden border-none bg-transparent p-0 shadow-none'
         }
       >
         {view === 'menu' ? (

web/features/agent-v2/agent-detail/configure/components/preview/build-chat.tsx

@@ -60,7 +60,7 @@ function AgentBuildChatEmptyState({
         <CommunityEditionTip
           tip={communityEditionBuildModeTip}
           placement="top"
-          className="max-w-[340px]"
+          className="max-w-85"
         />
       </div>
       <p className="mt-1 max-w-full body-md-regular text-text-tertiary">

web/features/agent-v2/agent-detail/configure/components/preview/header.tsx

@@ -98,7 +98,7 @@ function PreviewModeItem({
       <PopoverContent
         placement="bottom"
         sideOffset={6}
-        className="max-w-[260px] rounded-md bg-components-tooltip-bg px-3 py-2 system-xs-regular text-text-tertiary shadow-lg"
+        className="max-w-65 rounded-md bg-components-tooltip-bg px-3 py-2 system-xs-regular text-text-tertiary shadow-lg"
       >
         {disabledTip}
       </PopoverContent>

web/features/agent-v2/agent-detail/configure/components/preview/working-directory-breadcrumb.tsx

@@ -154,7 +154,7 @@ export function AgentWorkingDirectoryBreadcrumb({
                     <DropdownMenuContent
                       placement="bottom-start"
                       sideOffset={4}
-                      className="w-[136px] p-1"
+                      className="w-34 p-1"
                     >
                       {hiddenItems.map((hiddenItem) => (
                         <DropdownMenuItem

web/features/new-rag/components/knowledge-view-switcher.tsx

@@ -69,7 +69,7 @@ export function KnowledgeViewSwitcher({ value, onChange }: KnowledgeViewSwitcher
         <PopoverContent
           placement="bottom"
           sideOffset={13}
-          className="relative flex max-h-[calc(100dvh-2rem)] min-h-[162px] w-80 max-w-[calc(100vw-2rem)] flex-col"
+          className="relative flex max-h-[calc(100dvh-2rem)] min-h-40.5 w-80 max-w-[calc(100vw-2rem)] flex-col"
         >
           <span
             aria-hidden

web/features/skills/__tests__/detail-page.spec.tsx

@@ -1302,7 +1302,6 @@ describe('SkillDetailPage', () => {
     const openBuilderButton = screen.getByRole('button', {
       name: 'skill.skillManagement.detail.builder.open',
     })
-    expect(openBuilderButton).toHaveClass('h-8', 'w-[133px]')
     expect(openBuilderButton.closest('main')).toBeInTheDocument()
 
     await user.click(openBuilderButton)

web/features/skills/detail/builder-panel.tsx

@@ -195,7 +195,7 @@ function SkillBuilderThinkingMessage({
           {reasoning ? (
             <Markdown
               content={reasoning}
-              className="text-[12px]! leading-[18px]! [&_p]:my-0 [&_p]:text-[12px]! [&_p]:leading-[18px]!"
+              className="text-[12px]! leading-4.5! [&_p]:my-0 [&_p]:text-[12px]! [&_p]:leading-4.5!"
             />
           ) : visibleProgressStages.length ? (
             <ol className="flex flex-col gap-1">
@@ -211,7 +211,7 @@ function SkillBuilderThinkingMessage({
           ) : (
             <Markdown
               content={t(($) => $['skillManagement.detail.builder.thinkingUnavailable'])}
-              className="text-[12px]! leading-[18px]! [&_p]:my-0 [&_p]:text-[12px]! [&_p]:leading-[18px]!"
+              className="text-[12px]! leading-4.5! [&_p]:my-0 [&_p]:text-[12px]! [&_p]:leading-4.5!"
             />
           )}
         </div>
@@ -268,7 +268,7 @@ const skillBuilderEmptyIconCells = skillBuilderEmptyIconCellOpacities.map((opaci
 
 function SkillBuilderEmptyIcon() {
   return (
-    <div className="dify-blue-glass-surface relative flex h-[50px] w-12 items-center justify-center rounded-xl p-2 shadow-lg backdrop-blur-[5px]">
+    <div className="dify-blue-glass-surface relative flex h-12.5 w-12 items-center justify-center rounded-xl p-2 shadow-lg backdrop-blur-[5px]">
       <div
         aria-hidden
         className="absolute inset-x-px inset-y-0.5 grid grid-cols-[repeat(8,4px)] grid-rows-[repeat(8,4px)] gap-0.5 opacity-25"
@@ -804,18 +804,18 @@ export function SkillBuilderPanel({
   }
 
   return (
-    <aside className="relative my-1 mr-1 flex w-[396px] shrink-0 flex-col overflow-hidden rounded-lg inset-ring-[0.5px] inset-ring-divider-subtle">
+    <aside className="relative my-1 mr-1 flex w-99 shrink-0 flex-col overflow-hidden rounded-lg inset-ring-[0.5px] inset-ring-divider-subtle">
       <div
         aria-hidden
         className="pointer-events-none absolute inset-0 z-0 bg-linear-to-b from-background-gradient-bg-fill-chat-bg-1 to-background-gradient-bg-fill-chat-bg-2"
       />
       <SkillBuilderGridTexture
         aria-hidden
-        className="pointer-events-none absolute top-0 left-0 z-[2]"
+        className="pointer-events-none absolute top-0 left-0 z-2"
       />
       <SkillBuilderGridTexture
         aria-hidden
-        className="pointer-events-none absolute bottom-0 left-0 z-[1] origin-center scale-y-[-1]"
+        className="pointer-events-none absolute bottom-0 left-0 z-1 origin-center scale-y-[-1]"
       />
       <div className="relative z-10 flex h-12 shrink-0 items-center justify-between gap-2 pr-3 pl-4">
         <h2 className="system-xs-semibold-uppercase text-text-secondary">
@@ -830,7 +830,7 @@ export function SkillBuilderPanel({
           >
             <span aria-hidden className="i-ri-restart-line size-4" />
           </button>
-          <span aria-hidden className="flex h-8 w-[9px] items-center justify-center">
+          <span aria-hidden className="flex h-8 w-2.25 items-center justify-center">
             <span className="h-3.5 w-px bg-divider-subtle" />
           </span>
           <button
@@ -851,7 +851,7 @@ export function SkillBuilderPanel({
       >
         <div
           className={cn(
-            'min-h-0 scrollbar-thin overflow-y-auto px-4 pt-4 pb-[11px]',
+            'min-h-0 scrollbar-thin overflow-y-auto px-4 pt-4 pb-2.75',
             messages.length > 0 ? 'flex-1' : 'shrink-0',
           )}
         >
@@ -861,7 +861,7 @@ export function SkillBuilderPanel({
                 message.role === 'user' ? (
                   <div
                     key={message.id}
-                    className="flex w-full max-w-[720px] flex-col items-end gap-1 self-end pl-8"
+                    className="flex w-full max-w-180 flex-col items-end gap-1 self-end pl-8"
                   >
                     {!!message.attachments?.length && (
                       <SkillBuilderMessageAttachments attachments={message.attachments} />
@@ -869,7 +869,7 @@ export function SkillBuilderPanel({
                     <div className="flex max-w-72 flex-col items-end rounded-2xl bg-background-default-dimmed px-2 py-2">
                       <Markdown
                         content={message.content}
-                        className="px-2 py-1 text-[14px]! leading-[20px]! tracking-[-0.07px] [&_p]:my-0 [&_p]:text-[14px]! [&_p]:leading-[20px]!"
+                        className="px-2 py-1 text-[14px]! leading-5! tracking-[-0.07px] [&_p]:my-0 [&_p]:text-[14px]! [&_p]:leading-5!"
                       />
                     </div>
                     <div aria-hidden className="h-4 w-full" />
@@ -878,7 +878,7 @@ export function SkillBuilderPanel({
                   <div
                     key={message.id}
                     className={cn(
-                      'flex w-full max-w-[720px] flex-col items-start gap-1 text-text-secondary',
+                      'flex w-full max-w-180 flex-col items-start gap-1 text-text-secondary',
                       message.tone === 'error' &&
                         'rounded-xl border border-state-destructive-border bg-state-destructive-hover px-3 py-2 text-text-destructive',
                     )}
@@ -898,7 +898,7 @@ export function SkillBuilderPanel({
                       <>
                         <Markdown
                           content={message.content}
-                          className="px-1 text-[14px]! leading-[20px]! tracking-[-0.07px] [&_p]:my-0 [&_p]:text-[14px]! [&_p]:leading-[20px]! [&_p+p]:mt-2"
+                          className="px-1 text-[14px]! leading-5! tracking-[-0.07px] [&_p]:my-0 [&_p]:text-[14px]! [&_p]:leading-5! [&_p+p]:mt-2"
                         />
                         <div className="mt-1 flex h-7 items-center gap-0.5 px-0.5 text-text-tertiary">
                           <button
@@ -1004,7 +1004,7 @@ export function SkillBuilderPanel({
           className={cn(
             'relative flex shrink-0 items-end justify-end px-4 pt-3 pb-4',
             messages.length > 0 &&
-              'bg-gradient-to-b from-components-chat-input-bg-mask-1 to-components-chat-input-bg-mask-2',
+              'bg-linear-to-b from-components-chat-input-bg-mask-1 to-components-chat-input-bg-mask-2',
           )}
         >
           <div className="flex w-full flex-col items-end justify-end">
@@ -1048,7 +1048,7 @@ export function SkillBuilderPanel({
               <textarea
                 value={prompt}
                 rows={1}
-                className="[field-sizing:content] max-h-40 min-h-6 w-full resize-none bg-transparent px-0 py-0 body-md-regular text-text-secondary outline-hidden placeholder:text-text-quaternary"
+                className="field-sizing-content max-h-40 min-h-6 w-full resize-none bg-transparent px-0 py-0 body-md-regular text-text-secondary outline-hidden placeholder:text-text-quaternary"
                 placeholder={inputPlaceholder}
                 disabled={isSending}
                 onChange={(event) => setPrompt(event.target.value)}