aaron/aaronai-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile fixes — safe area insets, settings SVG icon, input overflow

Browse Source
This commit is contained in:
Aaron Nelson
2026-04-26 06:53:24 +00:00
parent cd8377743d
commit b9cadf6b0a
2 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/page.tsx
+7 -4
View File
@@ -82,8 +82,8 @@ export default function Home() {
> >
{/* Topbar */} {/* Topbar */}
<div <div
className="flex items-center justify-between px-4 py-3 flex-shrink-0" className="flex items-center justify-between px-4 flex-shrink-0"
style={{ borderBottom: '1px solid var(--border)' }} style={{ borderBottom: '1px solid var(--border)', paddingTop: 'max(12px, env(safe-area-inset-top))', paddingBottom: '12px' }}
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{/* Sidebar toggle */} {/* Sidebar toggle */}
@@ -106,10 +106,13 @@ export default function Home() {
</div> </div>
<button <button
onClick={() => setSettingsOpen(!settingsOpen)} onClick={() => setSettingsOpen(!settingsOpen)}
style={{ color: settingsOpen ? 'var(--accent)' : 'var(--text3)', background: 'none', border: 'none', cursor: 'pointer', padding: '4px', borderRadius: '6px', fontSize: '18px' }} style={{ color: settingsOpen ? 'var(--accent)' : 'var(--text3)', background: 'none', border: 'none', cursor: 'pointer', padding: '6px', borderRadius: '6px', lineHeight: 1 }}
aria-label="Settings" aria-label="Settings"
> >
⚙ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="3"/>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
</svg>
</button> </button>
</div> </div>
components/MessageInput.tsx
+10 -4
View File
@@ -110,8 +110,14 @@ export default function MessageInput() {
return ( return (
<div <div
className="flex gap-2 items-end px-4 py-3 flex-shrink-0" className="flex gap-2 items-end flex-shrink-0"
style={{ borderTop: '1px solid var(--border)' }} style={{
borderTop: '1px solid var(--border)',
padding: '12px 16px',
paddingBottom: 'max(12px, env(safe-area-inset-bottom))',
paddingLeft: 'max(16px, env(safe-area-inset-left))',
paddingRight: 'max(16px, env(safe-area-inset-right))',
}}
> >
{/* Voice button */} {/* Voice button */}
<button <button
@@ -138,7 +144,7 @@ export default function MessageInput() {
{/* Text input */} {/* Text input */}
<div <div
className="flex-1 rounded-xl" className="flex-1 rounded-xl min-w-0 overflow-hidden"
style={{ background: 'var(--bg2)', border: '1px solid var(--border2)' }} style={{ background: 'var(--bg2)', border: '1px solid var(--border2)' }}
> >
<textarea <textarea
@@ -148,7 +154,7 @@ export default function MessageInput() {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
placeholder="Ask anything... (Shift+Enter for new line)" placeholder="Ask anything... (Shift+Enter for new line)"
rows={1} rows={1}
className="w-full block resize-none outline-none bg-transparent px-3 py-3 leading-relaxed" className="w-full block resize-none outline-none bg-transparent px-3 py-3 leading-relaxed min-w-0"
style={{ style={{
fontSize: 'var(--font-size)', fontSize: 'var(--font-size)',
color: 'var(--text)', color: 'var(--text)',