From 07f1d9a4a8dbb9770535e415de8230f6ec309061 Mon Sep 17 00:00:00 2001
From: simosmik <simosmik@gmail.com>
Date: Wed, 18 Feb 2026 07:32:39 +0000
Subject: [PATCH] fix: pwa mode and mobile safe area padding

---
 src/components/SetupForm.jsx                               | 4 +---
 .../sidebar/view/subcomponents/SidebarContent.tsx          | 2 +-
 .../sidebar/view/subcomponents/SidebarFooter.tsx           | 2 +-
 .../sidebar/view/subcomponents/SidebarHeader.tsx           | 2 +-
 src/index.css                                              | 7 -------
 5 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/components/SetupForm.jsx b/src/components/SetupForm.jsx
index f1aa497..4f41d0b 100644
--- a/src/components/SetupForm.jsx
+++ b/src/components/SetupForm.jsx
@@ -1,7 +1,5 @@
 import React, { useState } from 'react';
 import { useAuth } from '../contexts/AuthContext';
-import ClaudeLogo from './ClaudeLogo';
-
 const SetupForm = () => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
@@ -48,7 +46,7 @@ const SetupForm = () => {
           {/* Logo and Title */}
           <div className="text-center">
             <div className="flex justify-center mb-4">
-              <ClaudeLogo size={64} />
+              <img src="/logo.svg" alt="CloudCLI" className="w-16 h-16" />
             </div>
             <h1 className="text-2xl font-bold text-foreground">Welcome to Claude Code UI</h1>
             <p className="text-muted-foreground mt-2">
diff --git a/src/components/sidebar/view/subcomponents/SidebarContent.tsx b/src/components/sidebar/view/subcomponents/SidebarContent.tsx
index 5741925..ffafb2d 100644
--- a/src/components/sidebar/view/subcomponents/SidebarContent.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarContent.tsx
@@ -50,7 +50,7 @@ export default function SidebarContent({
   return (
     <div
       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
         isPWA={isPWA}
diff --git a/src/components/sidebar/view/subcomponents/SidebarFooter.tsx b/src/components/sidebar/view/subcomponents/SidebarFooter.tsx
index a6f845e..9873a09 100644
--- a/src/components/sidebar/view/subcomponents/SidebarFooter.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarFooter.tsx
@@ -20,7 +20,7 @@ export default function SidebarFooter({
   t,
 }: SidebarFooterProps) {
   return (
-    <div className="flex-shrink-0">
+    <div className="flex-shrink-0" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0)' }}>
       {/* Update banner */}
       {updateAvailable && (
         <>
diff --git a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
index c434002..e79700f 100644
--- a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
+++ b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx
@@ -49,7 +49,7 @@ export default function SidebarHeader({
       {/* Desktop header */}
       <div
         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">
           {IS_PLATFORM ? (
diff --git a/src/index.css b/src/index.css
index a418694..7b8c097 100644
--- a/src/index.css
+++ b/src/index.css
@@ -159,14 +159,7 @@
   }
 
   /* PWA mode detected by JavaScript - more reliable */
-  html.pwa-mode,
-  body.pwa-mode {
-    height: 100%;
-    overflow: hidden;
-  }
-
   body.pwa-mode #root {
-    padding-top: var(--header-total-padding);
     padding-left: var(--safe-area-inset-left);
     padding-right: var(--safe-area-inset-right);
     height: 100vh;