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

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#104 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
62/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
nextjs, react, typescript
Bereich
frontend

Rechercherichtung

Beginne in src/components/site-header.tsx, wo die Bedingung für die Workspace-Route /account, /learn und /practice auflistet, aber nicht /dashboard, und Notes max-w-7xl sowie relative Positionierung erhält. Vergleiche die Header-Klassen von Notes mit der Behandlung von Practice und prüfe dann Notes und die verschachtelten Routen im Browser bei 360px, 768px und 1440px. Fertig ist es, wenn Notes und Practice Logo- und Account-Menü-Ausrichtung sowie Header-Abmessungen teilen, es keinen horizontalen Überlauf gibt und Tap-Ziele mindestens 44px groß sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
TypeScript
Sterne
1
Forks
1
Ø Merge
8 Std. 58 Min.
Gemergte PRs (30 T.)
37

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus procoderji-com/procoderji

Alle Issues in procoderji-com/procoderji

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.