IBX-8163: Upload modal files display too short file names (#1276)

* IBX-8163: Upload modal files display too short file names * After QA
ibexa · Jun 25, 2024 · fe389e1 · fe389e1
1 parent c55d0f5
commit fe389e1
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_progress.bar.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_progress.bar.scss
@@ -1,16 +1,17 @@
 .c-progress-bar {
     width: 100%;
     display: flex;
-    justify-content: space-between;
+    justify-content: right;
     align-items: center;
 
     &__value {
         background: linear-gradient(90deg, $ibexa-color-warning 0%, $ibexa-color-accent 44.95%, $ibexa-color-success 100%);
         border-radius: calculateRem(4px);
         transition: width 0.2s linear;
         height: calculateRem(8px);
-        width: calculateRem(176px);
+        width: calculateRem(100px);
         position: relative;
+        margin-right: calculateRem(8px);
 
         &::after {
             content: '';

diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss
@@ -46,7 +46,7 @@
 
     &__meta {
         padding: 0 calculateRem(8px);
-        max-width: 25vw;
+        max-width: calculateRem(450px);
         height: calculateRem(48px);
         display: flex;
         justify-content: center;
@@ -55,13 +55,14 @@
 
     &__name {
         margin-right: calculateRem(8px);
-        max-width: calculateRem(172px);
+        max-width: calculateRem(350px);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
     &__size {
+        min-width: calculateRem(80px);
         color: $ibexa-color-dark-400;
         font-size: $ibexa-text-font-size-small;
     }