From 7d7d152d4e0ecccf7590b58ee6415bec2a690ac7 Mon Sep 17 00:00:00 2001 From: Kacper Date: Fri, 30 Jan 2026 20:36:33 +0100 Subject: [PATCH 1/3] fix(ui): Adjust sidebar padding for macOS Electron compatibility Updated the sidebar header and navigation components to increase top padding for macOS Electron users from 10px to 38px, ensuring better layout and avoiding overlap with the traffic light controls. This change enhances the user experience on macOS platforms. --- .../components/layout/sidebar/components/sidebar-header.tsx | 4 ++-- .../layout/sidebar/components/sidebar-navigation.tsx | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx b/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx index 7a92aec9..10b656cf 100644 --- a/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx +++ b/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx @@ -89,7 +89,7 @@ export function SidebarHeader({
@@ -240,7 +240,7 @@ export function SidebarHeader({
{/* Header with logo and project dropdown */} diff --git a/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx b/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx index 905448cd..d3e7d5cc 100644 --- a/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx +++ b/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx @@ -3,7 +3,8 @@ import type { NavigateOptions } from '@tanstack/react-router'; import { ChevronDown, Wrench, Github, Folder } from 'lucide-react'; import * as LucideIcons from 'lucide-react'; import type { LucideIcon } from 'lucide-react'; -import { cn } from '@/lib/utils'; +import { cn, isMac } from '@/lib/utils'; +import { isElectron } from '@/lib/electron'; import { formatShortcut, useAppStore } from '@/store/app-store'; import { getAuthenticatedImageUrl } from '@/lib/api-fetch'; import type { NavSection } from '../types'; @@ -117,7 +118,8 @@ export function SidebarNavigation({ className={cn( 'flex-1 overflow-y-auto scrollbar-hide px-3 pb-2', // Add top padding in discord mode since there's no header - sidebarStyle === 'discord' ? 'pt-3' : 'mt-1' + // Extra padding for macOS Electron to avoid traffic light overlap + sidebarStyle === 'discord' ? (isMac && isElectron() ? 'pt-[38px]' : 'pt-3') : 'mt-1' )} > {/* Project name display for classic/discord mode */} From f15725f28a482a12881944ba08e105c5f663acc2 Mon Sep 17 00:00:00 2001 From: Kacper Date: Fri, 30 Jan 2026 20:43:28 +0100 Subject: [PATCH 2/3] refactor(ui): Extract macOS Electron padding into shared constant MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Extract the hardcoded 'pt-[38px]' magic number into a shared constant MACOS_ELECTRON_TOP_PADDING_CLASS for better maintainability. This addresses the PR #732 review feedback from Gemini Code Assist. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../layout/sidebar/components/sidebar-header.tsx | 5 +++-- .../layout/sidebar/components/sidebar-navigation.tsx | 7 ++++++- apps/ui/src/components/layout/sidebar/constants.ts | 6 ++++++ 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx b/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx index 10b656cf..e926b3da 100644 --- a/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx +++ b/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx @@ -6,6 +6,7 @@ import type { LucideIcon } from 'lucide-react'; import { cn, isMac } from '@/lib/utils'; import { formatShortcut } from '@/store/app-store'; import { isElectron, type Project } from '@/lib/electron'; +import { MACOS_ELECTRON_TOP_PADDING_CLASS } from '../constants'; import { getAuthenticatedImageUrl } from '@/lib/api-fetch'; import { useAppStore } from '@/store/app-store'; import { @@ -89,7 +90,7 @@ export function SidebarHeader({
@@ -240,7 +241,7 @@ export function SidebarHeader({
{/* Header with logo and project dropdown */} diff --git a/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx b/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx index d3e7d5cc..2380cc59 100644 --- a/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx +++ b/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx @@ -5,6 +5,7 @@ import * as LucideIcons from 'lucide-react'; import type { LucideIcon } from 'lucide-react'; import { cn, isMac } from '@/lib/utils'; import { isElectron } from '@/lib/electron'; +import { MACOS_ELECTRON_TOP_PADDING_CLASS } from '../constants'; import { formatShortcut, useAppStore } from '@/store/app-store'; import { getAuthenticatedImageUrl } from '@/lib/api-fetch'; import type { NavSection } from '../types'; @@ -119,7 +120,11 @@ export function SidebarNavigation({ 'flex-1 overflow-y-auto scrollbar-hide px-3 pb-2', // Add top padding in discord mode since there's no header // Extra padding for macOS Electron to avoid traffic light overlap - sidebarStyle === 'discord' ? (isMac && isElectron() ? 'pt-[38px]' : 'pt-3') : 'mt-1' + sidebarStyle === 'discord' + ? isMac && isElectron() + ? MACOS_ELECTRON_TOP_PADDING_CLASS + : 'pt-3' + : 'mt-1' )} > {/* Project name display for classic/discord mode */} diff --git a/apps/ui/src/components/layout/sidebar/constants.ts b/apps/ui/src/components/layout/sidebar/constants.ts index 58417fe3..9ab38cff 100644 --- a/apps/ui/src/components/layout/sidebar/constants.ts +++ b/apps/ui/src/components/layout/sidebar/constants.ts @@ -1,5 +1,11 @@ import { darkThemes, lightThemes } from '@/config/theme-options'; +/** + * Tailwind class for top padding on macOS Electron to avoid overlapping with traffic light window controls. + * This padding is applied conditionally when running on macOS in Electron. + */ +export const MACOS_ELECTRON_TOP_PADDING_CLASS = 'pt-[38px]'; + /** * Shared constants for theme submenu positioning and layout. * Used across project-context-menu and project-selector-with-options components From 7fb0d0f2ca51bba971644481abe9ad7c25aacd76 Mon Sep 17 00:00:00 2001 From: Shirone Date: Sat, 31 Jan 2026 12:54:36 +0100 Subject: [PATCH 3/3] refactor(ui): Integrate macOS Electron padding logic into ProjectSwitcher Updated the ProjectSwitcher component to conditionally apply top padding based on the operating system and Electron environment. This change utilizes the newly created MACOS_ELECTRON_TOP_PADDING_CLASS for improved maintainability and consistency across the UI. --- .../layout/project-switcher/project-switcher.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/apps/ui/src/components/layout/project-switcher/project-switcher.tsx b/apps/ui/src/components/layout/project-switcher/project-switcher.tsx index 541fa83c..a8aa521f 100644 --- a/apps/ui/src/components/layout/project-switcher/project-switcher.tsx +++ b/apps/ui/src/components/layout/project-switcher/project-switcher.tsx @@ -1,7 +1,7 @@ import { useState, useCallback, useEffect } from 'react'; import { Plus, Bug, FolderOpen, BookOpen } from 'lucide-react'; import { useNavigate, useLocation } from '@tanstack/react-router'; -import { cn } from '@/lib/utils'; +import { cn, isMac } from '@/lib/utils'; import { useAppStore } from '@/store/app-store'; import { useOSDetection } from '@/hooks/use-os-detection'; import { ProjectSwitcherItem } from './components/project-switcher-item'; @@ -11,9 +11,12 @@ import { NotificationBell } from './components/notification-bell'; import { NewProjectModal } from '@/components/dialogs/new-project-modal'; import { OnboardingDialog } from '@/components/layout/sidebar/dialogs'; import { useProjectCreation } from '@/components/layout/sidebar/hooks'; -import { SIDEBAR_FEATURE_FLAGS } from '@/components/layout/sidebar/constants'; +import { + MACOS_ELECTRON_TOP_PADDING_CLASS, + SIDEBAR_FEATURE_FLAGS, +} from '@/components/layout/sidebar/constants'; import type { Project } from '@/lib/electron'; -import { getElectronAPI } from '@/lib/electron'; +import { getElectronAPI, isElectron } from '@/lib/electron'; import { initializeProject, hasAppSpec, hasAutomakerDir } from '@/lib/project-init'; import { toast } from 'sonner'; import { CreateSpecDialog } from '@/components/views/spec-view/dialogs'; @@ -279,7 +282,12 @@ export function ProjectSwitcher() { data-testid="project-switcher" > {/* Automaker Logo and Version */} -
+