diff --git a/frontend/src/assets/css/style.css b/frontend/src/assets/css/style.css
index 4db35e1d..fb1b6c00 100644
--- a/frontend/src/assets/css/style.css
+++ b/frontend/src/assets/css/style.css
@@ -35,6 +35,13 @@
     user-select: none;
   }
 
+  .is-text-overflow {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   @media (prefers-color-scheme: dark) {
     * {
       unicode-bidi: plaintext;
@@ -72,4 +79,11 @@
     .is-unselectable {
       user-select: none;
     }
+
+    .is-text-overflow {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
diff --git a/frontend/src/components/Page-Completed.vue b/frontend/src/components/Page-Completed.vue
index f88429ad..10c99071 100644
--- a/frontend/src/components/Page-Completed.vue
+++ b/frontend/src/components/Page-Completed.vue
@@ -68,8 +68,8 @@
     <div class="columns is-multiline">
       <div class="column is-6" v-for="item in completed" :key="item._id">
         <div class="card" :class="{ 'is-bordered-danger': item.error ? true : false }">
-          <header class="card-header el has-tooltip" :data-tooltip="item.title">
-            <div class="card-header-title has-text-centered el is-block">
+          <header class="card-header has-tooltip" :data-tooltip="item.title">
+            <div class="card-header-title has-text-centered is-text-overflow is-block">
               <a v-if="item.filename" referrerpolicy="no-referrer" :href="makeDownload(config, item, 'm3u8')"
                 @click.prevent="$emit('playItem', item)">
                 {{ item.title }}
diff --git a/frontend/src/components/Page-Downloading.vue b/frontend/src/components/Page-Downloading.vue
index 202a6b1f..ee8fafc2 100644
--- a/frontend/src/components/Page-Downloading.vue
+++ b/frontend/src/components/Page-Downloading.vue
@@ -37,8 +37,8 @@
     <div class="columns is-multiline">
       <div class="column is-6" v-for="item in queue" :key="item._id">
         <div class="card">
-          <header class="card-header el has-tooltip" :data-tooltip="item.title">
-            <div class="card-header-title has-text-centered el is-block">
+          <header class="card-header has-tooltip" :data-tooltip="item.title">
+            <div class="card-header-title has-text-centered is-text-overflow is-block">
               {{ item.title }}
             </div>
           </header>