L'intestazione si rompe su viewport di medie dimensioni nel tema Horizon

L’intestazione su Horizon funziona molto bene nella maggior parte dei casi, sia su mobile che su desktop:

Tuttavia, possiedo un telefono pieghevole con un rapporto d’aspetto particolare. Purtroppo la barra di ricerca e l’avatar scompaiono e tutto si disorganizza un po’:

Sembra che ciò accada per una larghezza compresa tra 640 e 767 px – proprio dove si colloca il mio dispositivo pieghevole!

Posso riprodurre anche io il problema: sembra che la classe contents all’interno dell’intestazione, che imposta flex per le visualizzazioni di telefoni pieghevoli o tablet piccoli @media (min-width: 640px) and (max-width: 767px), sia la causa:

Il problema può essere risolto modificando la proprietà in contents per quel intervallo di larghezza:

@media (min-width: 640px) and (max-width: 767.98px) {
  .d-header>.wrap .contents {
    display: contents!important;
  }
}

Penso che Discourse utilizzi 768px come limite tra tablet e desktop.

Tuttavia, trovo che quella impostazione peggiori le cose!! Con essa disattivata, l’intestazione risulta distorta a tutte le dimensioni fino a 767, a meno che il dispositivo non sia specificato come mobile.

Ma almeno il mio telefono pieghevole è soddisfatto. Solo che il mio browser desktop non lo è quando le cose si rimpiccioliscono.

Penso che questa impostazione sia ora scomparsa, quindi non esiste più una soluzione alternativa.

Il problema con Horizon permane.

Potresti aiutarmi a diagnosticare il problema, perché al momento, mentre provo a riprodurlo tramite la simulazione desktop (non ho uno smartphone pieghevole), non vedo nulla di insolito.

Posso riprodurlo semplicemente restringendo la finestra del browser sul mio desktop:

Quando è sufficientemente ampia:

Un po’ più stretta, e accadono alcune cose strane (la barra laterale / l’intestazione diventano bianche) di cui non sono sicuro che siano intenzionali:

Più stretta evidenzia il problema (cioè la dimensione di un telefono pieghevole)

Molto stretta (dimensione normale di un telefono) va di nuovo bene.

Sì, lo sono.

Non capisco proprio, questo è a 644px:

A nessuna larghezza l’avatar scompare per me.

Puoi riprodurlo qui su Meta (con Horizon)?

Ah - avevo dimenticato che potevo farlo per le cose da riprodurre! No, non si riproduce nemmeno per me su Meta con Horizon.

Immagino che sia un problema del mio sito allora - controllerò dalla mia parte e ti farò sapere cosa trovo. Grazie per aver indagato!!!

Wow, è stato sorprendentemente facile trovare il problema.

Questo componente del tema non è compatibile con Horizon:

E mi piace tantissimo quel TC!! Non sopporto che il menu salti a destra su mobile. Sono le piccole cose che ci impazziscono (beh, alcuni di noi), vero? Forse mi piace lì perché sono mancino.

Sì, capisco.

Sentitevi liberi di lasciare un messaggio nel thread originale del Tema Horizon, dove avevamo detto:

Anch’io uso quel componente (condivido la tua opinione sull’icona della barra laterale, anche se non mi piace né uso Horizon) e ci ho già lavorato sopra. Vedrò se riesco a trovare una soluzione, Nathan.

ciao Nathan, ho una correzione qui:

Lilly, sei fantastica! Al momento sto godendomi sia l’hamburger sul lato sinistro che Horizon sul mio foldie.

Meraviglioso!!!