feat(题目): 手机上「运行例子 / 提交」固定在屏幕底部，看着题目也能直接交

- 两个 44px 高的大按钮固定在底部，三个页签下都在；原来它们在「代码」页签顶上，
  和语言、更多挤成两行，看着题面想交一次还得先切回代码页签
- 「代码」页签的编辑器一直挂着（原来切走就卸载）：没打开过代码页签也能交，撤销历史也不丢
- 编辑器高度让出底部那条，最后几行不再被按钮盖住

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/oj/problem/detail.vue

@@ -30,6 +30,7 @@ const ProblemEditor = defineAsyncComponent(loadProblemEditor)
 const ProblemContent = defineAsyncComponent(() => import("./components/ProblemContent.vue"))
 const ProblemDrawer = defineAsyncComponent(() => import("./components/ProblemDrawer.vue"))
 const ResultPane = defineAsyncComponent(() => import("./components/ResultPane.vue"))
+const MobileActionBar = defineAsyncComponent(() => import("./components/MobileActionBar.vue"))
 
 interface Props {
   problemID: string
@@ -256,14 +257,18 @@ onBeforeUnmount(() => {
       </template>
     </n-split>
 
-    <!-- Mobile -->
-    <template v-else>
+    <!-- Mobile：底部固定「运行例子 / 提交」，内容底下留出它的高度 -->
+    <div v-else class="mobile">
       <ContextBar />
       <n-tabs v-model:value="currentTab" type="segment">
         <n-tab-pane name="content" tab="题目">
           <ProblemContent />
         </n-tab-pane>
-        <n-tab-pane name="editor" tab="代码">
+        <!--
+          编辑器一直挂着（show，不是默认的 if）：底部的「提交」在三个页签下都能点，
+          没切到过「代码」页签的话草稿就没读进来、按钮是灰的；切走就卸载还会丢掉撤销历史
+        -->
+        <n-tab-pane name="editor" tab="代码" display-directive="show">
           <ProblemEditor />
         </n-tab-pane>
         <n-tab-pane name="result" :tab="resultTab" display-directive="show:lazy">
@@ -276,12 +281,17 @@ onBeforeUnmount(() => {
         </template>
       </n-tabs>
       <ProblemDrawer v-model="drawer" />
-    </template>
+      <MobileActionBar />
+    </div>
   </template>
   <n-empty v-else :description="errMsg"></n-empty>
 </template>
 
 <style scoped>
+.mobile {
+  padding-bottom: calc(72px + env(safe-area-inset-bottom));
+}
+
 .left-pane {
   position: relative;
   height: 100%;