feat: maximize mobile typing space on editor focus

- Hide main header on mobile when focused to bring editor to top.
- Hide fixed mobile save button on focus to reduce clutter.
- Increase textarea height and bottom padding on focus for better keyboard clearance.
- Use 'lg:' prefixes to ensure zero impact on PC layout.
- Maintain 100% line coverage with updated tests.
- Hide coverage directory in .gitignore.
- Add App.vue test to ensure full project coverage.

Co-authored-by: freddiefujiwara <16923+freddiefujiwara@users.noreply.github.com>

Author: google-labs-jules[bot]

src/views/EditorView.test.js

@@ -76,9 +76,11 @@ describe("EditorView", () => {
     // Focus
     await textarea.dispatchEvent(new Event("focus"));
     await nextTick();
-    expect(header.classList.contains("relative")).toBe(true);
+    expect(header.classList.contains("hidden")).toBe(true);
+    expect(header.classList.contains("lg:block")).toBe(true);
+    expect(container.querySelector(".fixed.bottom-24")).toBeNull();
     expect(spacer.classList.contains("h-96")).toBe(true);
-    expect(textarea.classList.contains("pb-[30dvh]")).toBe(true);
+    expect(textarea.classList.contains("pb-[40dvh]")).toBe(true);
 
     // Blur
     await textarea.dispatchEvent(new Event("blur"));

src/views/EditorView.vue

@@ -234,7 +234,7 @@ defineExpose(
   <div class="min-h-dvh bg-slate-50 text-slate-900">
     <header
       class="z-10 bg-white/90 backdrop-blur border-b border-slate-200 transition-all lg:sticky lg:top-0"
-      :class="isFocused ? 'relative' : 'sticky top-0'"
+      :class="isFocused ? 'hidden lg:block' : 'sticky top-0'"
     >
       <div class="max-w-6xl mx-auto px-3 py-2 flex flex-wrap gap-2 items-center">
         <div class="flex gap-2 flex-wrap">
@@ -308,7 +308,7 @@ defineExpose(
           @focus="isFocused = true"
           @blur="isFocused = false"
           class="w-full h-[45dvh] lg:h-[75dvh] p-4 font-mono text-sm outline-none resize-none bg-transparent transition-all"
-          :class="isFocused ? 'h-[60dvh] lg:h-[75dvh] pb-[30dvh] lg:pb-4' : ''"
+          :class="isFocused ? 'h-[80dvh] lg:h-[75dvh] pb-[40dvh] lg:pb-4' : ''"
         />
       </section>
 
@@ -346,7 +346,7 @@ defineExpose(
     <MarkdownToolbar :target-ref="markdownTextareaRef" />
 
     <!-- Mobile save button at the bottom. -->
-    <div class="lg:hidden fixed bottom-24 left-4 right-4 z-20">
+    <div class="lg:hidden fixed bottom-24 left-4 right-4 z-20" v-if="!isFocused">
       <button
         class="w-full py-4 rounded-2xl bg-emerald-600 text-white font-bold shadow-xl hover:bg-emerald-700 disabled:opacity-60 transition-all"
         :disabled="exporting"