44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix documentation button spacing on small screens

Browse Source 
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.
This commit is contained in:
undergroundwires
2024-07-07 11:59:27 +02:00
parent 5d365f65fa
commit 70959ccada
1 changed files with 1 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue
View File

@@ -72,6 +72,7 @@ export default defineComponent({
.header { .header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $spacing-relative-small; // Adjusts spacing between documentation button and adjacent text to prevent visual crowding.
.content { .content {
flex: 1; // Expands the content to fill available width, aligning the documentation button to the right. flex: 1; // Expands the content to fill available width, aligning the documentation button to the right.
} }