fix(manager): drawer mobile + acoes visiveis no touch - #184
Open
douglasanpa wants to merge 3 commits into
Open
Conversation
Sidebar was hidden md:flex with no hamburger on <768px — users on phone could not navigate (no menu) and the instance action bar was opacity-0 group-hover:opacity-100 so it was invisible but still clickable (accidental disconnects tapping the dark area). Injects manager-mobile-fix.css/js into manager/dist via Dockerfile sed — dist is prebuilt in this repo so no manager/src to patch. Keeps behavior unchanged on desktop.
Reviewer's GuideThe PR applies a non-invasive mobile UX patch to the prebuilt manager by injecting CSS and JavaScript assets from the final Docker stage. It adds a responsive hamburger-driven sidebar drawer with backdrop and close behavior, while making instance actions continuously visible on touch devices; desktop behavior is explicitly preserved. Sequence diagram for the mobile sidebar drawer interactionsequenceDiagram
actor User
participant Header
participant MobileFix as manager-mobile-fix.js
participant Sidebar
participant Backdrop
MobileFix->>Header: insertBefore(hamburger button)
User->>Header: click hamburger
Header->>MobileFix: click handler
MobileFix->>Sidebar: add open class
MobileFix->>Backdrop: add open class
MobileFix->>MobileFix: set document.body.style.overflow
User->>Backdrop: click backdrop
Backdrop->>MobileFix: closeDrawer()
MobileFix->>Sidebar: remove open class
MobileFix->>Backdrop: remove open class
User->>Sidebar: click nav link
Sidebar->>MobileFix: closeDrawer()
User->>MobileFix: press Escape
MobileFix->>MobileFix: closeDrawer()
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 2 issues
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location path="manager-mobile-fix.css" line_range="5" />
<code_context>
+/* Sidebar: hidden md:flex => drawer on <768px; instance actions: always visible (no hover) */
+
+/* Instance action bar — was opacity-0 group-hover:opacity-100, invisible on touch devices */
+.group .flex.border-t.opacity-0 { opacity: 1 !important; }
+
+/* Mobile drawer */
</code_context>
<issue_to_address>
**nitpick (broader_impact):** The global opacity override makes every matching instance action bar permanently visible on desktop, removing the existing hover-only behavior even though the change claims desktop behavior is unchanged.
**Triggers:** On desktop widths where the original `group-hover:opacity-100` behavior should apply.
**Suggested fix:** Scope the opacity override to the mobile media query, or add a desktop rule that restores the original opacity behavior.
```suggestion
@media (max-width: 767px) {
.group .flex.border-t.opacity-0 { opacity: 1 !important; }
}
```
</issue_to_address>
### Comment 2
<location path="manager-mobile-fix.js" line_range="57-60" />
<code_context>
+
+ // SPA: retry until React mounts
+ var tries = 0;
+ var timer = setInterval(function(){
+ if(init() || ++tries > 60) clearInterval(timer);
+ }, 300);
+ // also re-init on navigation (history changes)
</code_context>
<issue_to_address>
**issue (bug_risk):** The retry loop stops after roughly 18 seconds; if React mounts the sidebar after that window, `init()` is never called again and the mobile hamburger/drawer is permanently absent until a full page reload.
**Triggers:** When the application bundle or initial API-driven render takes longer than approximately 18 seconds.
**Suggested fix:** Retry until the expected DOM appears, or observe the root with a `MutationObserver` instead of using a fixed retry limit.
```suggestion
var timer = setInterval(function(){
if(init()) clearInterval(timer);
}, 300);
```
</issue_to_address>Sourcery assessment
Approval pending. 1 finding to address first.
Blocking findings: manager-mobile-fix.js:60
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
douglasanpa
changed the title
Author
|
Obrigado @sourcery-ai — corrigido em a8c4407:
|
sourcery-ai
Bot
dismissed
their stale review
August 27, 2026 22:41
Sourcery withdrew this approval because the latest commits introduced blocking findings.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problema
No celular (< 768px) o
managerquebra em 2 pontos (só nomanager/distpré-buildado):class="hidden md:flex"esconde a sidebar sem nenhum botão hambúrguer. No celular o usuário fica sem navegação.opacity-0 group-hover:opacity-100. Sem hover no touch ela fica invisível, mas continua recebendo clique. Resultado: usuário toca no “escuro” e desconecta a instância sem querer.Relato real: no desktop aparecem os botões Conectar / Configurar / Labs etc, no celular não — e ao tocar no escuro já aconteceu desconexão acidental.
Por que fizemos assim
O repo
evolution-gosó versionamanager/distpré-buildado, não temmanager/srcpara corrigirLayout.tsx/InstanceCard.tsxdireto. Então optamos por uma injeção mínima viaDockerfile, sem precisar do source do manager nem rebuild do front — 2 assets pequenos que são copiados paramanager/dist/assetse referenciados noindex.htmlcomsed.No desktop o comportamento fica idêntico ao original.
O que foi feito
manager-mobile-fix.css(~1.5KB)< 768px(position: fixed,translateX(-100%)→.opendesliza) + backdrop escuro.opacity: 1só onde eraopacity-0no hover (.group .flex.border-t.opacity-0), sem afetar outrosopacity-0do app.>= 768pxe ajusta header/main no mobile.manager-mobile-fix.js(~2.5KB, vanilla)aria-label="Abrir menu").history.pushState/popstateporque o manager é React SPA.Dockerfile(stage final)Como testar
Manual: abrir
/managerno celular — hambúrguer aparece, sidebar desliza com backdrop, todos os botões (Conectar, Configurar, Labs, Desconectar) visíveis; no desktop nada muda.Validado em produção em
evogo.iascent.com.brapós o build do fork.Próximo passo ideal
Quando o source do manager for versionado (ou num repo dedicado como
evolution-manager-v2), o fix definitivo é corrigirLayout.tsx(drawer responsivo) eInstanceCard.tsx(ações sempre visíveis no touch) direto no source. Enquanto oevolution-gosó entregadist, essa injeção é a forma menos invasiva.Summary by Sourcery
Build a Solar Teles Evolution GO fork that combines critical upstream bug fixes with a responsive mobile manager experience.
New Features:
Bug Fixes:
Enhancements:
Build:
Deployment:
Documentation:
Chores: