From 715dcc491b6159cb79298a1d60c3b57d23085056 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Wed, 12 Apr 2017 22:40:10 -0500
Subject: [PATCH] /bans: size columns to avoid unnecessary wrapping.

Sizes columns such that they automatically shrink to fit. This fixes
problems with usernames and dates wrapping in the middle.
---
 app/assets/stylesheets/common/tables.scss | 16 ++++++++++++++++
 app/views/bans/index.html.erb             |  4 ++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/common/tables.scss b/app/assets/stylesheets/common/tables.scss
index 32877aa73..551e9f650 100644
--- a/app/assets/stylesheets/common/tables.scss
+++ b/app/assets/stylesheets/common/tables.scss
@@ -40,6 +40,22 @@ table.striped {
   }
 }
 
+/*
+ * A table where one column expands to fill the screen, while the
+ * other columns shrink to fit their contents.
+ */
+table.autofit {
+  td, th, .col-fit {
+    white-space: nowrap;
+    padding-right: 2em;
+  }
+
+  .col-expand {
+    white-space: normal;
+    width: 100%;
+  }
+}
+
 table.search {
   tr {
     height: 2em;
diff --git a/app/views/bans/index.html.erb b/app/views/bans/index.html.erb
index d1011f82b..4ab5c8fff 100644
--- a/app/views/bans/index.html.erb
+++ b/app/views/bans/index.html.erb
@@ -2,7 +2,7 @@
   <div id="a-index">
     <h1>Bans</h1>
 
-    <table class="striped" width="100%">
+    <table class="striped autofit">
       <thead>
         <tr>
           <th>User</th>
@@ -16,7 +16,7 @@
           <tr id="ban-<%= ban.id %>" data-expired="<%= ban.expired? %>">
             <td><%= link_to_user(ban.user) %></td>
             <td><%= ban.expires_at %></td>
-            <td><%= format_text ban.reason, :ragel => true %></td>
+            <td class="col-expand"><%= format_text ban.reason, :ragel => true %></td>
             <td>
               <% if CurrentUser.is_moderator? %>
                 <%= link_to "Edit", edit_ban_path(ban) %>