Break words in SearchableSelect value & description (#580)

viamrobotics · Sep 19, 2024 · 38816ad · 38816ad
1 parent e19992c
commit 38816ad
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.151",
+  "version": "0.0.152",
   "repository": {
     "type": "git",
     "url": "https://github.com/viamrobotics/prime.git",

diff --git a/packages/core/src/lib/select/searchable-select.svelte b/packages/core/src/lib/select/searchable-select.svelte
@@ -404,8 +404,8 @@ const handleKeydown = createHandleKey({
                 name={option.icon}
               />
             {/if}
-            <div class="flex flex-col">
-              <p class="text-wrap text-sm">
+            <div class="flex flex-col [overflow-wrap:anywhere]">
+              <p class="text-sm">
                 {#if highlight !== undefined}
                   {@const [prefix, match, suffix] = highlight}
                   {prefix}<span class="bg-yellow-100">{match}</span>{suffix}
@@ -418,7 +418,7 @@ const handleKeydown = createHandleKey({
               {#if option.description}
                 <p
                   id={descriptionID}
-                  class="text-wrap text-xs text-subtle-2"
+                  class="text-xs text-subtle-2"
                 >
                   {option.description}
                 </p>

diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
@@ -1091,6 +1091,11 @@ const onHoverDelayMsInput = (event: Event) => {
             'Option 2',
             { value: 'C.) Option', description: 'second' },
             'A really long forth option just in case you need it',
+            {
+              value: 'Option with a long description',
+              description:
+                'usb-Generic_Laptop_Camera_200901010001-video-index0',
+            },
           ]}
           placeholder="Select an option"
           onChange={(value) => {