editor ui improvements

src/components/video-editor/SettingsPanel.tsx

@@ -145,8 +145,8 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
   };
 
   return (
-    <div className="flex-[3] min-w-0 bg-[#09090b] border border-white/5 rounded-2xl p-6 flex flex-col shadow-xl h-full overflow-y-auto custom-scrollbar">
-      <div className="mb-8">
+    <div className="flex-[2] min-w-0 bg-[#09090b] border border-white/5 rounded-2xl p-4 flex flex-col shadow-xl h-full overflow-y-auto custom-scrollbar">
+      <div className="mb-6">
         <div className="flex items-center justify-between mb-4">
           <span className="text-sm font-medium text-slate-200">Zoom Level</span>
           {zoomEnabled && selectedZoomDepth && (
@@ -194,7 +194,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
         )}
       </div>
 
-      <div className="mb-8 space-y-4">
+      <div className="mb-6 space-y-4">
         <div className="flex items-center justify-between p-3 rounded-xl bg-white/5 border border-white/5">
           <div className="text-sm font-medium text-slate-200">Drop Shadow</div>
           <Switch
@@ -213,7 +213,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
         </div>
       </div>
 
-      <div className="mb-8">
+      <div className="mb-6">
         <Button
           onClick={() => setShowCropDropdown(!showCropDropdown)}
           variant="outline"
@@ -292,7 +292,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
               Upload Custom Image
             </Button>
 
-            <div className="grid grid-cols-6 gap-2">
+            <div className="grid grid-cols-7 gap-1.5">
               {/* Custom Images */}
               {customImages.map((imageUrl, idx) => {
                 const isSelected = selected === imageUrl;
@@ -300,10 +300,10 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
                   <div
                     key={`custom-${idx}`}
                     className={cn(
-                      "aspect-square rounded-lg border-2 overflow-hidden cursor-pointer transition-all duration-200 relative group",
+                      "aspect-square w-12 h-12 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 relative group shadow-sm",
                       isSelected
                         ? "border-[#34B27B] ring-2 ring-[#34B27B]/30 scale-105 shadow-lg shadow-[#34B27B]/10"
-                        : "border-white/5 hover:border-white/20 hover:scale-105 opacity-70 hover:opacity-100"
+                        : "border-white/10 hover:border-[#34B27B]/40 hover:scale-105 opacity-80 hover:opacity-100 bg-white/5"
                     )}
                     style={{ backgroundImage: `url(${imageUrl})`, backgroundSize: "cover", backgroundPosition: "center" }}
                     aria-label={`Custom Image ${idx + 1}`}
@@ -312,10 +312,10 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
                   >
                     <button
                       onClick={(e) => handleRemoveCustomImage(imageUrl, e)}
-                      className="absolute top-1 right-1 w-5 h-5 bg-red-500/90 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10"
+                      className="absolute top-1 right-1 w-4 h-4 bg-red-500/90 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10"
                       aria-label="Remove custom image"
                     >
-                      <X className="w-3 h-3 text-white" />
+                      <X className="w-2.5 h-2.5 text-white" />
                     </button>
                   </div>
                 );
@@ -325,25 +325,22 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
               {(wallpaperPaths.length > 0 ? wallpaperPaths : WALLPAPER_RELATIVE.map(p => `/${p}`)).map((path, idx) => {
                 const isSelected = (() => {
                   if (!selected) return false;
-                  
                   if (selected === path) return true;
                   try {
                     const clean = (s: string) => s.replace(/^file:\/\//, '').replace(/^\//, '')
                     if (clean(selected).endsWith(clean(path))) return true;
                     if (clean(path).endsWith(clean(selected))) return true;
-                  } catch {
-                  }
+                  } catch {}
                   return false;
                 })();
-
                 return (
                   <div
                     key={path}
                     className={cn(
-                      "aspect-square rounded-lg border-2 overflow-hidden cursor-pointer transition-all duration-200",
+                      "aspect-square w-12 h-12 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 shadow-sm",
                       isSelected
                         ? "border-[#34B27B] ring-2 ring-[#34B27B]/30 scale-105 shadow-lg shadow-[#34B27B]/10"
-                        : "border-white/5 hover:border-white/20 hover:scale-105 opacity-70 hover:opacity-100"
+                        : "border-white/10 hover:border-[#34B27B]/40 hover:scale-105 opacity-80 hover:opacity-100 bg-white/5"
                     )}
                     style={{ backgroundImage: `url(${path})`, backgroundSize: "cover", backgroundPosition: "center" }}
                     aria-label={`Wallpaper ${idx + 1}`}
@@ -370,15 +367,15 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
           </TabsContent>
           
           <TabsContent value="gradient" className="mt-0">
-            <div className="grid grid-cols-6 gap-2">
+            <div className="grid grid-cols-7 gap-1.5">
               {GRADIENTS.map((g, idx) => (
                 <div
                   key={g}
                   className={cn(
-                    "aspect-square rounded-lg border-2 overflow-hidden cursor-pointer transition-all duration-200",
+                    "aspect-square w-12 h-12 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 shadow-sm",
                     gradient === g 
                       ? "border-[#34B27B] ring-2 ring-[#34B27B]/30 scale-105 shadow-lg shadow-[#34B27B]/10" 
-                      : "border-white/5 hover:border-white/20 hover:scale-105 opacity-70 hover:opacity-100"
+                      : "border-white/10 hover:border-[#34B27B]/40 hover:scale-105 opacity-80 hover:opacity-100 bg-white/5"
                   )}
                   style={{ background: g }}
                   aria-label={`Gradient ${idx + 1}`}

src/components/video-editor/VideoEditor.tsx

@@ -298,52 +298,46 @@ export default function VideoEditor() {
     );
   }
 
-  const isMac = navigator.userAgent.includes('Mac');
 
   return (
     <div className="flex flex-col h-screen bg-[#09090b] text-slate-200 overflow-hidden selection:bg-[#34B27B]/30">
-      {/* Drag region for window - more padding on macOS for traffic lights */}
       <div 
-        className={`h-10 flex-shrink-0 bg-[#09090b]/80 backdrop-blur-md border-b border-white/5 flex items-center justify-between ${isMac ? 'pl-20 pr-4' : 'px-4'} z-50`}
+        className="h-10 flex-shrink-0 bg-[#09090b]/80 backdrop-blur-md border-b border-white/5 flex items-center justify-between px-6 z-50"
         style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
       >
         <div className="flex-1" />
-
       </div>
 
       <div className="flex-1 p-4 gap-4 flex min-h-0 relative">
         {/* Left Column - Video & Timeline */}
         <div className="flex-[7] flex flex-col gap-3 min-w-0 h-full">
-          {/* Video Preview Area */}
-          <div className="flex-shrink-0 bg-black/40 rounded-2xl border border-white/5 shadow-2xl overflow-hidden">
-            <div className="flex flex-col">
-              {/* Video Container - Fixed aspect ratio */}
-              <div className="relative w-full" style={{ paddingBottom: '56.25%' }}> {/* 16:9 aspect ratio */}
-                <div className="absolute inset-0 flex items-center justify-center p-4">
-                  <div className="relative w-full h-full max-w-full max-h-full">
-                    <VideoPlayback
-                      ref={videoPlaybackRef}
-                      videoPath={videoPath || ''}
-                      onDurationChange={setDuration}
-                      onTimeUpdate={setCurrentTime}
-                      onPlayStateChange={setIsPlaying}
-                      onError={setError}
-                      wallpaper={wallpaper}
-                      zoomRegions={zoomRegions}
-                      selectedZoomId={selectedZoomId}
-                      onSelectZoom={handleSelectZoom}
-                      onZoomFocusChange={handleZoomFocusChange}
-                      isPlaying={isPlaying}
-                      showShadow={showShadow}
-                      showBlur={showBlur}
-                      cropRegion={cropRegion}
-                    />
-                  </div>
-                </div>
+          {/* Top section: video preview and controls */}
+          <div className="w-full flex flex-col items-center justify-center bg-black/40 rounded-2xl border border-white/5 shadow-2xl overflow-hidden" style={{ height: '80%' }}>
+            {/* Video preview */}
+            <div className="w-full flex justify-center items-center" style={{ flex: '1 1 auto', padding: '24px 0' }}>
+              <div className="relative" style={{ width: '100%', maxWidth: '1000px', aspectRatio: '16/9', boxSizing: 'border-box', overflow: 'hidden' }}>
+                <VideoPlayback
+                  ref={videoPlaybackRef}
+                  videoPath={videoPath || ''}
+                  onDurationChange={setDuration}
+                  onTimeUpdate={setCurrentTime}
+                  onPlayStateChange={setIsPlaying}
+                  onError={setError}
+                  wallpaper={wallpaper}
+                  zoomRegions={zoomRegions}
+                  selectedZoomId={selectedZoomId}
+                  onSelectZoom={handleSelectZoom}
+                  onZoomFocusChange={handleZoomFocusChange}
+                  isPlaying={isPlaying}
+                  showShadow={showShadow}
+                  showBlur={showBlur}
+                  cropRegion={cropRegion}
+                />
               </div>
-              
-              {/* Playback Controls - Below video */}
-              <div className="px-4 pb-3 pt-2">
+            </div>
+            {/* Playback controls */}
+            <div className="w-full flex justify-center items-center" style={{ padding: '0 0 24px 0' }}>
+              <div style={{ maxWidth: '700px', width: '80%' }}>
                 <PlaybackControls
                   isPlaying={isPlaying}
                   currentTime={currentTime}
@@ -355,7 +349,7 @@ export default function VideoEditor() {
             </div>
           </div>
 
-          {/* Timeline Area */}
+          {/* Timeline section */}
           <div className="flex-1 min-h-[180px] bg-[#09090b] rounded-2xl border border-white/5 shadow-lg overflow-hidden flex flex-col">
             <TimelineEditor
               videoDuration={duration}
@@ -371,7 +365,7 @@ export default function VideoEditor() {
           </div>
         </div>
 
-          {/* Right Column - Settings */}
+          {/* Right section: settings panel */}
         <SettingsPanel
           selected={wallpaper}
           onWallpaperChange={setWallpaper}