refactor(frontend):enhance image display and whitespace handling in IMAP module

Author: Grandi0z

modules/core/site.css

@@ -1584,7 +1584,7 @@ a[disabled] {
 
 /* Bootstrap-based message headers */
 .msg_text * {
-  white-space: normal !important;
+  white-space: normal;
   word-break: break-word;
   overflow-wrap: anywhere;
 }

modules/imap/functions.php

@@ -711,7 +711,10 @@ function format_attached_image_section($struct, $output_mod, $dl_link) {
     $isThereAnyImg = false;
     foreach ($struct as $id => $vals) {
         if ($vals['type'] === 'image') {
-            $res .= '<div><img class="attached_image" src="?'.$dl_link.'&amp;imap_msg_part='.$output_mod->html_safe($id).'" ></div>';
+            $res .= '<div class="col-6 col-md-3">
+                        <img class="attached_image img-fluid" 
+                             src="?' . $dl_link . '&amp;imap_msg_part=' . $output_mod->html_safe($id) . '" >
+                     </div>';
             $isThereAnyImg = true;
         }
         if (isset($vals['subs'])) {
@@ -720,7 +723,7 @@ function format_attached_image_section($struct, $output_mod, $dl_link) {
     }
 
     if ($isThereAnyImg) {
-        $res = '<div class="attached_image_box">' . $res . '</div>';
+        $res = '<div class="container-fluid"><div class="row text-center attached_image_box">' . $res . '</div></div>';
     }
 
     return $res;

modules/imap/site.css

@@ -222,6 +222,9 @@
   text-overflow: ellipsis;
   width: 20%;
 }
+.msg_parts td * {
+  white-space: nowrap;
+}
 .download_link {
   width: 100px;
 }
@@ -442,13 +445,13 @@
 }
 .mobile .download_link,
 .mobile .remove_attachment {
-  width: 50px !important;
   overflow: visible !important;
-  margin-left: 25px;
 }
 .mobile .part_desc,
 .mobile .part_size {
-  margin-left: 25px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .mobile .unflag_send_div {
   float: right;
@@ -465,13 +468,8 @@
   height: 200px;
 }
 .attached_image_box {
-  display: flex;
-  flex-wrap: wrap;
   border-top: solid 1px #ddd;
-  padding-top: 20px;
-  padding-left: 20px;
-  width: 100%;
-  padding-bottom: 40px;
+  padding-top: 1rem;
 }
 /* .list_meta { float: none; margin-left: 37%; } */