From d277139dd50eeb4e4057b0a7d8fc4ac2d70785de Mon Sep 17 00:00:00 2001 From: undergroundwires Date: Sun, 28 Jan 2024 09:08:37 +0100 Subject: [PATCH] Expand script names to take full available width 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. --- src/presentation/components/Scripts/View/Cards/CardListItem.vue | 1 + src/presentation/components/Scripts/View/Tree/ScriptsTree.vue | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue index bb1d8f02..b74984aa 100644 --- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue +++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue @@ -198,6 +198,7 @@ $card-horizontal-gap : $card-gap; justify-content: center; word-break: break-word; 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 { diff --git a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue b/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue index 7cc1b647..e6a41f5c 100644 --- a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue +++ b/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue @@ -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. */ background: $color-scripts-bg; + flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items. + padding-bottom: $padding; padding-left: $padding; padding-right: $padding;