No "visible" login nav menu for mobile

Aperta Adatta ai principianti
#3 0 commenti 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
68/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
css
Ambito
frontend

Direzione di ricerca

Riproduci la barra di navigazione di https://rss.chat/ nella vista responsive alle larghezze di 445px e 444px usando Safari o Chrome per dispositivi mobili. Esamina il comportamento di float di .navbar .nav.pull-right e conferma che il menu di accesso rimanga visibile e correttamente posizionato a 444px senza compromettere il layout più ampio.

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

Descrizione

Observed this with both mobile Safari & Chrome on my iPhone 17 Pro.

To replicate:

  1. Open https://rss.chat/ with Chrome Inspect.

  2. Select responsive view for dimensions.

  3. Set width to 445px.
    The login menu is visible.

  4. Drop width to 444px.
    The login menu "disappears".

At 444px the login menu has no room, so it's forced below the other nav items (why the container gets taller) and for some reason the float style gets wonky. Image

  1. Toggle off the float style (.navbar .nav.pull-right {float: right;}).
    The login menu will "reappear".
Image

A quick hack might be to override and remove the original float style, then add a media query: @media (width >= 444px) { .navbar .nav.pull-right { float: right; } }.

I hate floats, IMO CSS Flexbox is better for nav bars. Ask Claude to rework the nav to use Flexbox and see if you don't like that better Dave.

Also, again IMO, I like all major page elements to have an id, even if styling is done with classes. I think it helps when debugging.

Lingua principale
JavaScript
Stelle
37
Fork
7
Nessuna PR unita negli ultimi 30g

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

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 scripting/rss.chat

Tutte le issue di scripting/rss.chat

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.