From a682fa52c6e35c8a2abcaec12dff1529be061716 Mon Sep 17 00:00:00 2001
From: Geomitron <22552797+Geomitron@users.noreply.github.com>
Date: Thu, 6 Feb 2020 22:18:49 -0500
Subject: [PATCH] Fixed table resizing

---
 .../components/browse/browse.component.html   |  4 ++--
 .../components/browse/browse.component.scss   | 20 ++++++++++++++-----
 .../result-table/result-table.component.html  | 18 +++++++++--------
 .../result-table/result-table.component.scss  |  9 ++++++++-
 4 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/app/components/browse/browse.component.html b/src/app/components/browse/browse.component.html
index 1417a8e..a37d15d 100644
--- a/src/app/components/browse/browse.component.html
+++ b/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 class="column twelve wide">
+  <div id="table-row" class="row">
+    <div id="table-column" class="column twelve wide">
       <app-result-table #resultTable></app-result-table>
     </div>
     <div id="sidebar-column" class="column four wide">
diff --git a/src/app/components/browse/browse.component.scss b/src/app/components/browse/browse.component.scss
index 84ba294..c8a9b51 100644
--- a/src/app/components/browse/browse.component.scss
+++ b/src/app/components/browse/browse.component.scss
@@ -2,15 +2,25 @@
   display: contents;
 }
 
-.ui.celled.grid {
-  flex-grow: 1;
+.two.column.grid {
+  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;
-}
-
-.ui.celled.grid > .row > .column {
+  min-width: 175px;
+  overflow: hidden;
   padding: 0;
 }
\ No newline at end of file
diff --git a/src/app/components/browse/result-table/result-table.component.html b/src/app/components/browse/result-table/result-table.component.html
index 74b433c..c5e41e9 100644
--- a/src/app/components/browse/result-table/result-table.component.html
+++ b/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>Artist</th>
-      <th>Album</th>
-      <th>Genre</th>
-      <th>Year</th>
+      <th class="four wide">Name</th>
+      <th class="four wide">Artist</th>
+      <th class="four wide">Album</th>
+      <th class="four wide">Genre</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>
\ No newline at end of file
diff --git a/src/app/components/browse/result-table/result-table.component.scss b/src/app/components/browse/result-table/result-table.component.scss
index 65ddab3..41a20c4 100644
--- a/src/app/components/browse/result-table/result-table.component.scss
+++ b/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;
 }
\ No newline at end of file