From fe389e1d4bd1413b4326050747d22ec1815a16b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Ostafin?= <ostafin.lucas@gmail.com>
Date: Tue, 25 Jun 2024 13:54:20 +0200
Subject: [PATCH] IBX-8163: Upload modal files display too short file names
 (#1276)

* IBX-8163: Upload modal files display too short file names

* After QA
---
 .../scss/ui/modules/muti-file-upload/_progress.bar.scss      | 5 +++--
 .../scss/ui/modules/muti-file-upload/_upload.item.scss       | 5 +++--
 2 files changed, 6 insertions(+), 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
index 0a7dd9ff5a..cbade8c2f1 100644
--- 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,7 +1,7 @@
 .c-progress-bar {
     width: 100%;
     display: flex;
-    justify-content: space-between;
+    justify-content: right;
     align-items: center;
 
     &__value {
@@ -9,8 +9,9 @@
         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
index 19696088af..8300401a19 100644
--- 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;
     }