fix(mobile): align home greeting with header logo

projects/xiaoshu-mobile/src/app/features/home/home-page.component.html

@@ -1,13 +1,12 @@
 <header class="home-header" [class.coach-home-header]="isCoach()">
   <div class="brand"><img src="/static/images/logo-wordmark.png" alt="小树陪练" /><span>线上与线下，一对一陪练</span></div>
+  <p class="greeting" [title]="'你好，' + (session.user()?.honeyName || session.user()?.userName || '同学')">你好，{{ session.user()?.honeyName || session.user()?.userName || '同学' }}</p>
   @if (!isCoach()) {
     <a class="header-action" routerLink="/pages/home/search" aria-label="搜索" title="搜索"><lucide-icon [img]="icons.Search" [size]="23" /></a>
   }
 </header>
 
 <main class="home-main">
-  <p class="greeting">你好，{{ session.user()?.honeyName || session.user()?.userName || '同学' }}</p>
-
   @if (isCoach()) {
     <section class="coach-hero" aria-labelledby="coach-title">
       <div class="hero-heading"><div><span>陪练师工作台</span><h1 id="coach-title">今日业务概览</h1></div><button class="coach-refresh" type="button" (click)="retryCoachStats()" [disabled]="statsLoading()" aria-label="刷新业务数据"><lucide-icon [img]="icons.RefreshCw" [size]="20" [class.spin]="statsLoading()" /></button></div>

projects/xiaoshu-mobile/src/app/features/home/home-page.component.scss

@@ -1,12 +1,12 @@
 :host { display: block; min-height: 100%; background: var(--surface); }
-.home-header { display: grid; min-height: calc(78px + env(safe-area-inset-top)); grid-template-columns: minmax(0, 1fr) 44px; align-items: center; padding: env(safe-area-inset-top) 18px 0 20px; background: var(--surface); border-bottom: 1px solid var(--line-soft); gap: 4px; }
-.home-header.coach-home-header { grid-template-columns: minmax(0, 1fr); padding-right: 20px; }
-.brand { display: flex; min-width: 0; align-items: flex-end; gap: 11px; }
-.brand img { width: 154px; height: 43px; flex: 0 0 auto; object-fit: contain; object-position: left center; }
-.brand span { min-width: 0; color: var(--brand-deep); font-size: 13px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
-.header-action { display: grid; width: 44px; height: 44px; color: var(--ink); place-items: center; }
-.home-main { padding: 0 16px 34px; }
-.greeting { margin: 18px 0 14px; font-size: 15px; }
+.home-header { display: grid; min-height: calc(78px + env(safe-area-inset-top)); grid-template-columns: auto minmax(0, 1fr) auto 44px; align-items: end; align-content: center; padding: calc(12px + env(safe-area-inset-top)) 20px 12px; background: var(--surface); border-bottom: 1px solid var(--line-soft); column-gap: 11px; row-gap: 4px; }
+.home-header.coach-home-header { grid-template-columns: auto minmax(0, 1fr) auto; }
+.brand { display: contents; }
+.brand img { grid-column: 1; grid-row: 1; width: 154px; height: 43px; object-fit: contain; object-position: left center; }
+.brand span { grid-column: 2; grid-row: 1; min-width: 0; color: var(--brand-deep); font-size: 13px; font-weight: 650; line-height: 1.25; }
+.header-action { grid-column: 4; grid-row: 1; display: grid; width: 44px; height: 44px; color: var(--ink); place-items: center; }
+.home-main { padding: 12px 16px 34px; }
+.greeting { grid-column: 3; grid-row: 1; min-width: 0; max-width: 240px; margin: 0; overflow: hidden; font-size: 15px; line-height: 1.25; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
 
 .memory-hero, .coach-hero { overflow: hidden; position: relative; color: white; background: linear-gradient(135deg, var(--brand-deep), var(--brand-strong)); border-radius: var(--radius-lg); box-shadow: var(--shadow-brand); }
 .memory-title-row { display: flex; align-items: center; padding: 20px 22px 0; gap: 8px; }
@@ -129,14 +129,17 @@
 @keyframes spin { to { transform: rotate(360deg); } }
 .spin { animation: spin .8s linear infinite; }
 @media (hover: hover) { .header-action:hover, .quick-grid a:hover { background: var(--surface-hover); } .continue-button:hover { background: var(--accent-strong); } .coach-memory-list article > button:hover { filter: brightness(.97); } }
+@media (max-width: 619px) {
+  .home-header { grid-template-columns: auto minmax(0, 1fr) 44px; column-gap: 8px; }
+  .home-header.coach-home-header { grid-template-columns: auto minmax(0, 1fr); }
+  .brand span { grid-column: 1 / -1; grid-row: 2; font-size: 12px; }
+  .greeting { grid-column: 2; max-width: 100%; font-size: 13px; }
+  .header-action { grid-column: 3; }
+}
 @media (max-width: 430px) {
-  .home-header { min-height: calc(70px + env(safe-area-inset-top)); }
-  .brand { gap: 8px; }
   .brand img { width: 132px; height: 37px; }
-  .brand span { max-width: 112px; font-size: 12px; }
   .home-main { padding-inline: 14px; }
   .content-section { margin-inline: -14px; padding-inline: 14px; }
-  .greeting { margin: 8px 0 7px; }
   .memory-title-row { padding: 15px 17px 0; }
   .memory-title-row h1 { font-size: 18px; }
   .memory-content { grid-template-columns: 150px minmax(0, 1fr); padding: 0 14px 12px; gap: 8px; }
@@ -162,7 +165,7 @@
   .coach-memory-list article { grid-template-columns: 34px minmax(0, 1fr) auto; padding-inline: 11px; gap: 8px; }
   .coach-memory-list article > button { grid-column: 2 / -1; justify-self: stretch; }
 }
-@media (max-width: 350px) { .brand img { width: 116px; height: 32px; } .brand span { max-width: 86px; font-size: 11px; } .home-main { padding-inline: 10px; } .memory-content { grid-template-columns: 124px minmax(0, 1fr); padding-inline: 10px; } .day-ring { transform: scale(.82); } .today-panel { padding-left: 7px; } .task-row { font-size: 11px; } .quick-arrow { display: none; } .quick-grid a { grid-template-columns: 42px minmax(0, 1fr); } }
+@media (max-width: 350px) { .brand img { width: 116px; height: 32px; } .brand span { font-size: 11px; } .home-main { padding-inline: 10px; } .memory-content { grid-template-columns: 124px minmax(0, 1fr); padding-inline: 10px; } .day-ring { transform: scale(.82); } .today-panel { padding-left: 7px; } .task-row { font-size: 11px; } .quick-arrow { display: none; } .quick-grid a { grid-template-columns: 42px minmax(0, 1fr); } }
 @media (min-width: 620px) { .home-main { padding-inline: 22px; } .memory-content { grid-template-columns: 280px minmax(0, 1fr); } .day-ring { width: 190px; height: 190px; } .memory-dot { transform: rotate(var(--angle)) translateY(-84px); } .today-panel { padding: 8px 30px 0; } .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
 @media (prefers-reduced-motion: reduce) { .state-spinner { animation-duration: 1.6s; } }