From ccb322016e645ef6ebe7072f13cb856dce2e7143 Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Wed, 12 Aug 2020 19:44:33 +0200
Subject: [PATCH] re-arrange demodulator buttons in a dynamic grid

---
 htdocs/css/openwebrx.css       | 14 +++++++++++++-
 htdocs/lib/DemodulatorPanel.js | 16 +++-------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index fd81097..caf5b44 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -445,7 +445,7 @@ input[type=range]:disabled {
 
 .openwebrx-demodulator-button
 {
-	width: 38px;
+	min-width: 38px;
 	height: 19px;
 	font-size: 12pt;
 	text-align: center;
@@ -620,6 +620,18 @@ img.openwebrx-mirror-img
     padding-top: 0;
 }
 
+.openwebrx-modes-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+    grid-gap: 5px;
+}
+
+.openwebrx-modes-grid .openwebrx-demodulator-button {
+    margin: 0;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
 #openwebrx-smeter-outer
 {
 	border-color: #888;
diff --git a/htdocs/lib/DemodulatorPanel.js b/htdocs/lib/DemodulatorPanel.js
index 439a8e5..c276392 100644
--- a/htdocs/lib/DemodulatorPanel.js
+++ b/htdocs/lib/DemodulatorPanel.js
@@ -57,19 +57,9 @@ DemodulatorPanel.prototype.render = function() {
         );
     });
 
-    var index = 0;
-    var arrayLength = buttons.length;
-    var chunks = [];
-
-    for (index = 0; index < arrayLength; index += 5) {
-        chunks.push(buttons.slice(index, index + 5));
-    }
-
-    html.push.apply(html, chunks.map(function(chunk){
-        $line = $('<div class="openwebrx-panel-line openwebrx-panel-flex-line"></div>');
-        $line.append.apply($line, chunk);
-        return $line
-    }));
+    var $modegrid = $('<div class="openwebrx-modes-grid"></div>');
+    $modegrid.append.apply($modegrid, buttons);
+    html.push($modegrid);
 
     html.push($(
         '<div class="openwebrx-panel-line openwebrx-panel-flex-line">' +