gui: Adjust table column width to content size (fixes #4531) (#5565)

gui/default/assets/css/overrides.css

@@ -124,6 +124,18 @@ table.table-condensed td.no-overflow-ellipse {
     white-space: normal;
 }
 
+table.table-auto {
+	table-layout: auto;
+}
+
+table.table-auto th {
+	width: 1px;
+}
+
+table.table-auto td {
+    max-width: 0px;
+}
+
 .folder-advanced {
     padding: 1rem;
     margin-bottom: 15px;

gui/default/index.html

@@ -337,7 +337,7 @@
             </button>
             <div id="folder-{{$index}}" class="panel-collapse collapse">
               <div class="panel-body">
-                <table class="table table-condensed table-striped">
+                <table class="table table-condensed table-striped table-auto">
                   <tbody>
                     <tr ng-show="folder.label != undefined && folder.label.length > 0">
                       <th><span class="fas fa-fw fa-info-circle"></span>&nbsp;<span translate>Folder ID</span></th>
@@ -551,7 +551,7 @@
           </button>
           <div id="device-this" class="panel-collapse collapse in">
             <div class="panel-body">
-              <table class="table table-condensed table-striped">
+              <table class="table table-condensed table-striped table-auto">
                 <tbody>
                   <tr>
                     <th><span class="fas fa-fw fa-cloud-download-alt"></span>&nbsp;<span translate>Download Rate</span></th>
@@ -667,7 +667,7 @@
             </button>
             <div id="device-{{$index}}" class="panel-collapse collapse">
               <div class="panel-body">
-                <table class="table table-condensed table-striped">
+                <table class="table table-condensed table-striped table-auto">
                   <tbody>
                     <tr ng-if="connections[deviceCfg.deviceID].connected">
                       <th><span class="fas fa-fw fa-cloud-download-alt"></span>&nbsp;<span translate>Download Rate</span></th>