settings: Set min-width of table columns for narrow screens.

This commit adds minimum width property for different columns
such that the columns do not get too small for narrow screens
and the tables can be scrolled horizontally to view the content.

web/styles/settings.css

@@ -1825,6 +1825,36 @@ $option_title_width: 180px;
     }
 }
 
+@media (width < 830px) and (width > $md_min) {
+    .upload-file-name {
+        min-width: 10em;
+    }
+
+    #user_topics_table {
+        .user-topic-stream {
+            min-width: 6em;
+        }
+
+        .user-topic {
+            min-width: 10em;
+        }
+    }
+
+    .user_row {
+        .user_name,
+        .email {
+            min-width: 8em;
+        }
+    }
+
+    .admin_profile_fields_table {
+        .profile_field_name,
+        .profile_field_hint {
+            min-width: 8em;
+        }
+    }
+}
+
 @media (width < $sm_min) {
     .user_row,
     .settings-section {
@@ -1860,6 +1890,34 @@ $option_title_width: 180px;
     #change_email_modal {
         width: 400px;
     }
+
+    .upload-file-name {
+        min-width: 10em;
+    }
+
+    #user_topics_table {
+        .user-topic {
+            min-width: 10em;
+        }
+
+        .user-topic-stream {
+            min-width: 6em;
+        }
+    }
+
+    .user_row {
+        .user_name,
+        .email {
+            min-width: 8em;
+        }
+    }
+
+    .admin_profile_fields_table {
+        .profile_field_name,
+        .profile_field_hint {
+            min-width: 8em;
+        }
+    }
 }
 
 @media (width < $ml_min) {

web/templates/settings/admin_profile_field_list.hbs

@@ -1,13 +1,13 @@
 {{#with profile_field}}
 <tr class="profile-field-row movable-row" data-profile-field-id="{{id}}">
-    <td>
+    <td class="profile_field_name">
         {{#if ../can_modify}}
         <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
         <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
         {{/if}}
         <span class="profile_field_name">{{name}}</span>
     </td>
-    <td>
+    <td class="profile_field_hint">
         <span class="profile_field_hint">{{hint}}</span>
     </td>
     <td>

web/templates/settings/admin_user_list.hbs

@@ -1,5 +1,5 @@
 <tr class="user_row{{#if is_active}} active-user{{else}} deactivated_user{{/if}}" data-user-id="{{user_id}}">
-    <td>
+    <td class="user_name">
         <span class="user_name" >
             <a data-user-id="{{user_id}}" class="view_user_profile" tabindex="0">{{full_name}}</a>
             {{#if is_current_user}}<span class="my_user_status">{{t '(you)' }}</span>{{/if}}</span>
@@ -10,11 +10,11 @@
         {{/if}}
     </td>
     {{#if display_email}}
-    <td>
+    <td class="email">
         <span class="email">{{display_email}}</span>
     </td>
     {{else}}
-    <td>
+    <td class="email">
         <span class="hidden-email">{{t "(hidden)"}}</span>
     </td>
     {{/if}}

web/templates/user_topic_ui_row.hbs

@@ -1,7 +1,7 @@
 {{#with user_topic}}
 <tr data-stream-id="{{stream_id}}" data-stream="{{stream}}" data-topic="{{topic}}" data-date-updated="{{date_updated_str}}" data-visibility-policy="{{visibility_policy}}">
-    <td>{{stream}}</td>
+    <td class="user-topic-stream">{{stream}}</td>
-    <td class="white-space-preserve-wrap">{{topic}}</td>
+    <td class="white-space-preserve-wrap user-topic">{{topic}}</td>
     <td>
         <select class="settings_user_topic_visibility_policy list_select bootstrap-focus-style" data-setting-widget-type="number">
             {{#each ../user_topic_visibility_policy_values}}