Skip to content

Fix mobile button sizes not responding to viewport #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alari76 merged 1 commit into from
Mar 9, 2026
Merged

Fix mobile button sizes not responding to viewport #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/components/InputBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ export const InputBar = forwardRef<InputBarHandle, InputBarProps>(function Input
onChange={handleFileChange}
className="hidden"
/>
<div className="flex flex-shrink-0 flex-row items-end gap-1 pb-0.5">
<div className={`flex flex-shrink-0 flex-row items-end ${isMobile ? 'gap-2' : 'gap-1'} pb-0.5`}>
{currentModel && onModelChange && (
<div className="relative">
<button
Expand Down Expand Up @@ -216,10 +216,10 @@ export const InputBar = forwardRef<InputBarHandle, InputBarProps>(function Input
<button
onClick={() => setSkillMenuOpen(!skillMenuOpen)}
disabled={disabled}
className="flex items-center justify-center rounded p-1 text-neutral-3 hover:text-neutral-1 hover:bg-neutral-7 transition-colors disabled:opacity-30"
className={`flex items-center justify-center rounded ${isMobile ? 'p-2.5 min-w-[44px] min-h-[44px]' : 'p-1'} text-neutral-3 hover:text-neutral-1 hover:bg-neutral-7 transition-colors disabled:opacity-30`}
title="Claude Skills"
>
<IconTerminal2 size={20} stroke={2} />
<IconTerminal2 size={isMobile ? 24 : 20} stroke={2} />
</button>
{skillMenuOpen && (
<SkillMenu
Expand All @@ -237,22 +237,22 @@ export const InputBar = forwardRef<InputBarHandle, InputBarProps>(function Input
<button
onClick={handleFileSelect}
disabled={disabled}
className="flex items-center justify-center rounded p-1 text-neutral-3 hover:text-neutral-1 hover:bg-neutral-7 transition-colors disabled:opacity-30"
className={`flex items-center justify-center rounded ${isMobile ? 'p-2.5 min-w-[44px] min-h-[44px]' : 'p-1'} text-neutral-3 hover:text-neutral-1 hover:bg-neutral-7 transition-colors disabled:opacity-30`}
title="Attach files"
>
<IconPaperclip size={20} stroke={2} />
<IconPaperclip size={isMobile ? 24 : 20} stroke={2} />
</button>
<button
onClick={handleSend}
disabled={disabled || (!value.trim() && pendingFiles.length === 0)}
className={`flex items-center justify-center rounded p-1 transition-colors disabled:opacity-30 ${
className={`flex items-center justify-center rounded ${isMobile ? 'p-2.5 min-w-[44px] min-h-[44px]' : 'p-1'} transition-colors disabled:opacity-30 ${
value.trim() || pendingFiles.length > 0
? 'bg-primary-8 text-neutral-1 hover:bg-primary-7'
: 'text-neutral-5'
}`}
title="Send (Enter)"
>
<IconSend size={20} stroke={2} />
<IconSend size={isMobile ? 24 : 20} stroke={2} />
</button>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/PromptButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ interface PromptButtonsProps {
/** Sticky prompt bar for permission approvals, single/multi-select questions, and multi-question AskUserQuestion flows. */
export function PromptButtons({ options, question, multiSelect, promptType, questions, approvePattern, onSelect, isMobile = false }: PromptButtonsProps) {
const isPermission = promptType === 'permission'
const btnPad = isMobile ? 'px-4 py-2 text-[14px]' : 'px-3 py-0.5 text-[13px]'
const btnPad = isMobile ? 'px-5 py-3 text-[15px] min-h-[44px]' : 'px-3 py-0.5 text-[13px]'

// Auto-allow countdown for permission prompts
const [timeLeft, setTimeLeft] = useState(15)
Expand Down Expand Up @@ -134,7 +134,7 @@ export function PromptButtons({ options, question, multiSelect, promptType, ques
{displayQuestion}
</p>
)}
<div className="flex flex-wrap items-center gap-1.5">
<div className={`flex flex-wrap items-center ${isMobile ? 'gap-2.5' : 'gap-1.5'}`}>
{displayOptions.map((opt) => (
<button
key={opt.value}
Expand Down
Loading