diff --git a/frontend/src/MvpPanel.vue b/frontend/src/MvpPanel.vue
index 23b1d0a..13e2e21 100644
--- a/frontend/src/MvpPanel.vue
+++ b/frontend/src/MvpPanel.vue
@@ -390,7 +390,8 @@ onBeforeUnmount(() => {
           <button class="drag-handle habit-drag-handle" :disabled="hideCompletedHabits" aria-label="上下拖动习惯排序" title="上下拖动排序" @pointerdown.stop="startHabitReorder(h, $event)" @pointermove.stop="moveHabitReorder(h, $event)" @pointerup.stop="finishHabitReorder(h, $event)" @pointercancel.stop="cancelHabitReorder"><GripVertical/></button>
           <button class="task-check habit-check" :aria-label="isDone(h, todayKey) ? `减少${h.name}一次` : `完成${h.name}一次`" :aria-pressed="isDone(h, todayKey)" @click.stop="toggleHabitFromButton(h)"><span class="task-check-mark"><Check v-if="isDone(h, todayKey)" /></span></button>
           <div class="habit-main">
-            <span><span class="habit-name">{{ h.name }}</span><small v-if="habitProgressText(h)">{{ habitProgressText(h) }}</small></span>
+            <span class="habit-name">{{ h.name }}</span>
+            <small v-if="habitProgressText(h)" class="habit-progress">{{ habitProgressText(h) }}</small>
           </div>
         </article>
         <div v-if="!visibleTodayHabits.length && !busy" class="empty-panel today-empty-panel"><span>{{ hideCompletedHabits && todayHabits.length ? '已完成的习惯已隐藏。' : '今天没有安排习惯，轻松一下吧。' }}</span><button v-if="!hideCompletedHabits || !todayHabits.length" class="soft-button empty-action" @click="openHabitComposer"><Check/>添加习惯</button></div>
@@ -415,7 +416,8 @@ onBeforeUnmount(() => {
           <button class="drag-handle habit-drag-handle" :disabled="hideCompletedHabits" aria-label="上下拖动习惯排序" title="上下拖动排序" @pointerdown.stop="startHabitReorder(h, $event)" @pointermove.stop="moveHabitReorder(h, $event)" @pointerup.stop="finishHabitReorder(h, $event)" @pointercancel.stop="cancelHabitReorder"><GripVertical/></button>
           <button class="task-check habit-check" :aria-label="isDone(h, todayKey) ? `减少${h.name}一次` : `完成${h.name}一次`" :aria-pressed="isDone(h, todayKey)" @click.stop="toggleHabitFromButton(h)"><span class="task-check-mark"><Check v-if="isDone(h, todayKey)" /></span></button>
           <div class="habit-main">
-            <span><span class="habit-name">{{ h.name }}</span><small v-if="habitProgressText(h)">{{ habitProgressText(h) }}</small></span>
+            <span class="habit-name">{{ h.name }}</span>
+            <small v-if="habitProgressText(h)" class="habit-progress">{{ habitProgressText(h) }}</small>
           </div>
           <button class="icon ghost" aria-label="归档习惯" @click="archiveHabit(h)"><Trash2 /></button>
         </article>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 59fce3e..591faf3 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -18,7 +18,7 @@ main{min-width:0;padding:27px 34px 50px;overflow:auto;background:linear-gradient
 .habit-row.swipeable:not([style*="0px"]){transition:none}
 .habit-main{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;background:transparent;padding:13px 4px;text-align:left;border-radius:10px}
 .habit-name{font-size:15px;font-weight:700;color:#3c372f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.habit-main>span:first-child{display:grid;gap:3px}.habit-main small{font-size:11px;color:var(--muted)}
+.habit-progress{margin-left:auto;flex:0 0 auto;font-size:11px;color:var(--muted);white-space:nowrap}
 .habit-row.done .habit-name{color:var(--accent);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:#b99a89}
 .habit-row .icon.ghost{color:#b3a795;margin-left:4px}
 .habit-row .icon.ghost:hover{color:var(--danger)}
diff --git a/frontend/src/style.test.ts b/frontend/src/style.test.ts
index 385bdf2..1eab09b 100644
--- a/frontend/src/style.test.ts
+++ b/frontend/src/style.test.ts
@@ -114,6 +114,12 @@ describe('task and habit row decoration', () => {
     expect(toggleBlock).not.toContain('await loadHabits()')
   })
 
+  it('places numeric habit progress at the far right instead of under the title', () => {
+    expect(mvpPanel.match(/<small v-if="habitProgressText\(h\)" class="habit-progress">/g)?.length).toBe(2)
+    expect(mvpPanel).not.toContain('<span><span class="habit-name">{{ h.name }}</span><small')
+    expect(css).toContain('.habit-progress{margin-left:auto;')
+  })
+
   it('can hide completed habits in both Today and full habit views', () => {
     expect(mvpPanel).toContain('const hideCompletedHabits = ref(false)')
     expect(mvpPanel).toContain('const visibleTodayHabits = computed')