feat: styling improvements (#2731)

drfarrell · web-flow · commit 6e072e560ac7 · 2025-08-25T13:56:17.000-07:00
diff --git a/apps/web/client/src/app/_components/hero/create.tsx b/apps/web/client/src/app/_components/hero/create.tsx
@@ -256,12 +256,12 @@ export const Create = observer(({
         <Card
             key={cardKey}
             className={cn(
-                'w-[600px] overflow-hidden gap-4 backdrop-blur-md bg-background/20',
+                'w-[600px] overflow-hidden gap-1.5 backdrop-blur-md bg-background/20 p-4',
                 isDragging && 'bg-background/40',
             )}
         >
-            <CardHeader className="text-start">{`Let's design a...`}</CardHeader>
-            <CardContent>
+            <CardHeader className="text-start p-0 text-foreground-primary/80">{`Let's design a...`}</CardHeader>
+            <CardContent className="p-0">
                 <div
                     className={cn(
                         'flex flex-col gap-3 rounded p-0 transition-colors duration-200 cursor-text',
diff --git a/apps/web/client/src/app/_components/hero/index.tsx b/apps/web/client/src/app/_components/hero/index.tsx
@@ -3,7 +3,7 @@
 import { api } from '@/trpc/react';
 import { Icons } from '@onlook/ui/icons';
 import { motion } from 'framer-motion';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { vujahdayScript } from '../../fonts';
 import { Create } from './create';
 import { CreateError } from './create-error';
@@ -15,28 +15,44 @@ import { UnicornBackground } from './unicorn-background';
 export function Hero() {
     const [cardKey, setCardKey] = useState(0);
     const [isCreatingProject, setIsCreatingProject] = useState(false);
+    const [isShortScreen, setIsShortScreen] = useState(false);
     const { data: user } = api.user.get.useQuery();
 
+    useEffect(() => {
+        const checkScreenHeight = () => {
+            setIsShortScreen(window.innerHeight < 700);
+        };
+
+        checkScreenHeight();
+        window.addEventListener('resize', checkScreenHeight);
+
+        return () => window.removeEventListener('resize', checkScreenHeight);
+    }, []);
+
     return (
         <div className="w-full h-full flex flex-col items-center text-lg text-center relative">
             <UnicornBackground />
             <div className="w-full h-full flex flex-col items-center justify-center mb-42 gap-10 pt-12">
-                <div className="flex flex-col gap-3 items-center relative z-20 pt-0 pb-2">
-                    <motion.div
-                        className="flex flex-col gap-3 items-center relative z-20 pt-4 pb-2 mb-6"
-                        initial={{ opacity: 0, y: -10 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.6, delay: 1.2, ease: "easeOut" }}
-                    >
-                        <a
-                            href="https://www.ycombinator.com/companies/onlook/jobs/e4gHv1n-founding-engineer-fullstack" target="_blank"
-                            className="inline-flex items-center gap-2 px-3 py-1.5 hover:bg-foreground-secondary/20 backdrop-blur-sm border border-foreground-secondary/20 rounded-full text-xs text-foreground-secondary transition-all duration-200 hover:scale-102"
+                <div className="flex flex-col gap-3 items-center relative z-20 pt-8 pb-2">
+                    {!isShortScreen && (
+                        <motion.div
+                            className="flex flex-col gap-3 items-center relative z-20 pt-4 pb-2 mb-6"
+                            initial={{ opacity: 0, y: -10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.6, delay: 1.2, ease: "easeOut" }}
                         >
-                            We're hiring engineers
-                            <Icons.ArrowRight className="w-4 h-4" />
-                        </a>
+                            <a
+                                href="https://www.ycombinator.com/companies/onlook/jobs/e4gHv1n-founding-engineer-fullstack"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="inline-flex items-center gap-2 px-3 py-1.5 hover:bg-foreground-secondary/20 backdrop-blur-sm border border-foreground-secondary/20 rounded-full text-xs text-foreground-secondary transition-all duration-200 hover:scale-102"
+                            >
+                                We're hiring engineers
+                                <Icons.ArrowRight className="w-4 h-4" />
+                            </a>
 
-                    </motion.div>
+                        </motion.div>
+                    )}
                     <motion.h1
                         className="text-6xl font-light leading-tight text-center !leading-[0.9]"
                         initial={{ opacity: 0, filter: "blur(4px)" }}
diff --git a/apps/web/client/src/app/_components/shared/mockups/tailwind-color-editor.tsx b/apps/web/client/src/app/_components/shared/mockups/tailwind-color-editor.tsx
@@ -208,16 +208,16 @@ export function TailwindColorEditorMockup() {
           <div className="h-[4px] w-6 rounded-full bg-foreground-primary" />
         </ToolbarButton>
         {/* Align left */}
-        <ToolbarButton className="flex items-center justify-center min-w-10">
+        <ToolbarButton className="flex items-center justify-center min-w-9">
           {/* eslint-disable-next-line react/no-children-prop */}
           {React.createElement(Icons.TextAlignLeft as unknown as React.FC<React.SVGProps<SVGSVGElement>>, { className: 'h-4 w-4' } as any)}
         </ToolbarButton>
         {/* Advanced typography */}
-        <ToolbarButton className="flex items-center justify-center min-w-10 px-2">
+        <ToolbarButton className="flex items-center justify-center min-w-9 px-2">
           <Icons.AdvancedTypography className="h-4 w-4" />
         </ToolbarButton>
         <InputSeparator />
-         <ToolbarButton className="flex items-center justify-center min-w-10">
+         <ToolbarButton className="flex items-center justify-center min-w-9">
            {React.createElement(Icons.DotsHorizontal as unknown as React.FC<React.SVGProps<SVGSVGElement>>, { className: 'h-4 w-4' } as any)}
          </ToolbarButton>
         </div>
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/border-color.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/border-color.tsx
@@ -45,7 +45,7 @@ export const BorderColor = observer(() => {
                 <DropdownMenuTrigger asChild>
                     <ToolbarButton
                         isOpen={isOpen}
-                        className="flex min-w-10 flex-col items-center justify-center gap-0.5"
+                        className="flex min-w-9 flex-col items-center justify-center gap-0.5"
                     >
                         <Icons.PencilIcon className="h-4 w-4 min-h-4 min-w-4" />
                         <div
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/border.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/border.tsx
@@ -75,7 +75,7 @@ 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-9"
                     >
                         <Icons.BorderEdit className={`h-4 w-4 min-h-4 min-w-4 ${borderExists ? 'text-white' : ''}
 `} />
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/display/align.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/display/align.tsx
@@ -60,9 +60,18 @@ export const VerticalAlignInput = () => {
         setValue(editorEngine.style.selectedStyle?.styles.computed.alignItems ?? 'flex-start');
     }, [editorEngine.style.selectedStyle?.styles.computed.alignItems]);
 
+    // Check if flexbox is active
+    const displayValue = editorEngine.style.selectedStyle?.styles.computed.display;
+    const isFlexboxActive = displayValue === 'flex' || displayValue === 'inline-flex';
+
+    // Don't render if flexbox is not active
+    if (!isFlexboxActive) {
+        return null;
+    }
+
     return (
-        <div className="flex items-center gap-3">
-            <span className="text-sm text-muted-foreground w-24">Vertical</span>
+        <div className="flex items-center gap-0">
+            <span className="text-sm text-muted-foreground w-20">Vertical</span>
             <InputRadio
                 options={Object.values(verticalAlignOptions)}
                 value={value}
@@ -86,9 +95,18 @@ export const HorizontalAlignInput = () => {
         setValue(editorEngine.style.selectedStyle?.styles.computed.justifyContent ?? 'flex-start');
     }, [editorEngine.style.selectedStyle?.styles.computed.justifyContent]);
 
+    // Check if flexbox is active
+    const displayValue = editorEngine.style.selectedStyle?.styles.computed.display;
+    const isFlexboxActive = displayValue === 'flex' || displayValue === 'inline-flex';
+
+    // Don't render if flexbox is not active
+    if (!isFlexboxActive) {
+        return null;
+    }
+
     return (
-        <div className="flex items-center gap-3">
-            <span className="text-sm text-muted-foreground w-24">Horizontal</span>
+        <div className="flex items-center gap-0">
+            <span className="text-sm text-muted-foreground w-20">Horizontal</span>
             <InputRadio
                 options={Object.values(horizontalAlignOptions)}
                 value={value}
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/display/direction.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/display/direction.tsx
@@ -19,9 +19,18 @@ export const DirectionInput = () => {
         setValue(editorEngine.style.selectedStyle?.styles.computed.flexDirection ?? 'column');
     }, [editorEngine.style.selectedStyle?.styles.computed.flexDirection]);
 
+    // Check if flexbox is active
+    const displayValue = editorEngine.style.selectedStyle?.styles.computed.display;
+    const isFlexboxActive = displayValue === 'flex' || displayValue === 'inline-flex';
+
+    // Don't render if flexbox is not active
+    if (!isFlexboxActive) {
+        return null;
+    }
+
     return (
-        <div className="flex items-center gap-3">
-            <span className="text-sm text-muted-foreground w-24">Direction</span>
+        <div className="flex items-center gap-0">
+            <span className="text-sm text-muted-foreground w-20">Direction</span>
             <InputRadio
                 options={Object.values(directionOptions)}
                 value={value}
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/display/gap.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/display/gap.tsx
@@ -20,20 +20,22 @@ export const GapInput = () => {
     }, [editorEngine.style.selectedStyle?.styles.computed.gap]);
 
     return (
-        <div className="flex items-center gap-3">
-            <span className="text-sm text-muted-foreground w-24">Gap</span>
-            <InputIcon
-                value={numValue}
-                unit={unitValue}
-                onChange={(newValue) => {
-                    setNumValue(newValue);
-                    editorEngine.style.update('gap', `${newValue}${unitValue}`);
-                }}
-                onUnitChange={(newUnit) => {
-                    setUnitValue(newUnit);
-                    editorEngine.style.update('gap', `${numValue}${newUnit}`);
-                }}
-            />
+        <div className="flex items-center gap-0 w-full">
+            <span className="text-sm text-muted-foreground w-20">Gap</span>
+            <div className="flex-1">
+                <InputIcon
+                    value={numValue}
+                    unit={unitValue}
+                    onChange={(newValue) => {
+                        setNumValue(newValue);
+                        editorEngine.style.update('gap', `${newValue}${unitValue}`);
+                    }}
+                    onUnitChange={(newUnit) => {
+                        setUnitValue(newUnit);
+                        editorEngine.style.update('gap', `${numValue}${newUnit}`);
+                    }}
+                />
+            </div>
         </div>
     );
 };
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/display/index.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/display/index.tsx
@@ -46,7 +46,7 @@ export const Display = observer(() => {
                 <DropdownMenuTrigger asChild>
                     <ToolbarButton
                         isOpen={isOpen}
-                        className="flex items-center gap-1 min-w-10"
+                        className="flex items-center gap-1 min-w-9"
                     >
                         <Icons.Layout className="h-4 w-4 min-h-4 min-w-4" />
                         {(layoutType === 'flex' || layoutType === 'grid') && (
@@ -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-[250px] mt-2 p-1.5 rounded-lg">
+                <div className="p-1 space-y-2">
                     <TypeInput />
                     <DirectionInput />
                     <VerticalAlignInput />
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/display/type.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/display/type.tsx
@@ -14,8 +14,8 @@ export const TypeInput = memo(() => {
     }, [editorEngine.style.selectedStyle?.styles.computed.display]);
 
     return (
-        <div className="flex items-center gap-3">
-            <span className="text-sm text-muted-foreground w-24"> Type </span>
+        <div className="flex items-center gap-0">
+            <span className="text-sm text-muted-foreground w-20"> Type </span>
             <InputRadio
                 options={Object.values(layoutTypeOptions)}
                 value={value}
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/margin.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/margin.tsx
@@ -153,7 +153,7 @@ 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-9"
                     >
                         <MarginIcon className="h-4 min-h-4 w-4 min-w-4" />
                         {marginValue && (
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/opacity.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/opacity.tsx
@@ -67,7 +67,7 @@ export const Opacity = observer(() => {
                 <DropdownMenuTrigger asChild>
                     <ToolbarButton
                         isOpen={isOpen}
-                        className="group h-8 flex items-center gap-1"
+                        className="group flex items-center gap-1"
                         onClick={handleInputAreaClick}
                     >
                         <Input
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/padding.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/padding.tsx
@@ -128,7 +128,7 @@ 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-9"
                     >
                         <PaddingIcon className="h-4 min-h-4 w-4 min-w-4" />
                         {paddingValue && (
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/radius.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/radius.tsx
@@ -106,7 +106,7 @@ 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-9"
                     >
                         <RadiusIcon className="h-4 min-h-4 w-4 min-w-4" />
                         {radiusValue && (
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/index.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/index.tsx
@@ -97,7 +97,7 @@ export const EditorBar = observer(({ availableWidth }: { availableWidth?: number
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: 20 }}
                 className={cn(
-                    'flex flex-col border-[0.5px] border-border p-1 px-1.5 bg-background rounded-xl backdrop-blur drop-shadow-xl z-50 overflow-hidden',
+                    'flex flex-col border-[0.5px] border-border p-1 px-1 bg-background rounded-xl backdrop-blur drop-shadow-xl z-50 overflow-hidden',
                     editorEngine.state.editorMode === EditorMode.PREVIEW && !windowSelected && 'hidden',
                 )}
                 transition={{
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/inputs/input-image.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/inputs/input-image.tsx
@@ -142,7 +142,7 @@ export const InputImage = observer(() => {
                     <DropdownMenuTrigger asChild>
                         <ToolbarButton
                             isOpen={isOpen}
-                            className="flex w-10 flex-col items-center justify-center gap-0.5 relative"
+                            className="flex w-9 flex-col items-center justify-center gap-0.5 relative"
                             disabled={isUploading}
                         >
                             {isUploading ? (
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/overflow-menu.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/overflow-menu.tsx
@@ -4,6 +4,7 @@ import { Icons } from '@onlook/ui/icons';
 import React from 'react';
 import { InputSeparator } from './separator';
 import { ToolbarButton } from './toolbar-button';
+import { HoverOnlyTooltip } from './hover-tooltip';
 
 interface OverflowMenuProps {
     isOpen: boolean;
@@ -23,15 +24,17 @@ export const OverflowMenu = ({ isOpen, onOpenChange, overflowGroups, visibleCoun
         <>
             {visibleCount > 0 && <InputSeparator />}
             <DropdownMenu open={isOpen} onOpenChange={onOpenChange} modal={false}>
-                <DropdownMenuTrigger asChild>
-                    <ToolbarButton
-                        isOpen={isOpen}
-                        className="w-10 flex items-center justify-center"
-                        aria-label="Show more toolbar controls"
-                    >
-                        <Icons.DotsHorizontal className="w-5 h-5" />
-                    </ToolbarButton>
-                </DropdownMenuTrigger>
+                <HoverOnlyTooltip content="More options" side="bottom" className="mt-1" hideArrow disabled={isOpen}>
+                    <DropdownMenuTrigger asChild>
+                        <ToolbarButton
+                            isOpen={isOpen}
+                            className="w-9 flex items-center justify-center"
+                            aria-label="Show more toolbar controls"
+                        >
+                            <Icons.DotsHorizontal className="w-5 h-5" />
+                        </ToolbarButton>
+                    </DropdownMenuTrigger>
+                </HoverOnlyTooltip>
                 <DropdownMenuContent
                     align="end"
                     className="flex flex-row gap-1 p-1 px-1 bg-background rounded-lg shadow-xl shadow-black/20 min-w-[fit-content] items-center w-[fit-content]"
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/advanced-typography.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/advanced-typography.tsx
@@ -55,7 +55,7 @@ export const AdvancedTypography = () => {
                 <DropdownMenuTrigger asChild>
                     <ToolbarButton
                         isOpen={isOpen}
-                        className="flex min-w-10 items-center justify-center px-2"
+                        className="flex min-w-9 items-center justify-center px-2"
                     >
                         <Icons.AdvancedTypography className="h-4 w-4" />
                     </ToolbarButton>
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/font/font-size.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/font/font-size.tsx
@@ -97,7 +97,7 @@ export const FontSizeSelector = () => {
                     <DropdownMenuTrigger asChild>
                         <ToolbarButton
                             isOpen={isOpen}
-                            className="max-w-[40px] min-w-[40px] px-1 w-10"
+                            className="min-w-[40px] px-1 w-11"
                             onClick={handleInputClick}
                         >
                             <input
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/text-align.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/text-align.tsx
@@ -33,7 +33,7 @@ export const TextAlignSelector = observer(
                     <DropdownMenuTrigger asChild>
                         <ToolbarButton
                             isOpen={isOpen}
-                            className="flex items-center justify-center gap-2 px-2 min-w-10"
+                            className="flex items-center justify-center gap-2 px-2 min-w-9"
                         >
                             {(() => {
                                 switch (textState.textAlign) {
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/window-selected/device-selector.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/window-selected/device-selector.tsx
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/window-selected/rotate-group.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/window-selected/rotate-group.tsx
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/window-selected/theme-group.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/window-selected/theme-group.tsx
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/window-selected/window-actions-group.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/window-selected/window-actions-group.tsx
diff --git a/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/color-panel/index.tsx b/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/color-panel/index.tsx
diff --git a/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/index.tsx b/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/index.tsx
diff --git a/apps/web/client/src/components/ui/avatar-dropdown/plans.tsx b/apps/web/client/src/components/ui/avatar-dropdown/plans.tsx

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ export const BorderColor = observer(() => {`
`45`	`45`	`<DropdownMenuTrigger asChild>`
`46`	`46`	`<ToolbarButton`
`47`	`47`	`isOpen={isOpen}`
`48`		`- className="flex min-w-10 flex-col items-center justify-center gap-0.5"`
	`48`	`+ className="flex min-w-9 flex-col items-center justify-center gap-0.5"`
`49`	`49`	`>`
`50`	`50`	`<Icons.PencilIcon className="h-4 w-4 min-h-4 min-w-4" />`
`51`	`51`	`<div`
Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@ export const Border = observer(() => {`
`75`	`75`	`<DropdownMenuTrigger asChild>`
`76`	`76`	`<ToolbarButton`
`77`	`77`	`isOpen={isOpen}`
`78`		`- className="flex items-center gap-1 min-w-10"`
	`78`	`+ className="flex items-center gap-1 min-w-9"`
`79`	`79`	`>`
`80`	`80`	<Icons.BorderEdit className={`h-4 w-4 min-h-4 min-w-4 ${borderExists ? 'text-white' : ''}
`81`	`81`	`} />