diff --git a/src/components/WebContentViewer.vue b/src/components/WebContentViewer.vue
index 42ae61d..7cccc18 100644
--- a/src/components/WebContentViewer.vue
+++ b/src/components/WebContentViewer.vue
@@ -55,8 +55,9 @@
                             </svg>
                         </div>
                     </template>
-                    <div class="w-4/6 flex items-center px-4 py-2 truncate cursor-pointer">
-                        {{ file.name }}
+                    <div class="w-4/6 flex items-center px-4 py-2  cursor-pointer">
+                        <div class="truncate max-sm:max-w-32 max-w-64">{{ file.name }}</div>
+                        
                     </div>
                     <div class="w-2/6 py-2 cursor-pointer">
                         {{ formatFileSize(file.size) }}
diff --git a/src/output.css b/src/output.css
index f104845..842ec7c 100644
--- a/src/output.css
+++ b/src/output.css
@@ -675,6 +675,18 @@ video {
   width: 100%;
 }
 
+.max-w-32 {
+  max-width: 8rem;
+}
+
+.max-w-48 {
+  max-width: 12rem;
+}
+
+.max-w-64 {
+  max-width: 16rem;
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }