diff --git a/frontend/app/web-gold/src/components/material/MaterialUploadModal.vue b/frontend/app/web-gold/src/components/material/MaterialUploadModal.vue
index e8b8ea4d64..16f623a18b 100644
--- a/frontend/app/web-gold/src/components/material/MaterialUploadModal.vue
+++ b/frontend/app/web-gold/src/components/material/MaterialUploadModal.vue
@@ -507,6 +507,8 @@ const handleCancel = () => {
 
 .file-name {
   flex: 1;
+  min-width: 0;
+  max-width: 240px;
   font-size: 14px;
   color: var(--color-text);
   overflow: hidden;
@@ -591,6 +593,8 @@ const handleCancel = () => {
 }
 
 .current-file-name span {
+  min-width: 0;
+  max-width: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -629,6 +633,8 @@ const handleCancel = () => {
 }
 
 .completed-item span {
+  min-width: 0;
+  max-width: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/frontend/app/web-gold/src/components/ui/progress/Progress.vue b/frontend/app/web-gold/src/components/ui/progress/Progress.vue
index 5532af7a80..178a4903ff 100644
--- a/frontend/app/web-gold/src/components/ui/progress/Progress.vue
+++ b/frontend/app/web-gold/src/components/ui/progress/Progress.vue
@@ -24,15 +24,19 @@ const delegatedProps = reactiveOmit(props, "class")
     v-bind="delegatedProps"
     :class="
       cn(
-        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        'relative h-2 w-full overflow-hidden rounded-full',
         props.class,
       )
     "
+    :style="{ backgroundColor: 'color-mix(in srgb, var(--primary) 20%, transparent)' }"
   >
     <ProgressIndicator
       data-slot="progress-indicator"
-      class="bg-primary h-full w-full flex-1 transition-all"
-      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+      class="h-full w-full flex-1 transition-all"
+      :style="{
+        backgroundColor: 'var(--primary)',
+        transform: `translateX(-${100 - (props.modelValue ?? 0)}%)`,
+      }"
     />
   </ProgressRoot>
 </template>