Fixes to CSS

backend/static/css/styles.css

@@ -7,6 +7,9 @@ body {
   background: #262626;
 }
 
+.pure-table-even {
+  background: #fff;
+}
 /* Some styles from https://css-tricks.com/ */
 
 a {
@@ -17,6 +20,14 @@ a.github-link {
   color: #fff;
 }
 
+
+.pure-menu-horizontal {
+  background: #fff;
+  padding: 5px;
+  display: flex;
+  justify-content: space-between;
+}
+
 section.content {
 
   padding-top: 5em;
@@ -28,24 +39,45 @@ flex-direction: column;
 }
 
 .pure-table.watch-table td {
-  font-size: 90%;
+  font-size: 80%;
 }
 
-.watch-table .error {
-color: #aa0000;
+/* table related */
+.watch-table {
+  width: 100%;
 }
 
-.home-menu {
-background: #fff;
-padding: 5px;
+.box {
+  max-width: 80%;
+  flex-direction: column;
   display: flex;
-    justify-content: space-between;
+  justify-content: center;
 }
 
-.pure-table-even  {
-/* missing */
-background: #fff;
+.watch-table .error {
+  color: #a00;
+}
+
+.watch-table td {
+  white-space: nowrap;
+}
+
+.watch-table td.title-col {
+  word-break: break-all;
+  white-space: normal;
+}
+.watch-table th {
+  white-space: nowrap;
+}
+
+.watch-table .title-col a[target="_blank"]::after {
+  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
+  margin: 0 3px 0 5px;
 }
+
+/* hotovo */
+
+
 body:after {
   content: "";
   background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%)
@@ -65,8 +97,7 @@ body:after,body:before {
 }
 body::before {
   content: "";
-      background-image:
-        url(/static/images/gradient-border.png);
+  background-image: url(/static/images/gradient-border.png);
 }
 body:before {
   background-size: cover
@@ -78,16 +109,10 @@ body:after,body:before {
 }
 
 
-
-
 .button-small {
   font-size: 85%;
 }
 
-a[target="_blank"]::after {
-  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
-  margin: 0 3px 0 5px;
-}
 
 .fetch-error {
   padding-top: 1em;

backend/templates/watch-overview.html

@@ -16,6 +16,7 @@
 
     <!-- make a nice list of tags here to click on -->
     <i>Note: Times are in UTC for now - todo - JS front end format<br/></i>
+    <div id="watch-table-wrapper">
         <table class="pure-table pure-table-striped watch-table">
             <thead>
             <tr>
@@ -30,9 +31,11 @@
 
 
             {% for watch in watches %}
-        <tr id="{{ watch.uuid }}" class="{{ loop.cycle('pure-table-odd', 'pure-table-even') }} {% if watch.last_error is defined and watch.last_error != False %}error{% endif %}">
+            <tr id="{{ watch.uuid }}"
+                class="{{ loop.cycle('pure-table-odd', 'pure-table-even') }} {% if watch.last_error is defined and watch.last_error != False %}error{% endif %}">
                 <td>{{ loop.index }}</td>
-            <td>{% if watch.title is not none %}{{ watch.title }}{% else %}{{ watch.url }}{% endif %}<a class="external" target=_blank href="{{ watch.url }}"></a>
+                <td class="title-col">{% if watch.title is not none %}{{ watch.title }}{% else %}{{ watch.url }}{% endif
+                    %}<a class="external" target=_blank href="{{ watch.url }}"></a>
                     {% if watch.last_error is defined and watch.last_error != False %}
                     <div class="fetch-error">{{ watch.last_error }}</div>
                     {% endif %}
@@ -41,7 +44,9 @@
 
                 </td>
                 <td>{{watch.last_changed|format_timestamp_timeago}}</td>
-            <td><a href="/api/checknow?uuid={{ watch.uuid}}" class="pure-button button-small pure-button-primary">Recheck</a> <button type="submit" class="pure-button  button-small pure-button-primary">Delete</button></td>
+                <td><a href="/api/checknow?uuid={{ watch.uuid}}" class="pure-button button-small pure-button-primary">Recheck</a>
+                    <button type="submit" class="pure-button  button-small pure-button-primary">Delete</button>
+                </td>
             </tr>
             {% endfor %}
 
@@ -49,4 +54,5 @@
             </tbody>
         </table>
     </div>
+</div>
 {% endblock %}