Antes de efetivamente introduzir a forma de personalizar a aparência do app drawio baseado em Electron, eu preciso desabafar o que motiva meu descontentamento com a interface gráfica atual do editor de diagramas e de outros aplicativos que muito se assemelham a ele no que diz respeito ao espaçamento e tamanho da fonte em itens de menus. Em meu ponto de vista, o problema que sinto ao me deparar com esses detalhes na roupagem de um programa não se deve a mero desleixo ou desconhecimento por parte de seus desenvolvedores, e sim à feroz necessidade (por vezes, apenas recomendação ou conveniência) de transmitir facilidade e assertividade ao usuário esperado/desejado do produto.
Invoco então o caso — a autoidentificação do leitor é livre — de um software que, admito, causou-me atribulação a partir de certo ponto em razão de um pormenor discreto, conquanto inevitável: o tamanho da fonte tipográfica no menu de contexto e as margens entre seus itens. O software? Google Chrome. E o sistema operacional em que isso mais se pronunciava? Windows.
Captura de tela de vídeo de setembro de 2021 na escala original da gravação. Observe a justaposição dos itens do menu aberto. Fonte: https://youtu.be/KGkDfANwgHA?t=105
Veja o menu novamente, porém em destaque:
Com o decorrer dos anos, minha miopia se manifestou e não houve escapatória ao óculos. Concluí eventualmente que, se grande parte da web moderna se preocupa com acessibilidade e flexibilidade e meu navegador principal não, então a transição para outro browser era-me algo imperativo. E não é pouco dizer que deixa qualquer [ex-]usuário de Windows incrédulo, inclusive eu mesmo por vezes, o fato de que a Microsoft realmente conseguiu combinar coesão e intuitividade no menu de contexto do Chromium Edge.
Expostos meus argumentos, reconheço que há alternativas ao Chrome (com destaque àquelas que rodam no mesmo motor) mais personalizáveis, bonitas e privadas, mas a maioria delas carece dos mesmos ou idênticos recursos em relação ao original. Portanto, a menos que seus trajes se renovem profundamente, eu não pretendo fazer browser-hopping de novo, e detenhamo-nos ao draw.io.
Apesar de não ser uma opção vastamente documentada, CSS de usuário pode ser adicionado na versão distribuída com Electron do drawio:
<aside> <img src="/icons/star-of-life_blue.svg" alt="/icons/star-of-life_blue.svg" width="40px" />
Além do CSS personalizado, atualmente eu estou abrindo o drawio com a opção -z 1.1 para ampliar ligeiramente a UI.
</aside>
*mxPopupMenuItem é classe da maioria de itens de menu que eu pude localizar na página do editor. Na prática, a declaração estende o vão geral entre dois itens adjacentes do menu correspondente.