frontend: put tables in containers for better mobile display

basically does overflow:scroll

apkvitrine/templates/branch.tmpl

@@ -19,6 +19,7 @@
 # block content
 <h3 class="title is-3">Recently updated packages</h3>
 {{ quicksearch(branch) }}
+<div class="table-container">
 <table class="table is-bordered is-striped is-hoverable">
   <tr>
     <th>Name</th>
@@ -39,6 +40,7 @@
   </tr>
   # endfor
 </table>
+</div>
 
 # set last_page = query["total"] // query["limit"] + 1
 # set page = query["page"]

apkvitrine/templates/package.tmpl

@@ -29,6 +29,7 @@
  </a>
 </p>
 # endif
+<div class="table-container">
 <table class="table is-bordered pkgver">
   <tr>
     # for arch in arches
@@ -49,8 +50,10 @@
     # endfor
   </tr>
 </table>
+</div>
 
 <h3 class="title is-3">Details for version {{ newest }}</h3>
+<div class="table-container">
 <table class="table is-bordered" id="pkgdetails">
   <tr><th>Description</th> <td>{{ pkg.description }}</td></tr>
   # if pkg.url
@@ -85,6 +88,7 @@
   # set url = conf["gl_url"].format(startdir=startdir)
   <tr><th>Source files</th><td><a href="{{ url }}">View git repository</a></td></tr>
 </table>
+</div>
 
 <div id="related" class="columns is-desktop">
   <div class="column">

apkvitrine/templates/search.tmpl

@@ -113,6 +113,7 @@ Displaying the first {{ query["limit"] }}.
 # endif
 </div>
 # endif
+<div class="table-container">
 <table class="table is-bordered is-striped is-hoverable">
  <tr>
   <th>Name</th>
@@ -129,6 +130,7 @@ Displaying the first {{ query["limit"] }}.
  </tr>
  # endfor
 </table>
+</div>
 
 # set last_page = query["total"] // query["limit"] + 1
 # set page = query["page"]

style.css

@@ -11,10 +11,7 @@ nav.breadcrumb .is-active a { color: white }
   background: #EAECF0;
   border: 1px solid #A2A9B1;
 }
-.pkgver th {
-  text-align: center !important;
-  word-break: break-all;
-}
+.pkgver th { text-align: center !important }
 #pkgdetails th { width: 10em }
 
 #related .column summary {