Quando tento envolver todo o Discourse para habilitar barras laterais com cores diferentes, tenho um problema de posicionamento com sobreposições como o cartão de usuário, por exemplo.
O cartão de usuário deveria abrir exatamente ao lado do usuário clicado. Mas, na verdade, ele está deslocado horizontalmente exatamente pela largura das minhas barras laterais. Daí a pergunta: como o posicionamento dessas sobreposições é implementado e como posso evitar esses deslocamentos enquanto mantenho as barras laterais?
Sim, já encontrei isso ao adicionar um banner extra grande enquanto desenvolvia um plugin grande para um cliente. No meu caso, o deslocamento era completamente ridículo (estava fora da tela!)
Pode haver uma solução mais simples, mas acaba que isso é um pouco complexo e requer que você sobrescreva uma função, por exemplo, para o cartão de usuário:
Usei jQuery para determinar se aplicaria ou não a modificação com base na visibilidade do banner: em algumas páginas eu tinha o ‘banner’ grande, em outras não. Você pode usar uma estratégia semelhante.
Para ser honesto, seu exemplo não parece tão ruim — eu consideraria deixar como está?
O problema é que, basicamente, todos os overlays estão mal posicionados. Eu realmente não quero sobrescrever todos os métodos de posicionamento de todos os overlays que possam existir.
Parece aceitável na imagem de exemplo, já que a janela do navegador não estava em tamanho total. As laterais costumam ser maiores e, portanto, o posicionamento incorreto é pior. Alguns overlays estão quase fora da tela.
Sim, é irritante. Talvez restrinja as personalizações à Lista de Tópicos e tente deixar a visualização do Tópico o mais inalterada possível, sem criar muitas ‘variantes’, para facilitar sua vida.