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

Aperta Adatta ai principianti
  • Qualcosa non va?
#104 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
62/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
nextjs, react, typescript
Ambito
frontend

Direzione di ricerca

Inizia da src/components/site-header.tsx, dove la condizione della route del workspace elenca /account, /learn e /practice ma non /dashboard, e Notes riceve max-w-7xl e posizionamento relative. Confronta le classi dell'intestazione di Notes con il trattamento di Practice, poi verifica Notes e le route annidate in un browser a 360px, 768px e 1440px. È completato quando Notes e Practice condividono allineamento di logo e menu account e dimensioni dell'intestazione, non c'è overflow orizzontale e i target tattili misurano almeno 44px.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
1
Fork
1
Merge medio
8h 58m
PR unite (30g)
37

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di procoderji-com/procoderji

Tutte le issue di procoderji-com/procoderji

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.