Adding custom styles.

server/ui/src/Main.css

@@ -1,4 +1,11 @@
-.red {
-    text-align: center;
-    color: red;
+.table-fixed {
+    table-layout: fixed;
+}
+
+.search-name-col {
+    width: 50%;
+}
+
+.search-name-cell {
+    word-wrap: break-word;
 }

server/ui/src/components/search.tsx

@@ -101,10 +101,10 @@ export class Search extends Component<any, State> {
   table() {
     return (
       <div>
-        <table style="table-layout: fixed;" class="table table-fixed table-hover table-sm table-striped">
+        <table class="table table-fixed table-hover table-sm table-striped">
           <thead>
             <tr>
-              <th style="width: 50%">Name</th>
+              <th class="search-name-col">Name</th>
               <th class="text-right">Size</th>
               <th class="text-right">Seeds</th>
               <th class="text-right d-none d-md-table-cell">Leeches</th>
@@ -115,7 +115,7 @@ export class Search extends Component<any, State> {
           <tbody>
             {this.state.results.torrents.map(torrent => (
               <tr>
-                <td style="word-wrap: break-word;">{torrent.name}</td>
+                <td class="search-name-cell">{torrent.name}</td>
                 <td class="text-right text-muted">{humanFileSize(torrent.size_bytes, true)}</td>
                 <td class="text-right text-success"><div><i class="fas fa-fw fa-arrow-up"></i>{torrent.seeders}</div></td>
                 <td class="text-right text-danger d-none d-md-table-cell"><i class="fas fa-fw fa-arrow-down"></i>{torrent.leechers}</td>

server/ui/src/index.tsx

@@ -1,5 +1,5 @@
 import { render, Component } from 'inferno';
-import { HashRouter, Route, Switch, Link } from 'inferno-router';
+import { HashRouter, Route, Switch } from 'inferno-router';
 
 import { Navbar } from './components/navbar';
 import { Home } from './components/home';