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

style(ui): remove inline styles in favor of Tailwind classes

Browse Source 
Replace inline height calculations and conditional PWA padding with
standardized Tailwind utilities (h-full) for improved consistency and
maintainability. Simplifies responsive layout by removing device-
specific style adjustments while maintaining visual appearance.
This commit is contained in:
simos
2025-11-07 03:51:44 +00:00
parent 51431832d8
commit 69b7b59f00
2 changed files with 5 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.jsx
View File

@@ -744,7 +744,7 @@ function AppContent() {
{/* Fixed Desktop Sidebar */} {/* Fixed Desktop Sidebar */}
{!isMobile && ( {!isMobile && (
<div <div
className={`flex-shrink-0 border-r border-border bg-card transition-all duration-300 ${ className={`h-full flex-shrink-0 border-r border-border bg-card transition-all duration-300 ${
sidebarVisible ? 'w-80' : 'w-14' sidebarVisible ? 'w-80' : 'w-14'
}`} }`}
> >
@@ -838,10 +838,9 @@ function AppContent() {
aria-label="Close sidebar" aria-label="Close sidebar"
/> />
<div <div
className={`relative w-[85vw] max-w-sm sm:w-80 bg-card border-r border-border transform transition-transform duration-150 ease-out ${ className={`relative w-[85vw] max-w-sm sm:w-80 h-full bg-card border-r border-border transform transition-transform duration-150 ease-out ${
sidebarOpen ? 'translate-x-0' : '-translate-x-full' sidebarOpen ? 'translate-x-0' : '-translate-x-full'
}`} }`}
style={{ height: 'calc(100vh - 80px)' }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onTouchStart={(e) => e.stopPropagation()} onTouchStart={(e) => e.stopPropagation()}
> >

2
src/components/Sidebar.jsx
View File

@@ -467,7 +467,6 @@ function Sidebar({
<div <div
className="h-full flex flex-col bg-card md:select-none" className="h-full flex flex-col bg-card md:select-none"
style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
> >
{/* Header */} {/* Header */}
<div className="md:p-4 md:border-b md:border-border"> <div className="md:p-4 md:border-b md:border-border">
@@ -505,7 +504,6 @@ function Sidebar({
{/* Mobile Header */} {/* Mobile Header */}
<div <div
className="md:hidden p-3 border-b border-border" className="md:hidden p-3 border-b border-border"
style={isPWA && isMobile ? { paddingTop: '16px' } : {}}
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">