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

Aberta Para iniciantes
  • Algo errado?
#104 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
62/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
nextjs, react, typescript
Domínio
frontend

Direção de pesquisa

Comece em src/components/site-header.tsx, onde a condição de rota do workspace lista /account, /learn e /practice, mas não /dashboard, e Notes recebe max-w-7xl e posicionamento relative. Compare as classes do cabeçalho de Notes com o tratamento de Practice e depois verifique Notes e as rotas aninhadas em um navegador nas larguras 360px, 768px e 1440px. Está pronto quando Notes e Practice compartilham o alinhamento do logotipo e do menu da conta e as dimensões do cabeçalho, não há overflow horizontal e os alvos de toque têm pelo menos 44px.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.

Linguagem predominante
TypeScript
Estrelas
1
Forks
1
Merge médio
8h 58min
PRs com merge (30d)
37

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de procoderji-com/procoderji

Todas as issues de procoderji-com/procoderji

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.