Fixed table resizing

src/app/components/browse/browse.component.html

@@ -1,7 +1,7 @@
 <app-search-bar (resultsUpdated)="resultTable.results = $event"></app-search-bar>
 <div class="ui celled two column grid">
-  <div class="row">
+  <div id="table-row" class="row">
-    <div class="column twelve wide">
+    <div id="table-column" class="column twelve wide">
       <app-result-table #resultTable></app-result-table>
     </div>
     <div id="sidebar-column" class="column four wide">

src/app/components/browse/browse.component.scss

@@ -2,15 +2,25 @@
   display: contents;
 }
 
-.ui.celled.grid {
+.two.column.grid {
-  flex-grow: 1;
+  display: contents;
   margin: 0;
 }
 
+#table-row {
+  flex-grow: 1;
+  min-height: 0;
+  flex-wrap: nowrap;
+}
+
+#table-column {
+  overflow-y: auto;
+  padding: 0;
+}
+
 #sidebar-column {
   display: flex;
-}
+  min-width: 175px;
-
+  overflow: hidden;
-.ui.celled.grid > .row > .column {
   padding: 0;
 }

src/app/components/browse/result-table/result-table.component.html

@@ -1,16 +1,19 @@
-<table class="ui unstackable selectable single line striped celled table">
+<table class="ui stackable selectable single fixed line striped compact small table">
+  <!-- TODO: maybe have some of these tags customizable? E.g. small/large/compact/padded -->
+  <!-- TODO: maybe make add the sortable class? -->
+  <!-- TODO: learn semantic themes in order to change the $mobileBreakpoint global variable (better search table adjustment) -->
   <thead>
+    <!-- NOTE: it would be nice to make this header sticky, but Fomantic-UI doesn't currently support that -->
     <tr>
-      <th class="collapsing">
+      <th id="checkboxColumn" class="collapsing">
         <div class="ui checkbox">
           <input type="checkbox">
         </div>
       </th>
-      <th>Name</th>
+      <th class="four wide">Name</th>
-      <th>Artist</th>
+      <th class="four wide">Artist</th>
-      <th>Album</th>
+      <th class="four wide">Album</th>
-      <th>Genre</th>
+      <th class="four wide">Genre</th>
-      <th>Year</th>
     </tr>
   </thead>
   <tbody>
@@ -24,7 +27,6 @@
       <td>{{result.artist}}</td>
       <td>{{result.album}}</td>
       <td>{{result.genre}}</td>
-      <td>{{result.year}}</td>
     </tr>
   </tbody>
 </table>

src/app/components/browse/result-table/result-table.component.scss

@@ -1,4 +1,11 @@
+:host {
+  display: contents;
+}
+
 .ui.checkbox {
   display: block;
-  max-width: 17px;
+}
+
+#checkboxColumn {
+  width: 34.64px;
 }