feat(mobile): add keyboard avoidance for input area

This commit is contained in:
Bohdan Triapitsyn
2026-01-01 16:02:41 +02:00
parent 10e64b4f90
commit 2f2c127f13
21 changed files with 100 additions and 24 deletions
@@ -266,7 +266,7 @@ export const AgentsPage: React.FC = () => {
}
return (
<ScrollableOverlay outerClassName="h-full" className="w-full">
<ScrollableOverlay keyboardAvoid outerClassName="h-full" className="w-full">
<div className="mx-auto max-w-3xl space-y-6 p-6">
{/* Header */}
<div className="space-y-1">
@@ -122,8 +122,8 @@ export const CommandsPage: React.FC = () => {
}
return (
<ScrollableOverlay outerClassName="h-full" className="w-full">
<div className="mx-auto max-w-3xl space-y-6 p-6">
<ScrollableOverlay keyboardAvoid outerClassName="h-full" className="w-full">
<div className="mx-auto max-w-3xl space-y-6 p-6">
{/* Header */}
<div className="space-y-1">
<h1 className="typography-ui-header font-semibold text-lg">
@@ -21,6 +21,7 @@ export const OpenChamberPage: React.FC<OpenChamberPageProps> = ({ section }) =>
if (!section) {
return (
<ScrollableOverlay
keyboardAvoid
outerClassName="h-full"
className="openchamber-page-body mx-auto max-w-3xl space-y-3 p-3 sm:space-y-6 sm:p-6"
>
@@ -56,6 +57,7 @@ export const OpenChamberPage: React.FC<OpenChamberPageProps> = ({ section }) =>
return (
<ScrollableOverlay
keyboardAvoid
outerClassName="h-full"
className="openchamber-page-body mx-auto max-w-3xl space-y-6 p-3 sm:p-6"
>
@@ -732,7 +732,7 @@ export const ProvidersPage: React.FC = () => {
});
return (
<ScrollableOverlay outerClassName="h-full" className="w-full">
<ScrollableOverlay keyboardAvoid outerClassName="h-full" className="w-full">
<div className="mx-auto max-w-3xl space-y-6 p-6">
<div className="space-y-1">
<div className="flex items-center gap-2">
@@ -363,7 +363,7 @@ export const SkillsPage: React.FC = () => {
}
return (
<ScrollableOverlay outerClassName="h-full" className="w-full">
<ScrollableOverlay keyboardAvoid outerClassName="h-full" className="w-full">
<div className="mx-auto max-w-3xl space-y-6 p-6">
{isNewSkill ? modeTabs : null}
@@ -558,7 +558,7 @@ export const SkillsPage: React.FC = () => {
setIsFileDialogOpen(open);
if (!open) setEditingFilePath(null);
}}>
<DialogContent className="max-w-2xl max-h-[85vh] flex flex-col">
<DialogContent className="max-w-2xl max-h-[85vh] flex flex-col" keyboardAvoid>
<DialogHeader className="flex-shrink-0">
<DialogTitle>{editingFilePath ? 'Edit Supporting File' : 'Add Supporting File'}</DialogTitle>
<DialogDescription>
@@ -224,7 +224,7 @@ export const AddCatalogDialog: React.FC<AddCatalogDialogProps> = ({ open, onOpen
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-xl">
<DialogContent className="max-w-xl" keyboardAvoid>
<DialogHeader>
<DialogTitle>Add skills catalog</DialogTitle>
<DialogDescription>
@@ -93,7 +93,7 @@ export const InstallSkillDialog: React.FC<InstallSkillDialogProps> = ({ open, on
return (
<>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-lg">
<DialogContent className="max-w-lg" keyboardAvoid>
<DialogHeader>
<DialogTitle>Install skill</DialogTitle>
<DialogDescription>
@@ -121,7 +121,7 @@ export const SkillsCatalogPage: React.FC<SkillsCatalogPageProps> = ({ mode, onMo
};
return (
<ScrollableOverlay outerClassName="h-full" className="w-full">
<ScrollableOverlay keyboardAvoid outerClassName="h-full" className="w-full">
<div className="mx-auto max-w-3xl space-y-6 p-6">
<div className="space-y-3">
<AnimatedTabs