From 0ca5d116701b99c72fffc71f34e0b2aac73d0d17 Mon Sep 17 00:00:00 2001
From: Palash Baderia <palash.baderia@outlook.com>
Date: Tue, 11 Oct 2022 17:50:27 +0530
Subject: [PATCH] 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                   |  2 +-
 static/styles/settings.css                         | 11 ++++++++++-
 static/templates/settings/attachments_settings.hbs |  4 ++--
 static/templates/settings/uploaded_files_list.hbs  |  2 +-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/static/styles/app_components.css b/static/styles/app_components.css
index 5e6e933fa1..1819ee05bc 100644
--- a/static/styles/app_components.css
+++ b/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;
diff --git a/static/styles/settings.css b/static/styles/settings.css
index b730cde3e0..3b65ccd752 100644
--- a/static/styles/settings.css
+++ b/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;
diff --git a/static/templates/settings/attachments_settings.hbs b/static/templates/settings/attachments_settings.hbs
index d318aca774..a1ba323b60 100644
--- a/static/templates/settings/attachments_settings.hbs
+++ b/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>
diff --git a/static/templates/settings/uploaded_files_list.hbs b/static/templates/settings/uploaded_files_list.hbs
index 309223d6fd..a345bb1c9d 100644
--- a/static/templates/settings/uploaded_files_list.hbs
+++ b/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>