diff --git a/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx b/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx index be9b47915189..4a50c7023b43 100644 --- a/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx @@ -5,17 +5,21 @@ import { Popover, PopoverTrigger, PopoverContent, + Flex, + theme, } from "@webstudio-is/design-system"; import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine"; +import { propertyDescriptions } from "@webstudio-is/css-data"; import { CssValueInput, type IntermediateStyleValue, } from "../../shared/css-value-input"; import { createBatchUpdate } from "../../shared/use-style-data"; -import { theme } from "@webstudio-is/design-system"; import type { StyleValueSourceColor } from "~/shared/style-object-model"; import { $availableUnitVariables } from "../../shared/model"; import type { Modifiers } from "../../shared/modifier-keys"; +import { PropertyLabel } from "../../property-label"; +import { humanizeString } from "~/shared/string-utils"; const slideUpAndFade = keyframes({ "0%": { opacity: 0, transform: "scale(0.8)" }, @@ -120,9 +124,10 @@ const Input = ({ const Trigger = styled("div", { position: "absolute", width: 0, height: 0 }); const PopoverContentStyled = styled(PopoverContent, { + flexDirection: "row", + gap: theme.spacing[5], minWidth: 0, minHeight: 0, - width: theme.spacing[20], border: `1px solid ${theme.colors.borderMain}`, borderRadius: theme.borderRadius[7], background: theme.colors.backgroundPanel, @@ -166,13 +171,20 @@ export const InputPopover = ({ // and closing popover before applying changes onClick={(event) => event.stopPropagation()} > - + + + );