Fix macOS traffic light overlap and DMG installer UI

- Add platform detection to Header component
- Add left padding on macOS to avoid traffic light button overlap
- Use create-dmg for proper DMG creation with Applications shortcut

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: Nattuhan

.github/workflows/release.yml

@@ -44,8 +44,8 @@ jobs:
       - name: Ad-hoc sign and repackage macOS apps
         if: matrix.platform == 'mac'
         run: |
-          # Remove old DMGs
-          rm -f release/*.dmg
+          # Remove old DMGs and blockmaps
+          rm -f release/*.dmg release/*.blockmap
 
           # Sign all .app bundles with ad-hoc signature
           for dir in release/mac release/mac-arm64; do
@@ -60,20 +60,26 @@ jobs:
             fi
           done
 
-          # Recreate DMGs using hdiutil
+          # Install create-dmg for proper DMG creation with Applications shortcut
+          npm install -g create-dmg
+
           VERSION=$(node -p "require('./package.json').version")
           APPNAME="Reference Viewer"
 
-          # x64 DMG
+          # Create x64 DMG with Applications shortcut
           if [ -d "release/mac/$APPNAME.app" ]; then
             echo "Creating x64 DMG..."
-            hdiutil create -volname "$APPNAME" -srcfolder "release/mac/$APPNAME.app" -ov -format UDZO "release/$APPNAME-$VERSION.dmg"
+            create-dmg "release/mac/$APPNAME.app" release/ --overwrite || true
+            # Rename to our naming convention
+            mv "release/$APPNAME $VERSION.dmg" "release/$APPNAME-$VERSION.dmg" 2>/dev/null || true
           fi
 
-          # arm64 DMG
+          # Create arm64 DMG with Applications shortcut
           if [ -d "release/mac-arm64/$APPNAME.app" ]; then
             echo "Creating arm64 DMG..."
-            hdiutil create -volname "$APPNAME" -srcfolder "release/mac-arm64/$APPNAME.app" -ov -format UDZO "release/$APPNAME-$VERSION-arm64.dmg"
+            create-dmg "release/mac-arm64/$APPNAME.app" release/ --overwrite || true
+            # Rename to our naming convention
+            mv "release/$APPNAME $VERSION.dmg" "release/$APPNAME-$VERSION-arm64.dmg" 2>/dev/null || true
           fi
 
           ls -la release/

electron/preload.ts

@@ -23,6 +23,9 @@ const api = {
 
     showInFolder: (filePath: string): Promise<void> =>
       ipcRenderer.invoke('app:showInFolder', filePath),
+
+    getPlatform: (): 'darwin' | 'win32' | 'linux' =>
+      process.platform as 'darwin' | 'win32' | 'linux',
   },
 
   // ===== Video Operations =====

src/components/layout/Header.css

@@ -9,6 +9,11 @@
   -webkit-app-region: drag;
 }
 
+/* macOS traffic light buttons spacing */
+.header.platform-mac {
+  padding-left: 80px;
+}
+
 .header-left {
   display: flex;
   align-items: center;

src/components/layout/Header.tsx

@@ -2,12 +2,15 @@ import { useVideoStore } from '../../stores/videoStore';
 import { useUIStore } from '../../stores/uiStore';
 import './Header.css';
 
+const platform = window.electronAPI?.app.getPlatform() ?? 'win32';
+const isMac = platform === 'darwin';
+
 export function Header() {
   const { searchText, setSearchText } = useVideoStore();
   const { openImportDialog, viewMode, setViewMode } = useUIStore();
 
   return (
-    <header className="header">
+    <header className={`header ${isMac ? 'platform-mac' : ''}`}>
       <div className="header-left">
         <h1 className="app-title">Reference Viewer</h1>
       </div>