feat: mobile layout for tool-first flow

apps/web/src/pages/tool-page.tsx

@@ -4,6 +4,7 @@ import {
   CheckCircle2,
   ChevronLeft,
   ChevronRight,
+  ChevronUp,
   Download,
   FileImage,
   Loader2,
@@ -508,7 +509,8 @@ export function ToolPage() {
   if (isAiTool && !toolInstalled && featureBundle) {
     return (
       <AppLayout breadcrumb={breadcrumb}>
-        <div className="flex-1 flex items-center justify-center overflow-y-auto bg-muted/20">
+        <div className="flex-1 overflow-y-auto bg-muted/20">
+          <div className="flex items-center justify-center min-h-full">
             <FeatureInstallPrompt
               bundle={featureBundle}
               isAdmin={isAdmin}
@@ -516,6 +518,7 @@ export function ToolPage() {
               toolDescription={tool?.description}
             />
           </div>
+        </div>
       </AppLayout>
     );
   }
@@ -972,7 +975,8 @@ export function ToolPage() {
     if (!hasFile && !isNoDropzone) {
       return (
         <AppLayout breadcrumb={breadcrumb}>
-          <div className="flex-1 flex items-center justify-center overflow-y-auto bg-muted/20">
+          <div className="flex-1 overflow-y-auto bg-muted/20">
+            <div className="flex items-center justify-center min-h-full">
               <ToolDropzone
                 tool={tool}
                 accept={toolAccept}
@@ -982,6 +986,7 @@ export function ToolPage() {
                 onUrlImport={handleUrlImport}
               />
             </div>
+          </div>
         </AppLayout>
       );
     }
@@ -1053,6 +1058,21 @@ export function ToolPage() {
             )}
           </section>
 
+          {/* Peek bar -- visible when bottom sheet is collapsed */}
+          {!mobileSettingsOpen && (
+            <button
+              type="button"
+              onClick={() => setMobileSettingsOpen(true)}
+              className="shrink-0 border-t border-border bg-background px-4 py-3 flex items-center justify-between"
+            >
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-1 rounded-full bg-muted-foreground/30" />
+                <span className="text-sm font-medium text-foreground">{t.common.process}</span>
+              </div>
+              <ChevronUp className="h-4 w-4 text-muted-foreground" />
+            </button>
+          )}
+
           {/* Settings BottomSheet */}
           <BottomSheet
             open={mobileSettingsOpen}
@@ -1070,7 +1090,8 @@ export function ToolPage() {
   if (!hasFile && !isNoDropzone) {
     return (
       <AppLayout breadcrumb={breadcrumb}>
-        <div className="flex-1 flex items-center justify-center overflow-y-auto bg-muted/20">
+        <div className="flex-1 overflow-y-auto bg-muted/20">
+          <div className="flex items-center justify-center min-h-full">
             <ToolDropzone
               tool={tool}
               accept={toolAccept}
@@ -1080,6 +1101,7 @@ export function ToolPage() {
               onUrlImport={handleUrlImport}
             />
           </div>
+        </div>
       </AppLayout>
     );
   }