Fix bug where attachment size wasn't visible when the filename was too long (#6033)

Uses flexbox, so works in recent browsers only. I don't plan to support olders.

5 files changed, 20 insertions, 4 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 042782a0c..d46771aa7 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -55,6 +55,7 @@ CHANGELOG Roundcube Webmail
 - Localized timezone selector (#4983)
 - Use 7bit encoding for ISO-2022-* charsets in sent mail (#5640)
 - Handle inline images also inside multipart/mixed messages (#5905)
+- Fix bug where attachment size wasn't visible when the filename was too long (#6033)
 - Fix checking table columns when there's more schemas/databases in postgres/mysql (#6047)
 - Fix css conflicts in user interface and e-mail content (#5891)
 - Fix duplicated signature when using Back button in Chrome (#5809)
diff --git a/program/steps/mail/attachments.inc b/program/steps/mail/attachments.inc
index 21f220871..2297cc0a8 100644
--- a/program/steps/mail/attachments.inc
+++ b/program/steps/mail/attachments.inc
@@ -226,7 +226,7 @@ function rcmail_attachment_success($attachment, $uploadid)
         $button = '';
     }
 
-    $link_content = sprintf('%s <span class="attachment-size"> (%s)</span>',
+    $link_content = sprintf('<span class="attachment-name">%s</span><span class="attachment-size">(%s)</span>',
         rcube::Q($attachment['name']), $RCMAIL->show_bytes($attachment['size']));
 
     $content_link = html::a(array(
diff --git a/program/steps/mail/compose.inc b/program/steps/mail/compose.inc
index b085dc001..3fd293cf6 100644
--- a/program/steps/mail/compose.inc
+++ b/program/steps/mail/compose.inc
@@ -1185,7 +1185,7 @@ function rcmail_compose_attachment_list($attrib)
                 continue;
             }
 
-            $link_content = sprintf('%s <span class="attachment-size"> (%s)</span>',
+            $link_content = sprintf('<span class="attachment-name">%s</span> <span class="attachment-size">(%s)</span>',
                 rcube::Q($a_prop['name']), $RCMAIL->show_bytes($a_prop['size']));
 
             $content_link = html::a(array(
diff --git a/program/steps/mail/show.inc b/program/steps/mail/show.inc
index b928ec308..3e3ceaeac 100644
--- a/program/steps/mail/show.inc
+++ b/program/steps/mail/show.inc
@@ -200,7 +200,6 @@ function rcmail_message_attachments($attrib)
             $mimetype = rcmail_fix_mimetype($attach_prop->mimetype);
             $class    = rcube_utils::file2class($mimetype, $filename);
             $id       = 'attach' . $attach_prop->mime_id;
-            $size     = html::span('attachment-size', '(' . rcube::Q($filesize) . ')');
 
             if ($attrib['maxlength'] && mb_strlen($filename) > $attrib['maxlength']) {
                 $title    = $filename;
@@ -210,7 +209,8 @@ function rcmail_message_attachments($attrib)
                 $title = '';
             }
 
-            $item = rcube::Q($filename) . ' ' . $size;
+            $item = html::span('attachment-name', rcube::Q($filename))
+                . html::span('attachment-size', '(' . rcube::Q($filesize) . ')');
 
             if (!$PRINT_MODE) {
                 $item = html::a(array(
@@ -219,6 +219,7 @@ function rcmail_message_attachments($attrib)
                         rcmail_output::JS_OBJECT_NAME, $attach_prop->mime_id),
                     'onmouseover' => $title ? '' : 'rcube_webmail.long_subject_title_ex(this, 0)',
                     'title'       => $title,
+                    'class'       => 'filename',
                     ), $item);
 
                 $attachments[$attach_prop->mime_id] = $mimetype;
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index f136dd764..d7af9f510 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -2979,6 +2979,20 @@ ul.toolbarmenu li span.copy {
 	background-position: -6px -378px;
 }
 
+.attachmentslist li a.filename {
+	display: flex;
+	overflow: hidden;
+}
+.attachmentslist li .attachment-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.attachmentslist li .attachment-size {
+	padding: 0 .25em;
+}
+
+
 /*** fieldset tabs ***/
 
 .tabbed.ui-tabs {