À propos des marges par défaut de Confluence, et tuto pour les corriger
Un développeur rancunier forcé d'utiliser des instances Confluence cloud corrige ce que les équipes d'Atlassian semblent être incapables de faire.
Ce qui m'a énervé, le contexte
Confluence Cloud a la fâcheuse manie d'afficher une documentation tout ce qu'il y a de classique dans une colonne étroite entourée par d'énormes marges vides. Sur un écran large, les tableaux, blocs de code, diagrammes, et paragraphes sont comprimés dans une fraction de la place disponible, la majorité de l'écran étant dévolue à afficher rien du tout. Les sections larges sont possibles, mais pas toujours disponibles, ne s'appliquent pas partout, et dépendent de la manière dont la page a été créée.
Voilà une de ces absurdités du SaaS moderne : des suites logicielles hors de prix, qui traitent les utilisateurs comme de de simples invités dans leurs propres interfaces. La personnalisation disparait, le vide devient un dogme de conception, et quelqu'un, quelque part, décide que chaque moniteur devrait se comporter comme une tablette au format vertical. Confluence Cloud est vendu à un tarif premium, et pourtant ne propose pas de solution pour ajuster la largeur de contenu.
Cet article présente une lueur d'espoir dans un présent bien morne.
Firefox, mon ami
Heureusement, Firefox permet toujours à ses utilisateurs de garder une part de contrôle à l'aide du fichier userContent.css. Un peu de rétro-ingénierie avec ChatGPT, puis tout refaire à l'aide de l'inspecteur web parce que c'était incorrect.
D'abord, ouvrez about:config et assignez true à la clé toolkit.legacyUserProfileCustomizations.stylesheets.
Ensuite, ouvrez about:support, déterminez l'emplacement du dossier de profil, et créez un fichier chrome/userContent.css. Y entrer le CSS suivant, en remplaçant le domaine par celui de votre instance Atlassian si souhaité :
/* Confluence Cloud - suppression des vilaines marges */
@-moz-document domain("atlassian.net") {
[data-testid="view-page-main-content-container"] div, [data-testid="view-page-main-content-container"] div div, .ak-render-wrapper div, .ak-editor-content-area-region {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
.ak-editor-content-area {
--ak-editor-content-area-max-width: 100% !important;
}
}
Redémarrez complètement Firefox après avoir enregistré le fichier.
Résultats et avertissement
Un avertissement avant tout : cette solution est bâtie vite-fait, et pourrait casser des cas d'usages qui ne sont pas miens (je n'ai pas testé l'impression, l'export, le plein-écran…). Bien sûr, vous pourriez utiliser un autre navigateur que Firefox (vous l'avez bien cherché, dans ce cas). Je reviendrai éventuellement pour mettre à jour cet article, la version que vous trouvez ci-dessus constitue à un instant T l'état de l'art de ce que j'utilise, et pourrait être cassée pour vous.
Étant donné qu'Atlassian change régulièrement la structure de son frontend, il est possible, les sélecteurs CSS utilisés ci-dessus pourront nécessiter des modifications. Ce sera une mission pour un autre jour, peut-être un autre développeur énervé.
En gardant ces éléments en tête, voici le résultat :
Avant
Après
Pour terminer
Mon domaine n'étant pas le front web, prière de ne pas juger mon (mauvais) bruteforce du DOM :) Vous devriez également être méfiant à l'encontre des gens qui vous suggèrent de modifier votre about:config, certaines personnes ne vous veulent pas que du bien sur internet.
L'ironie d'écrire cet article sur un blog dont la largeur de contenu est relativement étroite ne m'échappe pas. C'est la vie !