fix: list items shrinking

histoire-dev · Feb 17, 2022 · 9cee043 · 9cee043
1 parent b00e50d
commit 9cee043
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/packages/histoire/src/client/app/components/StoryListFolder.vue b/packages/histoire/src/client/app/components/StoryListFolder.vue
@@ -28,13 +28,13 @@ const folderPadding = computed(() => {
  <div
  role="button"
  tabindex="0"
- class="htw-px-0.5 htw-py-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900 htw-cursor-pointer htw-select-none"
+ class="htw-px-0.5 htw-py-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900 htw-cursor-pointer htw-select-none htw-flex"
  @click="toggleOpen"
  @keyup.enter="toggleOpen"
  @keyup.space="toggleOpen"
  >
- <span class="bind-tree-padding htw-flex htw-items-center htw-gap-2">
- <span class="htw-flex htw-gap-1">
+ <span class="bind-tree-padding htw-flex htw-items-center htw-gap-2 htw-min-w-0">
+ <span class="htw-flex htw-gap-1 htw-flex-none htw-items-center">
  <Icon
  icon="carbon:caret-right"
  class="htw-w-4 htw-h-4 htw-transition-transform htw-duration-150 htw-opacity-30"
@@ -47,7 +47,7 @@ const folderPadding = computed(() => {
  class="htw-w-5 htw-h-5"
  />
  </span>
- <span>{{ folder.title }}</span>
+ <span class="htw-truncate">{{ folder.title }}</span>
  </span>
  </div>
  <div

diff --git a/packages/histoire/src/client/app/components/StoryListItem.vue b/packages/histoire/src/client/app/components/StoryListItem.vue
@@ -30,16 +30,16 @@ const iconColor = computed(() => props.story.iconColor)
  }"
  class="htw-px-0.5 htw-py-2"
  >
- <span class="bind-tree-margin htw-flex htw-items-center htw-gap-2 htw-pl-5">
+ <span class="bind-tree-margin htw-flex htw-items-center htw-gap-2 htw-pl-5 htw-min-w-0">
  <Icon
  :icon="story.icon ?? 'carbon:cube'"
- class="base-list-item-link-icon htw-w-5 htw-h-5"
+ class="base-list-item-link-icon htw-w-5 htw-h-5 htw-flex-none"
  :class="{
  'htw-text-primary-500': !active && !story.iconColor,
  'bind-icon-color': !active && story.iconColor,
  }"
  />
- <span>{{ story.title }}</span>
+ <span class="htw-truncate">{{ story.title }}</span>
  </span>
 
  <span class="htw-opacity-40 htw-text-sm">

diff --git a/packages/histoire/src/client/app/components/StoryVariantListItem.vue b/packages/histoire/src/client/app/components/StoryVariantListItem.vue
@@ -28,13 +28,13 @@ const iconColor = computed(() => props.variant.iconColor)
  >
  <Icon
  :icon="variant.icon ?? 'carbon:cube'"
- class="base-list-item-link-icon htw-w-5 htw-h-5"
+ class="base-list-item-link-icon htw-w-5 htw-h-5 htw-flex-none"
  :class="{
  'htw-text-gray-500': !active && !variant.iconColor,
  'bind-icon-color': !active && variant.iconColor,
  }"
  />
- <span>{{ variant.title }}</span>
+ <span class="htw-truncate">{{ variant.title }}</span>
  </BaseListItemLink>
  </div>
 </template>