d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-02-24 01:27:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: pwa mode and mobile safe area padding

Browse Source
This commit is contained in:
simosmik
2026-02-18 07:32:39 +00:00
parent e853d29584
commit 07f1d9a4a8
5 changed files with 4 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/SetupForm.jsx
View File

@@ -1,7 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useAuth } from '../contexts/AuthContext'; import { useAuth } from '../contexts/AuthContext';
import ClaudeLogo from './ClaudeLogo';
const SetupForm = () => { const SetupForm = () => {
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
@@ -48,7 +46,7 @@ const SetupForm = () => {
{/* Logo and Title */} {/* Logo and Title */}
<div className="text-center"> <div className="text-center">
<div className="flex justify-center mb-4"> <div className="flex justify-center mb-4">
<ClaudeLogo size={64} /> <img src="/logo.svg" alt="CloudCLI" className="w-16 h-16" />
</div> </div>
<h1 className="text-2xl font-bold text-foreground">Welcome to Claude Code UI</h1> <h1 className="text-2xl font-bold text-foreground">Welcome to Claude Code UI</h1>
<p className="text-muted-foreground mt-2"> <p className="text-muted-foreground mt-2">

2
src/components/sidebar/view/subcomponents/SidebarContent.tsx
View File

@@ -50,7 +50,7 @@ export default function SidebarContent({
return ( return (
<div <div
className="h-full flex flex-col bg-background/80 backdrop-blur-sm md:select-none md:w-72" className="h-full flex flex-col bg-background/80 backdrop-blur-sm md:select-none md:w-72"
style={isPWA && isMobile ? { paddingTop: '44px' } : {}} style={{}}
> >
<SidebarHeader <SidebarHeader
isPWA={isPWA} isPWA={isPWA}

2
src/components/sidebar/view/subcomponents/SidebarFooter.tsx
View File

@@ -20,7 +20,7 @@ export default function SidebarFooter({
t, t,
}: SidebarFooterProps) { }: SidebarFooterProps) {
return ( return (
<div className="flex-shrink-0"> <div className="flex-shrink-0" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0)' }}>
{/* Update banner */} {/* Update banner */}
{updateAvailable && ( {updateAvailable && (
<> <>

2
src/components/sidebar/view/subcomponents/SidebarHeader.tsx
View File

@@ -49,7 +49,7 @@ export default function SidebarHeader({
{/* Desktop header */} {/* Desktop header */}
<div <div
className="hidden md:block px-3 pt-3 pb-2" className="hidden md:block px-3 pt-3 pb-2"
style={isPWA && isMobile ? { paddingTop: '44px' } : {}} style={{}}
> >
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
{IS_PLATFORM ? ( {IS_PLATFORM ? (

7
src/index.css
View File

@@ -159,14 +159,7 @@
} }
/* PWA mode detected by JavaScript - more reliable */ /* PWA mode detected by JavaScript - more reliable */
html.pwa-mode,
body.pwa-mode {
height: 100%;
overflow: hidden;
}
body.pwa-mode #root { body.pwa-mode #root {
padding-top: var(--header-total-padding);
padding-left: var(--safe-area-inset-left); padding-left: var(--safe-area-inset-left);
padding-right: var(--safe-area-inset-right); padding-right: var(--safe-area-inset-right);
height: 100vh; height: 100vh;