d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2025-12-13 21:59:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: standardize mobile navigation spacing with Tailwind utility

Browse Source
This commit is contained in:
simos
2025-11-06 20:31:32 +00:00
parent 289c2334e0
commit 1e50cfdad6
7 changed files with 12 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.jsx
View File

@@ -871,7 +871,7 @@ function AppContent() {
)}
{/* Main Content Area - Flexible */}
<div className={`flex-1 flex flex-col min-w-0 ${isMobile && !isInputFocused ? 'pb-16' : ''}`}>
<div className={`flex-1 flex flex-col min-w-0 ${isMobile && !isInputFocused ? 'pb-mobile-nav' : ''}`}>
<MainContent
selectedProject={selectedProject}
selectedSession={selectedSession}

9
src/components/ChatInterface.jsx
View File

@@ -4743,7 +4743,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
</svg>
</button>
{/* Hint text inside input box at bottom */}
{/* Hint text inside input box at bottom - Desktop only */}
<div className={`absolute bottom-1 left-12 right-14 sm:right-40 text-xs text-gray-400 dark:text-gray-500 pointer-events-none hidden sm:block transition-opacity duration-200 ${
input.trim() ? 'opacity-0' : 'opacity-100'
}`}>
@@ -4751,13 +4751,6 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
? "Ctrl+Enter to send • Shift+Enter for new line • Tab to change modes • / for slash commands"
: "Enter to send • Shift+Enter for new line • Tab to change modes • / for slash commands"}
</div>
<div className={`absolute bottom-1 left-12 right-14 text-xs text-gray-400 dark:text-gray-500 pointer-events-none sm:hidden transition-opacity duration-200 ${
isInputFocused && !input.trim() ? 'opacity-100' : 'opacity-0'
}`}>
{sendByCtrlEnter
? "Ctrl+Enter to send • Tab for modes • / for commands"
: "Enter to send • Tab for modes • / for commands"}
</div>
</div>
</form>
</div>

4
src/components/GitPanel.jsx
View File

@@ -1156,7 +1156,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
{/* File List - Changes View - Only show when git is available */}
{activeView === 'changes' && !gitStatus?.error && (
<div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-20' : ''}`}>
<div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
{isLoading ? (
<div className="flex items-center justify-center h-32">
<RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
@@ -1179,7 +1179,7 @@ function GitPanel({ selectedProject, isMobile, onFileOpen }) {
{/* History View - Only show when git is available */}
{activeView === 'history' && !gitStatus?.error && (
<div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-20' : ''}`}>
<div className={`flex-1 overflow-y-auto ${isMobile ? 'pb-mobile-nav' : ''}`}>
{isLoading ? (
<div className="flex items-center justify-center h-32">
<RefreshCw className="w-6 h-6 animate-spin text-gray-400" />

2
src/components/QuickSettingsPanel.jsx
View File

@@ -85,7 +85,7 @@ const QuickSettingsPanel = ({
</div>
{/* Settings Content */}
<div className={`flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6 bg-white dark:bg-gray-900 ${isMobile ? 'pb-20' : ''}`}>
<div className={`flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6 bg-white dark:bg-gray-900 ${isMobile ? 'pb-mobile-nav' : ''}`}>
{/* Appearance Settings */}
<div className="space-y-2">
<h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Appearance</h4>

2
src/components/Sidebar.jsx
View File

@@ -1308,7 +1308,7 @@ function Sidebar({
{/* Settings Section */}
<div className="md:p-2 md:border-t md:border-border flex-shrink-0">
{/* Mobile Settings */}
<div className="md:hidden p-4 pb-20 border-t border-border/50">
<div className="md:hidden p-4 pb-mobile-nav border-t border-border/50">
<button
className="w-full h-14 bg-muted/50 hover:bg-muted/70 rounded-2xl flex items-center justify-start gap-4 px-4 active:scale-[0.98] transition-all duration-150"
onClick={onShowSettings}

5
src/index.css
View File

@@ -49,6 +49,11 @@
--safe-area-inset-right: env(safe-area-inset-right);
--safe-area-inset-bottom: env(safe-area-inset-bottom);
--safe-area-inset-left: env(safe-area-inset-left);
/* Mobile navigation dimensions - Single source of truth */
--mobile-nav-height: 60px;
--mobile-nav-padding: 12px;
--mobile-nav-total: calc(var(--mobile-nav-height) + max(env(safe-area-inset-bottom, 0px), var(--mobile-nav-padding)));
}
/* Fallback for older iOS versions */

1
tailwind.config.js
View File

@@ -56,6 +56,7 @@ export default {
},
spacing: {
'safe-area-inset-bottom': 'env(safe-area-inset-bottom)',
'mobile-nav': 'var(--mobile-nav-total)',
},
},
},