diff --git a/htdocs/assets/js/floatingbar-config.js b/htdocs/assets/js/floatingbar-config.js
index 39cf1bf..9be2475 100644
--- a/htdocs/assets/js/floatingbar-config.js
+++ b/htdocs/assets/js/floatingbar-config.js
@@ -182,8 +182,8 @@ function inject_search_results (results, keyword) {
                 <span class="flex items-center">
                     <span class="mx-1 w-[35px] h-[35px] flex justify-center items-center rounded border-[1px] border-accent_secondary_transparent"><p class="text-accent_primary">${result.name.charAt(0).toUpperCase()}</p></span>
                     <span class="flex flex-col">
-                        <h6 class="mx-1">${result.name}</h6>
-                        <p class="mx-1 text-xs text-accent_three">${result.description.slice(0, 35) + '...'}</p>
+                        <h6 class="mx-1 overflow-hidden whitespace-nowrap text-ellipsis max-w-[45vw] md:max-w-[30vw]">${result.name}</h6>
+                        <p class="mx-1 text-xs overflow-hidden whitespace-nowrap text-ellipsis max-w-[45vw] md:max-w-[30vw] text-accent_three">${result.description}</p>
                     </span>
                 </span>
                 <span class="flex items-center mr-1">
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index a2017d2..ff3abe1 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -1143,6 +1143,22 @@ video {
   width: 100vw;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
+.max-w-\[70vw\] {
+  max-width: 70vw;
+}
+
+.max-w-\[50vw\] {
+  max-width: 50vw;
+}
+
+.max-w-\[45vw\] {
+  max-width: 45vw;
+}
+
 .origin-left {
   transform-origin: left;
 }
@@ -1249,6 +1265,10 @@ video {
   scroll-behavior: smooth;
 }
 
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -2000,6 +2020,14 @@ video {
     width: 50vw;
   }
 
+  .md\:max-w-\[35vw\] {
+    max-width: 35vw;
+  }
+
+  .md\:max-w-\[30vw\] {
+    max-width: 30vw;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }