From 70959ccadafac5abcfa83e90cdb0537890b05f14 Mon Sep 17 00:00:00 2001 From: undergroundwires Date: Sun, 7 Jul 2024 11:59:27 +0200 Subject: [PATCH] Fix documentation button spacing on small screens The previous layout lacked a specified gap between the node header and the documentation toggle button in the tree view. This resulted in a crowded appearance, making the interface look cluttered and reducing readability, especially on smaller screens. This commit introduces a relative gap, adjusting the spacing based on the text size. This change enhances the visual separation and improves user interaction by ensuring the documentation button and text do not overlap, regardless of screen size. --- .../View/Tree/NodeContent/Documentation/DocumentableNode.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue index ab243d2a..d080f025 100644 --- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue +++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue @@ -72,6 +72,7 @@ export default defineComponent({ .header { display: flex; flex-direction: row; + gap: $spacing-relative-small; // Adjusts spacing between documentation button and adjacent text to prevent visual crowding. .content { flex: 1; // Expands the content to fill available width, aligning the documentation button to the right. }