From 393f4bbc260b89734c39ae74c96b457904d8c9fc Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Tue, 20 Aug 2019 10:09:42 -0700
Subject: [PATCH] names: Perform better layout of domain names table on small
 screens

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
---
 plinth/modules/names/templates/names.html | 6 +++---
 static/themes/default/css/plinth.css      | 9 +++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/plinth/modules/names/templates/names.html b/plinth/modules/names/templates/names.html
index f94664e5f..11cdb7202 100644
--- a/plinth/modules/names/templates/names.html
+++ b/plinth/modules/names/templates/names.html
@@ -23,11 +23,11 @@
 
 {% block configuration %}
 
-  <table class="table table-bordered table-condensed table-striped">
+  <table class="table table-bordered table-condensed table-striped names-table">
     <thead>
       <tr>
         <th>Type</th>
-        <th>Domain Name</th>
+        <th class="names-domain-column">Domain Name</th>
         <th>Services</th>
         <th></th>
       </tr>
@@ -36,7 +36,7 @@
       {% for domain in status.domains|dictsort:"domain_type.display_name" %}
         <tr>
           <td>{{ domain.domain_type.display_name }}</td>
-          <td>{{ domain.name }}</td>
+          <td class="names-domain-column">{{ domain.name }}</td>
           <td>{{ domain.get_readable_services|join:', ' }}</td>
           <td>
             <a href="{% url domain.domain_type.configuration_url %}"
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index 7f00054cf..e79a55991 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -455,3 +455,12 @@ a.menu_link_active {
     height: 3px;
     background-color: white;
 }
+
+.names-table {
+    table-layout: fixed;
+    overflow-wrap: break-word;
+}
+
+.names-domain-column {
+    width: 50%;
+}