From 280283c6d55c246109f72357bd31499ace07ba27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Dahlgren?= <bjorn@dahlgren.io>
Date: Fri, 29 Oct 2021 19:24:33 +0200
Subject: [PATCH] Improve responsive layout of missions with long mission or
 world names

---
 public/js/tpl/missions/list.html                        | 2 +-
 public/js/tpl/missions/list_item.html                   | 5 +++--
 public/js/tpl/missions/workshop.html                    | 2 +-
 public/js/tpl/servers/missions/available/list.html      | 2 +-
 public/js/tpl/servers/missions/available/list_item.html | 7 ++++---
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/public/js/tpl/missions/list.html b/public/js/tpl/missions/list.html
index b2ef2c3..deabf11 100644
--- a/public/js/tpl/missions/list.html
+++ b/public/js/tpl/missions/list.html
@@ -2,7 +2,7 @@
   <thead>
     <tr>
       <th>Mission</th>
-      <th>World</th>
+      <th class="hidden-xs hidden-sm">World</th>
       <th>Size</th>
       <th>Updated</th>
       <th></th>
diff --git a/public/js/tpl/missions/list_item.html b/public/js/tpl/missions/list_item.html
index adcc36c..87220c0 100644
--- a/public/js/tpl/missions/list_item.html
+++ b/public/js/tpl/missions/list_item.html
@@ -1,7 +1,8 @@
-<td style="width: 100%;">
+<td style="width: 100%; word-break: break-all;">
   <a href='/api/missions/<%-encodeURI(name)%>'><%-missionName%></a>
+  <span class="visible-xs visible-sm"><%-worldName%></span>
 </td>
-<td><%-worldName%></td>
+<td class="hidden-xs hidden-sm"><%-worldName%></td>
 <td class="text-nowrap"><%-sizeFormatted%></td>
 <td class="text-nowrap"><%-dateModified.substring(0, 10)%></td>
 <td>
diff --git a/public/js/tpl/missions/workshop.html b/public/js/tpl/missions/workshop.html
index bcde80e..8a9fd54 100644
--- a/public/js/tpl/missions/workshop.html
+++ b/public/js/tpl/missions/workshop.html
@@ -4,7 +4,7 @@
     <input type="number" class="form-control workshop" name="workshop" id="workshop">
     <span class="help-block">
       ID can be found in the URL of Workshop i.e.
-      <i>https://steamcommunity.com/workshop/filedetails/?id=$id</i>
+      <i style="word-break: break-all;">https://steamcommunity.com/workshop/filedetails/?id=$id</i>
     </span>
   </div>
   <button type="submit" class="btn btn-primary ladda-button" data-style="expand-left">
diff --git a/public/js/tpl/servers/missions/available/list.html b/public/js/tpl/servers/missions/available/list.html
index baa0586..e1323e8 100644
--- a/public/js/tpl/servers/missions/available/list.html
+++ b/public/js/tpl/servers/missions/available/list.html
@@ -3,7 +3,7 @@
     <thead>
       <tr>
         <th>Mission</th>
-        <th>World</th>
+        <th class="hidden-xs hidden-sm">World</th>
         <th>&nbsp;</th>
       </tr>
     </thead>
diff --git a/public/js/tpl/servers/missions/available/list_item.html b/public/js/tpl/servers/missions/available/list_item.html
index 0c72dd9..3262cbf 100644
--- a/public/js/tpl/servers/missions/available/list_item.html
+++ b/public/js/tpl/servers/missions/available/list_item.html
@@ -1,7 +1,8 @@
-<td>
-  <%-missionName%>
+<td style="width: 100%; word-break: break-all;">
+  <span><%-missionName%></span>
+  <span class="visible-xs visible-sm"><%-worldName%></span>
 </td>
-<td>
+<td class="hidden-xs hidden-sm">
   <%-worldName%>
 </td>
 <td>