bug: align the Notes navbar with the full-width student workspace header

オープン 初心者向け
  • 何か問題がありますか？
#104 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
62/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
活発
技術スタック
nextjs, react, typescript
領域
frontend

調査の方向性

src/components/site-header.tsx から始めます。ここでは workspace ルートの条件に /account、/learn、/practice が並んでいますが /dashboard は含まれていません。また Notes には max-w-7xl と relative 配置が設定されています。Notes のヘッダーのクラスを Practice の扱いと比較し、その後ブラウザで 360px、768px、1440px の幅において Notes と入れ子のルートを確認します。Notes と Practice でロゴとアカウントメニューの配置、ヘッダーの寸法が揃い、横方向のはみ出しがなく、タップ対象が少なくとも 44px あれば完了です。

索引モデルが issue の本文から書いたものです。

説明

area:frontend bug

What happened?

The Notes section does not use the same full-width navbar alignment as the student workspace. In the owner's production screenshot of /dashboard, the logo and account menu are inset inside a centered container. In the supplied /practice reference, the logo sits near the left viewport edge and the account menu sits near the right edge.

Practice is the approved reference for the Notes navbar. Shared navigation should feel consistent across the application.

Steps to reproduce

  1. Open https://procoderji.com/dashboard on desktop.
  2. Observe the horizontal positions of the logo, main navigation and account menu.
  3. Open https://procoderji.com/practice at the same viewport width.
  4. Compare: the Notes header is constrained, while the Practice header uses the available width.

Expected behavior

Use the existing Practice navbar's full-width alignment, spacing, typography, white background, subtle border and scrolling behavior for Notes and its nested pages. Continue using one shared SiteHeader with the same logo, links/order and account menu; highlight the current section.

Code pointers

In src/components/site-header.tsx, the workspace route condition includes /account, /learn and /practice but excludes /dashboard. It selects w-full and sticky positioning for workspace routes, while Notes receives max-w-7xl and relative positioning. Review this route treatment before introducing any additional header component.

This observation comes from the current source and owner-supplied screenshots; desktop/mobile browser verification remains part of implementation.

Acceptance criteria

  • At the same desktop viewport, Notes and Practice have matching logo/account-menu alignment and header dimensions.
  • Nested Notes routes retain the same shared-header treatment and active Browse Notes link.
  • Header scrolling behavior is consistent with the approved student-workspace reference.
  • At 360px, 768px and 1440px, menus remain usable with no horizontal overflow and at least 44px tap targets.
  • Preserve the existing Notes catalogue/reader functionality, current copy and yellow brand design.
  • Keep Home's hero transparency behavior covered separately by #101, and signed-in display names by #102.

Planning

Backlog bug report. Record the Practice screenshot as the expected reference; implementation will be scheduled separately through an issue-linked contribution.

Production release at reporting: 9e2b9c00556de0387b09e937ffbefbd4eb9e0919.

主要言語
TypeScript
スター
1
フォーク
1
平均マージ
8時間 58分
マージ済み PR（30日）
37

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

procoderji-com/procoderji のほかの issue

procoderji-com/procoderji の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。