fix(classroom): お知らせ画面のヘッダー位置を他のクラス管理画面にそろえる (#1123)#1126
Conversation
パンくずラッパー (.detail-breadcrumbs) が top offset を持つのに .notifications-page も top padding を持っていたため、パンくずとタイトルの間隔が評価画面などより広かった。 .detail-layout と同じく top padding を 0 にし、タイトルを .teacher-view-title と同じ 濃い太字 (font-weight: bold) に揃えた。data-testid は不変で既存テストは通る。 Closes #1123 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🤖 autopilot status
Linked issue #1123. Maintained by autopilot (single writer); do not edit. |
|
🚀 Preview deployed: https://smalruby.jp/smalruby3-editor/topic/autopilot-1123/ |
|
[Question] DoD の「 お知らせ全件一覧ページ( 対応方針: 人間レビューで実機の目視確認をお願いしたいです(パンくず→タイトル間隔が評価画面・課題詳細と揃っているか)。あわせて、このページのスクリーンショットを新規追加するか(documentation.md の DoD 上は追加が望ましい)はレビュアーの判断に委ねます。CSS 値自体は既存規約( |
|
[FYI] タイトルを |
|
🤖 敵対的レビュー完了。指摘 2 件(Must 0 / Question 1 / FYI 1)。Must はなし。CSS のみの変更で、値は既存規約( |
…lot-1123 fix(classroom): お知らせ画面のヘッダー位置を他のクラス管理画面にそろえる (#1123)
Summary
クラス管理「お知らせ」全件一覧画面(
teacher-notificationsフェーズ)のヘッダー(パンくず + タイトル)位置を、他のクラス管理画面(評価画面teacher-evaluation.jsx/ 課題詳細teacher-class-detail.jsx)とそろえた。原因
.detail-breadcrumbs(padding: 1.25rem 2rem 0)で表示するが、その下の本文コンテナ.notifications-pageもpadding: 1.25rem 2remと 独自の top padding を持っていた。.detail-layout)は「パンくずラッパーが top offset を持つので本文の top padding は 0」という規約(CSS コメントに明記)で、パンくず→タイトルの間隔が狭い。お知らせだけ余計に 1.25rem 空いていた。.notifications-page-titleは他画面の.teacher-view-titleと違い 太字(font-weight: bold)が無く、見出しが薄く見えていた。Changes Made
.notifications-page:padding: 1.25rem 2rem→padding: 0 2rem 1.25rem(.detail-layoutと同じ「上はパンくずラッパー任せ」の規約に統一)。左端オフセット(2rem)は不変。.notifications-page-title:font-weight: boldを追加(.teacher-view-titleと同じ濃い太字)。CSS のみの変更で、DOM 構造・
data-testidは一切変更していない。Test Coverage
test/unit/components/teacher-notifications-list.test.jsx(6 件)が引き続き pass(data-testid 維持)。npm run lint(scratch-gui は--max-warnings 0)が 0 エラー・0 警告 + Prettier OK。補足(DoD スクリーンショット)
docs/classroom-notification-center/README.mdのスクリーンショット表にはお知らせ全件一覧ページ単体のスクリーンショットが存在しない(0102-notification-panel.pngはドロップダウンパネルで、本 PR が変更するフルページのヘッダーとは別)。既存スクリーンショットは今回の変更の影響を受けない。.detail-layout/.teacher-view-title)に一致させている。Related Issues
Closes #1123