Skip to content

fix: implement 7 UI fixes for editor interface (#2488) #2489

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

fix: implement 7 UI fixes for editor interface (#2488) #2489

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
da0f24c
fix: implement 7 UI fixes for editor interface
devin-ai-integration[bot] Jul 19, 2025
f105a5d
feat: add custom increments to padding/margin sliders and fix flexbox…
devin-ai-integration[bot] Jul 19, 2025
b07006e
fix: use consolidated CSS properties for better Tailwind class genera…
devin-ai-integration[bot] Jul 19, 2025
8c96e6c
Fixed arrow in the wrong spot
drfarrell Jul 31, 2025
1e24a9c
fix: resolve slider sync and tooltip arrow issues
devin-ai-integration[bot] Jul 31, 2025
1453c98
fix: improve slider synchronization with immediate state updates
devin-ai-integration[bot] Jul 31, 2025
2fbbbe7
fix: resolve slider synchronization and race condition issues
devin-ai-integration[bot] Jul 31, 2025
1989282
fix: remove debouncing for instant slider synchronization
devin-ai-integration[bot] Jul 31, 2025
d88850b
fix: resolve CI failure and slider jumping behavior
devin-ai-integration[bot] Jul 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/border.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useState } from 'react';
import { useBoxControl } from '../hooks/use-box-control';
import { useDropdownControl } from '../hooks/use-dropdown-manager';
import { HoverOnlyTooltip } from '../hover-tooltip';
import { InputRange } from '../inputs/input-range';
import { InputRange, STANDARD_INCREMENTS } from '../inputs/input-range';
import { SpacingInputs } from '../inputs/spacing-inputs';
import { ToolbarButton } from '../toolbar-button';

Expand All @@ -33,11 +33,11 @@ export const Border = observer(() => {
<DropdownMenuTrigger asChild>
<ToolbarButton
isOpen={isOpen}
className="flex items-center gap-1 min-w-10"
className={`flex items-center gap-1 min-w-10 ${borderExists ? 'text-foreground-primary' : ''}`}
>
<Icons.BorderEdit className="h-4 w-4 min-h-4 min-w-4" />
<Icons.BorderEdit className={`h-4 w-4 min-h-4 min-w-4 ${borderExists ? 'text-foreground-primary' : ''}`} />
{borderExists && (
<span className="text-xs">
<span className="text-xs text-foreground-primary">
{boxState.borderWidth.unit === 'px'
? boxState.borderWidth.num
: boxState.borderWidth.value}
Expand Down Expand Up @@ -77,6 +77,7 @@ export const Border = observer(() => {
onChange={(value) => handleBoxChange('borderWidth', value.toString())}
unit={boxState.borderWidth.unit}
onUnitChange={(unit) => handleUnitChange('borderWidth', unit)}
customIncrements={STANDARD_INCREMENTS}
/>
) : (
<SpacingInputs
Expand Down
4 changes: 2 additions & 2 deletions apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/display/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ export const Display = observer(() => {
</ToolbarButton>
</DropdownMenuTrigger>
</HoverOnlyTooltip>
<DropdownMenuContent align="start" className="min-w-[200px] mt-2 p-1.5 rounded-lg">
<div className="p-2 space-y-2.5">
<DropdownMenuContent align="start" className="min-w-[240px] mt-2 p-1.5 rounded-lg">
<div className="space-y-2 px-4 py-4">
<TypeInput />
<DirectionInput />
<VerticalAlignInput />
Expand Down
9 changes: 5 additions & 4 deletions apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/margin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { useCallback, useMemo, useState } from "react";
import { useBoxControl } from "../hooks/use-box-control";
import { useDropdownControl } from "../hooks/use-dropdown-manager";
import { HoverOnlyTooltip } from "../hover-tooltip";
import { InputRange } from "../inputs/input-range";
import { InputRange, STANDARD_INCREMENTS } from "../inputs/input-range";
import { SpacingInputs } from "../inputs/spacing-inputs";
import { ToolbarButton } from "../toolbar-button";

Expand Down Expand Up @@ -153,11 +153,11 @@ export const Margin = observer(() => {
<DropdownMenuTrigger asChild>
<ToolbarButton
isOpen={isOpen}
className="gap-1 flex items-center min-w-10"
className={`gap-1 flex items-center min-w-10 ${marginValue ? 'text-foreground-primary' : ''}`}
>
<MarginIcon className="h-4 min-h-4 w-4 min-w-4" />
<MarginIcon className={`h-4 min-h-4 w-4 min-w-4 ${marginValue ? 'text-foreground-primary' : ''}`} />
{marginValue && (
<span className="text-small data-[state=open]:text-white">{marginValue}</span>
<span className="text-small text-foreground-primary data-[state=open]:text-white">{marginValue}</span>
)}
</ToolbarButton>
</DropdownMenuTrigger>
Expand Down Expand Up @@ -192,6 +192,7 @@ export const Margin = observer(() => {
onChange={(value) => handleBoxChange('margin', value.toString())}
unit={boxState.margin.unit}
onUnitChange={(unit) => handleUnitChange('margin', unit)}
customIncrements={STANDARD_INCREMENTS}
/>
) : (
<SpacingInputs
Expand Down
9 changes: 5 additions & 4 deletions apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/padding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { useMemo, useState } from "react";
import { useBoxControl } from "../hooks/use-box-control";
import { useDropdownControl } from "../hooks/use-dropdown-manager";
import { HoverOnlyTooltip } from "../hover-tooltip";
import { InputRange } from "../inputs/input-range";
import { InputRange, STANDARD_INCREMENTS } from "../inputs/input-range";
import { SpacingInputs } from "../inputs/spacing-inputs";
import { ToolbarButton } from "../toolbar-button";

Expand Down Expand Up @@ -128,11 +128,11 @@ export const Padding = observer(() => {
<DropdownMenuTrigger asChild>
<ToolbarButton
isOpen={isOpen}
className="gap-1 flex items-center min-w-10"
className={`gap-1 flex items-center min-w-10 ${paddingValue ? 'text-foreground-primary' : ''}`}
>
<PaddingIcon className="h-4 min-h-4 w-4 min-w-4" />
<PaddingIcon className={`h-4 min-h-4 w-4 min-w-4 ${paddingValue ? 'text-foreground-primary' : ''}`} />
{paddingValue && (
<span className="text-small data-[state=open]:text-white">{paddingValue}</span>
<span className="text-small text-foreground-primary data-[state=open]:text-white">{paddingValue}</span>
)}
</ToolbarButton>
</DropdownMenuTrigger>
Expand Down Expand Up @@ -164,6 +164,7 @@ export const Padding = observer(() => {
onChange={(value) => handleBoxChange('padding', value.toString())}
unit={boxState.padding.unit}
onUnitChange={(unit) => handleUnitChange('padding', unit)}
customIncrements={STANDARD_INCREMENTS}
/>
) : (
<SpacingInputs
Expand Down
10 changes: 6 additions & 4 deletions apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/radius.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { useState } from "react";
import { useBoxControl } from "../hooks/use-box-control";
import { useDropdownControl } from "../hooks/use-dropdown-manager";
import { HoverOnlyTooltip } from "../hover-tooltip";
import { InputRange } from "../inputs/input-range";
import { InputRange, STANDARD_INCREMENTS } from "../inputs/input-range";
import { SpacingInputs } from "../inputs/spacing-inputs";
import { ToolbarButton } from "../toolbar-button";

Expand Down Expand Up @@ -106,11 +106,11 @@ export const Radius = observer(() => {
<DropdownMenuTrigger asChild>
<ToolbarButton
isOpen={isOpen}
className="gap-1 flex items-center min-w-10"
className={`gap-1 flex items-center min-w-10 ${radiusValue ? 'text-foreground-primary' : ''}`}
>
<RadiusIcon className="h-4 min-h-4 w-4 min-w-4" />
<RadiusIcon className={`h-4 min-h-4 w-4 min-w-4 ${radiusValue ? 'text-foreground-primary' : ''}`} />
{radiusValue && (
<span className="text-small data-[state=open]:text-white">{radiusValue}</span>
<span className="text-small text-foreground-primary data-[state=open]:text-white">{radiusValue}</span>
)}
</ToolbarButton>
</DropdownMenuTrigger>
Expand Down Expand Up @@ -142,6 +142,8 @@ export const Radius = observer(() => {
onChange={(value) => handleBoxChange('borderRadius', value.toString())}
unit={boxState.borderRadius.unit}
onUnitChange={(unit) => handleUnitChange('borderRadius', unit)}
customIncrements={STANDARD_INCREMENTS}
useTailwindClasses={true}
/>
) : (
<SpacingInputs
Expand Down
52 changes: 33 additions & 19 deletions apps/web/client/src/app/project/[id]/_components/editor-bar/hooks/use-box-control.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,25 +179,29 @@ export const useBoxControl = (type: BoxType) => {
if (!currentState) return;

const cssValue = parsedValue ? `${parsedValue}${currentState.unit}` : '';
const updates = new Map<CSSBoxProperty, string>();

updates.set(property, cssValue);

if (type === 'radius' && property === 'borderRadius') {
CORNERS_RADIUS.forEach((corner) => {
updates.set(`border${corner}` as CSSBoxProperty, cssValue);
});
} else if (type === 'border' && property === 'borderWidth') {
SIDES.forEach((side) => {
updates.set(`border${side}Width` as CSSBoxProperty, cssValue);
});
} else if ((type === 'margin' || type === 'padding') && property === type) {
SIDES.forEach((side) => {
updates.set(`${type}${side}` as CSSBoxProperty, cssValue);
});
}

editorEngine.style.updateMultiple(Object.fromEntries(updates));

// Update local state immediately for instant UI feedback
setBoxState(prevState => ({
...prevState,
[property]: {
...currentState,
num: parsedValue ? Number(parsedValue) : undefined,
value: cssValue || '--'
}
}));

// Update CSS with slight delay to batch updates
setTimeout(() => {
if (type === 'radius' && property === 'borderRadius') {
editorEngine.style.update('borderRadius', cssValue);
} else if (type === 'border' && property === 'borderWidth') {
editorEngine.style.update('borderWidth', cssValue);
} else if ((type === 'margin' || type === 'padding') && property === type) {
editorEngine.style.update(property, cssValue);
} else {
editorEngine.style.update(property, cssValue);
}
}, 50);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using setTimeout with a fixed 50ms delay risks race conditions when rapid updates occur. The callback captures a potentially stale 'currentState'. Consider a debounced or cancelable approach to ensure CSS updates use the latest state.

}, [boxState, editorEngine.style, type]);

const handleUnitChange = useCallback((property: CSSBoxProperty, unit: string) => {
Expand All @@ -222,6 +226,16 @@ export const useBoxControl = (type: BoxType) => {

const newValue = `${value}${currentState.unit}`;

// Update local state immediately
setBoxState(prevState => ({
...prevState,
[property]: {
...currentState,
num: value,
value: newValue
}
}));

// Update CSS
editorEngine.style.update(property, newValue);

Expand Down
52 changes: 44 additions & 8 deletions apps/web/client/src/app/project/[id]/_components/editor-bar/inputs/input-range.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,46 @@ interface InputRangeProps {
unit?: string;
onChange?: (value: number) => void;
onUnitChange?: (unit: string) => void;
customIncrements?: number[];
useTailwindClasses?: boolean;
}

export const STANDARD_INCREMENTS = [0, 0.25, 0.5, 0.75, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];

const TAILWIND_RADIUS_MAP: Record<number, string> = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TAILWIND_RADIUS_MAP is defined but not used; implement mapping logic when useTailwindClasses is true.

2: 'rounded-xs',
4: 'rounded-sm',
6: 'rounded-md',
8: 'rounded-lg',
12: 'rounded-xl',
16: 'rounded-2xl',
};

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

InputRange now supports customIncrements and snapping, which is good. Note that the useTailwindClasses prop is accepted but TAILWIND_RADIUS_MAP isn’t used; if the intent is to map certain values to Tailwind classes, additional logic is needed.

export const InputRange = ({
value,
icon,
unit = 'px',
onChange,
onUnitChange,
customIncrements,
useTailwindClasses = false,
}: InputRangeProps) => {
const [localValue, setLocalValue] = useState(String(value));
const rangeRef = useRef<HTMLInputElement>(null);
const [isDragging, setIsDragging] = useState(false);

// Create debounced onChange handler
// Create debounced onChange handler for CSS updates
const debouncedOnChange = useMemo(
() => debounce((newValue: number) => {
onChange?.(newValue);
}, 500),
}, 300),
[onChange]
);

const immediateOnChange = useMemo(
() => (newValue: number) => {
onChange?.(newValue);
},
[onChange]
);

Expand Down Expand Up @@ -88,13 +110,23 @@ export const InputRange = ({
}
};

const findClosestIncrement = (targetValue: number): number => {
if (!customIncrements) return targetValue;

return customIncrements.reduce((closest, current) => {
return Math.abs(current - targetValue) < Math.abs(closest - targetValue) ? current : closest;
});
};

const handleMouseMove = (e: MouseEvent) => {
if (isDragging && rangeRef.current) {
const rect = rangeRef.current.getBoundingClientRect();
const percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
const newValue = Math.round(percentage * 500);
const maxValue = customIncrements ? Math.max(...customIncrements) : 500;
const rawValue = percentage * maxValue;
const newValue = customIncrements ? findClosestIncrement(rawValue) : Math.round(rawValue);
setLocalValue(String(newValue));
debouncedOnChange(newValue);
immediateOnChange(newValue);
}
};

Expand All @@ -104,19 +136,23 @@ export const InputRange = ({
document.removeEventListener('mouseup', handleMouseUp);
};

const maxValue = customIncrements ? Math.max(...customIncrements) : 500;
const currentValue = customIncrements ? findClosestIncrement(Number(localValue)) : Number(localValue);

return (
<div className="flex items-center gap-2">
<div className="flex-1 flex items-center gap-2">
<input
ref={rangeRef}
type="range"
min="0"
max="500"
value={Number(localValue)}
max={maxValue}
value={currentValue}
onChange={(e) => {
const newValue = Number(e.target.value);
const rawValue = Number(e.target.value);
const newValue = customIncrements ? findClosestIncrement(rawValue) : rawValue;
setLocalValue(String(newValue));
debouncedOnChange(newValue);
immediateOnChange(newValue);
}}
onMouseDown={handleMouseDown}
className="flex-1 h-3 bg-background-tertiary/50 rounded-full appearance-none cursor-pointer relative
Expand Down
2 changes: 0 additions & 2 deletions apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/history.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { Icons } from '@onlook/ui/icons';
import { Popover, PopoverAnchor, PopoverContent } from '@onlook/ui/popover';
import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
import { cn } from '@onlook/ui/utils';
import { TooltipArrow } from '@radix-ui/react-tooltip';
import { observer } from 'mobx-react-lite';
import { useState } from 'react';

Expand Down Expand Up @@ -112,7 +111,6 @@ export const ChatHistory = observer(({ isOpen, onOpenChange }: ChatHistoryProps)
<p className="font-normal">
Delete Conversation
</p>
<TooltipArrow className="fill-foreground" />
</TooltipContent>
</Tooltip>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/client/src/app/project/[id]/_components/top-bar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const TopBar = observer(() => {
<Icons.CounterClockwiseClock className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent side="bottom">
<TooltipContent side="bottom" hideArrow>
{t(transKeys.editor.toolbar.versionHistory)}
</TooltipContent>
</Tooltip>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/client/src/components/ui/avatar-dropdown/plans.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ export const UsageSection = observer(() => {
)}
<Progress value={usagePercent} className="w-full" />
<Button className="w-full flex items-center justify-center gap-2 bg-blue-400 text-white hover:bg-blue-500" onClick={handleGetMoreCredits}>
<Icons.Sparkles className="mr-1 h-4 w-4" /> Get more Credits
<Icons.Sparkles className="h-4 w-4" /> Get more Credits
</Button>
</div>
);
});
});