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

Expand script names to take full available width

Browse Source 
This commit improves consistency in the UI by ensuring that all nodes in
the tree component expand to take full available width. This approach
eliminates layout shifts that were previously observed when toggling
documentation.
This commit is contained in:
undergroundwires
2024-01-28 09:08:37 +01:00
parent 7af8daa341
commit d277139dd5
2 changed files with 3 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/presentation/components/Scripts/View/Cards/CardListItem.vue
View File

@@ -198,6 +198,7 @@ $card-horizontal-gap : $card-gap;
justify-content: center; justify-content: center;
word-break: break-word; word-break: break-word;
max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown) max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
width: 100%; // Expands the container to fill available horizontal space, enabling alignment of child items.
} }
.card__expander__close-button { .card__expander__close-button {

2
src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
View File

@@ -82,6 +82,8 @@ $padding: 20px;
/* Set background color in consistent way so it has similar look when searching, on tree view, in cards etc. */ /* Set background color in consistent way so it has similar look when searching, on tree view, in cards etc. */
background: $color-scripts-bg; background: $color-scripts-bg;
flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items.
padding-bottom: $padding; padding-bottom: $padding;
padding-left: $padding; padding-left: $padding;
padding-right: $padding; padding-right: $padding;