settings: Improve column widths in settings > uploaded files.

Changed the width of the file column to show the names properly,
while making sure that the table UI remains consistent in different
languages too (checked the same for Russian language).

Drop the file size column if the viewport is less than 992px (lg_min)
to ensure that the size word doesn't break when there are no uploaded files.
Discussed on CZO thread.

Changed the position of the Date uploaded arrow to stay visible
in all view ports and added word-break to prevent spill over of Mentioned-in
and date uploaded.

Fixes: #23738

static/styles/app_components.css

@@ -708,7 +708,7 @@ div.overlay {
             content: " \f0d8";
             white-space: pre;
             display: inline-block;
-            position: absolute;
+            position: relative;
             padding-top: 3px;
             font: normal normal normal 12px/1 FontAwesome;
             font-size: inherit;

static/styles/settings.css

@@ -231,10 +231,15 @@ h3,
 
 #uploaded_files_table > tr > td:nth-of-type(1),
 .upload-file-name {
-    width: 30%;
+    width: 43%;
     word-break: break-all;
 }
 
+.upload-mentioned-in,
+.upload-date {
+    word-break: normal;
+}
+
 #linkifier-settings {
     #linkifier_pattern,
     #linkifier_format_string {
@@ -1741,6 +1746,10 @@ $option_title_width: 180px;
 }
 
 @media (width < $lg_min) {
+    .upload-size {
+        display: none;
+    }
+
     .user-avatar-section,
     .realm-icon-section {
         display: block;

static/templates/settings/attachments_settings.hbs

@@ -10,8 +10,8 @@
         <table class="table table-condensed table-striped wrapped-table">
             <thead class="table-sticky-headers">
                 <th data-sort="alphabetic" data-sort-prop="name" class="upload-file-name">{{t "File" }}</th>
-                <th class="active" data-sort="numeric" data-sort-prop="create_time">{{t "Date uploaded" }}</th>
-                <th data-sort="mentioned_in">{{t "Mentioned in" }}</th>
+                <th class="active upload-date" data-sort="numeric" data-sort-prop="create_time">{{t "Date uploaded" }}</th>
+                <th class="upload-mentioned-in" data-sort="mentioned_in">{{t "Mentioned in" }}</th>
                 <th class="upload-size" data-sort="numeric" data-sort-prop="size">{{t "Size" }}</th>
                 <th class="upload-actions actions">{{t "Actions" }}</th>
             </thead>

static/templates/settings/uploaded_files_list.hbs

@@ -17,7 +17,7 @@
         </div>
         {{/if}}
     </td>
-    <td>{{ size_str }}</td>
+    <td class="upload-size" >{{ size_str }}</td>
     <td class="actions">
         <span class="edit-attachment-buttons">
             <a type="submit" href="/user_uploads/{{path_id}}" class="btn no-style" title="{{t 'Download file' }}" id="download_attachment" download>