diff --git a/src/App.tsx b/src/App.tsx index 998cb75..ca8aa1f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,7 +13,7 @@ function MainContent(): React.JSX.Element { const location = useLocation() const { currentTheme } = useTheme() const [messageApi, contextHolder] = message.useMessage() - const { isIosDevice, isIosPhone } = useMemo(getIosDeviceInfo, []) + const { isIosDevice, isAndroidDevice, defaultPortraitMode } = useMemo(getMobileDeviceInfo, []) useEffect(() => { const api = (window as any).api @@ -52,8 +52,8 @@ function MainContent(): React.JSX.Element { const [authVisible, setAuthVisible] = useState(false) const [authPassword, setAuthPassword] = useState("") const [authLoading, setAuthLoading] = useState(false) - const [isPortraitMode, setIsPortraitMode] = useState(isIosPhone) - const [sidebarCollapsed, setSidebarCollapsed] = useState(isIosPhone) + const [isPortraitMode, setIsPortraitMode] = useState(defaultPortraitMode) + const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultPortraitMode) const [floatingSidebarExpanded, setFloatingSidebarExpanded] = useState(false) const [syncConflictVisible, setSyncConflictVisible] = useState(false) const [syncConflicts, setSyncConflicts] = useState< @@ -347,7 +347,7 @@ function MainContent(): React.JSX.Element { hasAnyPassword={hasAnyPassword} onAuthClick={() => setAuthVisible(true)} onLogout={logout} - showWindowControls={!isIosDevice} + showWindowControls={!isIosDevice && !isAndroidDevice} isPortraitMode={isPortraitMode} sidebarCollapsed={sidebarCollapsed} floatingExpand={isPortraitMode} @@ -519,6 +519,20 @@ function getIosDeviceInfo(): { isIosDevice: boolean; isIosPhone: boolean } { isIosPhone: isIosDevice && !isIosTablet, } } + +function getMobileDeviceInfo(): { + isIosDevice: boolean + isAndroidDevice: boolean + defaultPortraitMode: boolean +} { + const { isIosDevice, isIosPhone } = getIosDeviceInfo() + const isAndroidDevice = navigator.userAgent.toLowerCase().includes("android") + return { + isIosDevice, + isAndroidDevice, + defaultPortraitMode: isIosPhone || isAndroidDevice, + } +} function App(): React.JSX.Element { return ( diff --git a/src/assets/main.css b/src/assets/main.css index c64bf4b..9fc0c22 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -58,6 +58,10 @@ html.platform-ios #root { min-height: 0; } +html.platform-android { + --ss-safe-area-top: max(env(safe-area-inset-top, 0px), 24px); +} + input, textarea { user-select: text; diff --git a/src/main.tsx b/src/main.tsx index 1a4ad95..ecee74f 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -129,6 +129,7 @@ disableTouchZoom() const platform = navigator.userAgent.toLowerCase() const isAppleTouchDevice = platform.includes("macintosh") && navigator.maxTouchPoints > 1 const isIos = /iphone|ipad|ipod/.test(platform) || isAppleTouchDevice +const isAndroid = platform.includes("android") const isMacDesktop = platform.includes("mac") && !isIos if (isMacDesktop) { @@ -139,6 +140,10 @@ if (isIos) { document.documentElement.classList.add("platform-ios") } +if (isAndroid) { + document.documentElement.classList.add("platform-android") +} + window.addEventListener("error", (e: any) => { const error = e?.error safeWriteLog({