starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-24 01:38:26 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Fix header spacing for window controls

Browse Source 
https://feedback.yaak.app/p/app-bar-icons-not-aligned-correctly-when-fullscreen
This commit is contained in:
Gregory Schier
2025-07-24 07:57:38 -07:00
parent 20681e5be3
commit 2cdd97cabb
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src-web/components/HeaderSize.tsx
View File

@@ -1,9 +1,10 @@
import { type } from '@tauri-apps/plugin-os';
import { settingsAtom } from '@yaakapp-internal/models'; import { settingsAtom } from '@yaakapp-internal/models';
import classNames from 'classnames'; import classNames from 'classnames';
import { useAtomValue } from 'jotai'; import { useAtomValue } from 'jotai';
import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'; import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { useStoplightsVisible } from '../hooks/useStoplightsVisible'; import { useIsFullscreen } from '../hooks/useIsFullscreen';
import { HEADER_SIZE_LG, HEADER_SIZE_MD, WINDOW_CONTROLS_WIDTH } from '../lib/constants'; import { HEADER_SIZE_LG, HEADER_SIZE_MD, WINDOW_CONTROLS_WIDTH } from '../lib/constants';
import { WindowControls } from './WindowControls'; import { WindowControls } from './WindowControls';
@@ -23,7 +24,7 @@ export function HeaderSize({
children, children,
}: HeaderSizeProps) { }: HeaderSizeProps) {
const settings = useAtomValue(settingsAtom); const settings = useAtomValue(settingsAtom);
const stoplightsVisible = useStoplightsVisible(); const isFullscreen = useIsFullscreen();
const finalStyle = useMemo<CSSProperties>(() => { const finalStyle = useMemo<CSSProperties>(() => {
const s = { ...style }; const s = { ...style };
@@ -31,20 +32,22 @@ export function HeaderSize({
if (size === 'md') s.minHeight = HEADER_SIZE_MD; if (size === 'md') s.minHeight = HEADER_SIZE_MD;
if (size === 'lg') s.minHeight = HEADER_SIZE_LG; if (size === 'lg') s.minHeight = HEADER_SIZE_LG;
// Add large padding for window controls if (type() === 'macos') {
if (stoplightsVisible && !ignoreControlsSpacing) { if (!isFullscreen) {
s.paddingLeft = 72 / settings.interfaceScale; // Add large padding for window controls
} else if (!stoplightsVisible && !ignoreControlsSpacing && !settings.hideWindowControls) { s.paddingLeft = 72 / settings.interfaceScale;
}
} else if (!ignoreControlsSpacing && !settings.hideWindowControls) {
s.paddingRight = WINDOW_CONTROLS_WIDTH; s.paddingRight = WINDOW_CONTROLS_WIDTH;
} }
return s; return s;
}, [ }, [
ignoreControlsSpacing, ignoreControlsSpacing,
isFullscreen,
settings.hideWindowControls, settings.hideWindowControls,
settings.interfaceScale, settings.interfaceScale,
size, size,
stoplightsVisible,
style, style,
]); ]);