From ecf78781b5b5e4e2d2ac5a26ae92dd0889b6fb2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=93scar=20Garc=C3=ADa=20Amor?= <ogarcia@connectical.com>
Date: Wed, 4 Dec 2024 12:04:27 +0100
Subject: [PATCH] Improves support for small screens a bit more

---
 supysonic/templates/folders.html   | 44 +++++++--------
 supysonic/templates/home.html      |  6 +--
 supysonic/templates/layout.html    |  2 +-
 supysonic/templates/playlist.html  | 48 +++++++++--------
 supysonic/templates/playlists.html | 86 ++++++++++++++++--------------
 supysonic/templates/profile.html   | 52 +++++++++---------
 supysonic/templates/users.html     | 38 ++++++-------
 7 files changed, 145 insertions(+), 131 deletions(-)

diff --git a/supysonic/templates/folders.html b/supysonic/templates/folders.html
index 4a48b09..6084c3d 100644
--- a/supysonic/templates/folders.html
+++ b/supysonic/templates/folders.html
@@ -13,27 +13,29 @@
 {% endblock %}
 {% block body %}
 <h2 class="mt-4 pb-2 border-bottom">Music folders</h2>
-<table class="table table-striped table-hover align-middle">
-  <thead>
-    <tr><th>Name</th><th>Path</th><th></th>{% if allow_scan %}<th></th>{% endif %}</tr>
-  </thead>
-  <tbody>
-    {% for folder in folders %}
-    <tr>
-      <td>{{ folder.name }}</td><td>{{ folder.path }}</td>
-      <td><button class="btn btn-outline-danger btn-sm" data-href="{{ url_for('frontend.del_folder', id = folder.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-delete" aria-label="Delete folder">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete folder" viewBox="0 0 16 16">
-            <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
-            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
-          </svg></button></td>
-      {%if allow_scan %}<td><a class="btn btn-outline-secondary btn-sm" href="{{ url_for('frontend.scan_folder', id = folder.id) }}" aria-label="Scan folder">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Scan folder" viewBox="0 0 16 16">
-            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
-          </svg></a></td>{% endif %}
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
+<div class="table-responsive">
+  <table class="table table-striped table-hover align-middle">
+    <thead>
+      <tr><th>Name</th><th>Path</th><th></th>{% if allow_scan %}<th></th>{% endif %}</tr>
+    </thead>
+    <tbody>
+      {% for folder in folders %}
+      <tr>
+        <td>{{ folder.name }}</td><td>{{ folder.path }}</td>
+        <td><button class="btn btn-outline-danger btn-sm" data-href="{{ url_for('frontend.del_folder', id = folder.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-delete" aria-label="Delete folder">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete folder" viewBox="0 0 16 16">
+              <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+              <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+            </svg></button></td>
+        {%if allow_scan %}<td><a class="btn btn-outline-secondary btn-sm" href="{{ url_for('frontend.scan_folder', id = folder.id) }}" aria-label="Scan folder">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Scan folder" viewBox="0 0 16 16">
+              <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+            </svg></a></td>{% endif %}
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
 <a href="{{ url_for('frontend.add_folder_form') }}" class="btn btn-light">Add new folder</a>
 {% if allow_scan %}<a href="{{ url_for('frontend.scan_folder') }}" class="btn btn-light">Scan all folders</a>{% endif %}
 <div class="modal fade" id="confirm-delete" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="confirm-delete-label" aria-hidden="true">
diff --git a/supysonic/templates/home.html b/supysonic/templates/home.html
index f97625f..323eabe 100644
--- a/supysonic/templates/home.html
+++ b/supysonic/templates/home.html
@@ -17,7 +17,7 @@ <h2 class="mt-4 pb-2 border-bottom">Welcome to Supysonic!</h2>
 you'll have to use one of the available clients. Here's a small list of
 clients that have been tested.</p>
 <div class="row">
-  <div class="col mb-3">
+  <div class="col-md-6 mb-3">
     <div class="card">
       <div class="card-header">
         Web-based
@@ -30,7 +30,7 @@ <h2 class="mt-4 pb-2 border-bottom">Welcome to Supysonic!</h2>
       </div>
     </div>
   </div>
-  <div class="col mb-3">
+  <div class="col-md-6 mb-3">
     <div class="card">
       <div class="card-header">
         Android apps
@@ -53,7 +53,7 @@ <h2 class="mt-4 pb-2 border-bottom">Welcome to Supysonic!</h2>
         Stats
       </div>
       <div class="card-body">
-        <div class="row">
+        <div class="row grid gap-3">
           <div class="col">
             <div class="text-center">
               <div class="stats mb-3">
diff --git a/supysonic/templates/layout.html b/supysonic/templates/layout.html
index 35c965e..56cbb7a 100644
--- a/supysonic/templates/layout.html
+++ b/supysonic/templates/layout.html
@@ -65,7 +65,7 @@
             <ul class="dropdown-menu dropdown-menu-end">
               <li class="text-center">
                 <div class="btn-group w-100 px-3" role="group" aria-label="Toggle theme">
-                  <input type="radio" class="btn-check" name="theme" id="light" value="light" autocomplete="off" checked>
+                  <input type="radio" class="btn-check" name="theme" id="light" value="light" autocomplete="off">
                   <label class="btn btn-outline-secondary" for="light"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brightness-high" aria-label="Light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Light" viewBox="0 0 16 16">
                     <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/>
                   </svg></label>
diff --git a/supysonic/templates/playlist.html b/supysonic/templates/playlist.html
index 0f63d40..fcb644b 100644
--- a/supysonic/templates/playlist.html
+++ b/supysonic/templates/playlist.html
@@ -16,29 +16,33 @@ <h2 class="mt-4 pb-2 border-bottom">Playlist "{{ playlist.name }}"</h2>
 {% if playlist.user.id == request.user.id %}
 <h3>Edit</h3>
 <form method="post">
-<table id="playlist" class="table align-middle">
-  <thead>
-    <tr><th>Name</th><th>Public</th><th></th></tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><input type="text" class="form-control" name="name" value="{{ playlist.name }}" /></td>
-      <td><div class="form-switch"><input type="checkbox" class="form-check-input" role="switch" name="public" {% if playlist.public %}checked="true"{% endif %} /></div></td>
-      <td><button class="btn btn-light" type="submit">Update</button></td>
-    </tr>
-  </tbody>
-</table>
+  <div class="table-responsive">
+    <table id="playlist" class="table align-middle">
+      <thead>
+        <tr><th>Name</th><th>Public</th><th></th></tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><input type="text" class="form-control" name="name" value="{{ playlist.name }}" /></td>
+          <td><div class="form-switch"><input type="checkbox" class="form-check-input" role="switch" name="public" {% if playlist.public %}checked="true"{% endif %} /></div></td>
+          <td><button class="btn btn-light" type="submit">Update</button></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </form>
 {% endif %}
 <h3>Tracks</h3>
-<table class="table table-striped">
-  <thead>
-    <tr><th>Artist</th><th>Title</th><th>Album</th><th>Length</th></tr>
-  </thead>
-  <tbody>
-    {% for t in playlist.get_tracks() %}
-    <tr><td>{{ t.album.artist.name }}</td><td>{{ t.title }}</td><td>{{ t.album.name }}</td><td>{{ t.duration_str() }}</td></tr>
-    {% endfor %}
-  </tbody>
-</table>
+<div class="table-responsive">
+  <table class="table table-striped">
+    <thead>
+      <tr><th>Artist</th><th>Title</th><th>Album</th><th>Length</th></tr>
+    </thead>
+    <tbody>
+      {% for t in playlist.get_tracks() %}
+      <tr><td>{{ t.album.artist.name }}</td><td>{{ t.title }}</td><td>{{ t.album.name }}</td><td>{{ t.duration_str() }}</td></tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
 {% endblock %}
diff --git a/supysonic/templates/playlists.html b/supysonic/templates/playlists.html
index 612c726..aa28ff8 100644
--- a/supysonic/templates/playlists.html
+++ b/supysonic/templates/playlists.html
@@ -16,51 +16,55 @@ <h2 class="mt-4 pb-2 border-bottom">My playlists</h2>
 {% if not mine.count() %}
 <p>You don't have any playlists.</p>
 {% else %}
-<table class="table table-striped table-hover align-middle">
-  <thead>
-    <tr><th>Playlist</th><th>Tracks</th><th>Public</th><th>Export</th><th>Delete</th></tr>
-  </thead>
-  <tbody>
-    {% for p in mine %}
-    <tr>
-      <td><a href="{{ url_for('frontend.playlist_details', uid = p.id) }}">{{ p.name }}</a></td>
-      <td>{{ p.get_tracks()|length }}</td>
-      <td>{% if p.public %}<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-square bi-va-fix" aria-label="Public playlist" viewBox="0 0 16 16">
-          <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
-          <path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
-        </svg>{% else %}<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square bi-va-fix" aria-label="Private playlist" viewBox="0 0 16 16">
-          <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
-        </svg>{% endif %}</td>
-      <td><button class="btn btn-outline-secondary btn-sm" data-href="{{ url_for('frontend.playlist_export', uid = p.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-export" aria-label="Export playlist">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-square-fill bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Export M3U playlist" viewBox="0 0 16 16">
-            <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm8.5 2.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293z"/>
-          </svg></button></td>
-      <td><button class="btn btn-outline-danger btn-sm" data-href="{{ url_for('frontend.playlist_delete', uid = p.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-delete" aria-label="Delete playlist">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete playlist" viewBox="0 0 16 16">
+<div class="table-responsive">
+  <table class="table table-striped table-hover align-middle">
+    <thead>
+      <tr><th>Playlist</th><th>Tracks</th><th>Public</th><th>Export</th><th>Delete</th></tr>
+    </thead>
+    <tbody>
+      {% for p in mine %}
+      <tr>
+        <td><a href="{{ url_for('frontend.playlist_details', uid = p.id) }}">{{ p.name }}</a></td>
+        <td>{{ p.get_tracks()|length }}</td>
+        <td>{% if p.public %}<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-square bi-va-fix" aria-label="Public playlist" viewBox="0 0 16 16">
             <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
-            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
-          </svg></button></td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
+            <path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
+          </svg>{% else %}<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square bi-va-fix" aria-label="Private playlist" viewBox="0 0 16 16">
+            <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+          </svg>{% endif %}</td>
+        <td><button class="btn btn-outline-secondary btn-sm" data-href="{{ url_for('frontend.playlist_export', uid = p.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-export" aria-label="Export playlist">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-square-fill bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Export M3U playlist" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm8.5 2.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293z"/>
+            </svg></button></td>
+        <td><button class="btn btn-outline-danger btn-sm" data-href="{{ url_for('frontend.playlist_delete', uid = p.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-delete" aria-label="Delete playlist">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete playlist" viewBox="0 0 16 16">
+              <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+              <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+            </svg></button></td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
 {% endif %}
 {% if others.count() %}
 <h2 class="mt-4 pb-2 border-bottom">Others' playlists</h2>
-<table class="table table-striped table-hover align-middle">
-  <thead>
-    <tr><th>Playlist</th><th>Owner</th><th>Tracks</th></tr>
-  </thead>
-  <tbody>
-    {% for p in others %}
-    <tr>
-      <td><a href="{{ url_for('frontend.playlist_details', uid = p.id) }}">{{ p.name }}</a></td>
-      <td>{{ p.user.name }}</td>
-      <td>{{ p.get_tracks()|length }}</td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
+<div class="table-responsive">
+  <table class="table table-striped table-hover align-middle">
+    <thead>
+      <tr><th>Playlist</th><th>Owner</th><th>Tracks</th></tr>
+    </thead>
+    <tbody>
+      {% for p in others %}
+      <tr>
+        <td><a href="{{ url_for('frontend.playlist_details', uid = p.id) }}">{{ p.name }}</a></td>
+        <td>{{ p.user.name }}</td>
+        <td>{{ p.get_tracks()|length }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
 {% endif %}
 <div class="modal fade" id="confirm-export" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="confirm-export-label" aria-hidden="true">
   <div class="modal-dialog">
diff --git a/supysonic/templates/profile.html b/supysonic/templates/profile.html
index 1375f72..11050e0 100644
--- a/supysonic/templates/profile.html
+++ b/supysonic/templates/profile.html
@@ -93,31 +93,33 @@ <h2 class="mt-4 pb-2 border-bottom">Clients</h2>
 their original format, only transcoded if their bitrate exceed the selected
 one.</p>
 <form method="post">
-  <table id="clients" class="table table-striped align-middle">
-    <thead>
-      <tr><th>Client</th><th>Format</th><th>Max bitrate</th><th>Forget</th></tr>
-    </thead>
-    <tbody>
-      {% for client in clients %}
-      <tr>
-        <td><label>{{ client.client_name }}</label></td>
-        <td><input type="text" class="form-control" name="{{ client.client_name }}_format"
-            value="{{ client.format if client.format else '' }}"
-            pattern="[a-z0-9]{0,8}" title="Up to 8 letters and numbers" /></td>
-        <td><select class="form-control" name="{{ client.client_name }}_bitrate">
-            <option />
-            <option {{ 'selected="selected"' if client.bitrate == 64 else ''  }}>64</option>
-            <option {{ 'selected="selected"' if client.bitrate == 96 else ''  }}>96</option>
-            <option {{ 'selected="selected"' if client.bitrate == 128 else '' }}>128</option>
-            <option {{ 'selected="selected"' if client.bitrate == 192 else '' }}>192</option>
-            <option {{ 'selected="selected"' if client.bitrate == 256 else '' }}>256</option>
-            <option {{ 'selected="selected"' if client.bitrate == 320 else '' }}>320</option>
-          </select></td>
-          <td><input type="checkbox" name="{{ client.client_name }}_delete" /></td>
-      </tr>
-      {% endfor %}
-    <tbody>
-  </table>
+  <div class="table-responsive">
+    <table id="clients" class="table table-striped align-middle">
+      <thead>
+        <tr><th>Client</th><th>Format</th><th>Max bitrate</th><th>Forget</th></tr>
+      </thead>
+      <tbody>
+        {% for client in clients %}
+        <tr>
+          <td><label>{{ client.client_name }}</label></td>
+          <td><input type="text" class="form-control" name="{{ client.client_name }}_format"
+              value="{{ client.format if client.format else '' }}"
+              pattern="[a-z0-9]{0,8}" title="Up to 8 letters and numbers" /></td>
+          <td><select class="form-control" name="{{ client.client_name }}_bitrate">
+              <option />
+              <option {{ 'selected="selected"' if client.bitrate == 64 else ''  }}>64</option>
+              <option {{ 'selected="selected"' if client.bitrate == 96 else ''  }}>96</option>
+              <option {{ 'selected="selected"' if client.bitrate == 128 else '' }}>128</option>
+              <option {{ 'selected="selected"' if client.bitrate == 192 else '' }}>192</option>
+              <option {{ 'selected="selected"' if client.bitrate == 256 else '' }}>256</option>
+              <option {{ 'selected="selected"' if client.bitrate == 320 else '' }}>320</option>
+            </select></td>
+            <td><input type="checkbox" name="{{ client.client_name }}_delete" /></td>
+        </tr>
+        {% endfor %}
+      <tbody>
+    </table>
+  </div>
   <input class="btn btn-light" type="submit" value="Save" />
 </form>
 {% endif %}
diff --git a/supysonic/templates/users.html b/supysonic/templates/users.html
index c40c667..2682b05 100644
--- a/supysonic/templates/users.html
+++ b/supysonic/templates/users.html
@@ -13,24 +13,26 @@
 {% endblock %}
 {% block body %}
 <h2 class="mt-4 pb-2 border-bottom">Users</h2>
-<table class="table table-striped table-hover align-middle">
-  <thead>
-    <tr><th>Name</th><th>EMail</th><th>Admin</th><th>Last play date</th><th></th></tr>
-  </thead>
-  <tbody>
-    {% for user in users %}
-    <tr>
-      <td>{% if request.user.id == user.id %}{{ user.name }}{% else %}
-        <a href="{{ url_for('frontend.user_profile', uid = user.id) }}">{{ user.name }}</a>{% endif %}</td>
-      <td>{{ user.mail }}</td><td>{{ user.admin }}</td><td>{{ user.last_play_date }}</td><td>
-        {% if request.user.id != user.id %}<button class="btn btn-outline-danger btn-sm" data-href="{{ url_for('frontend.del_user', uid = user.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-delete" aria-label="Delete user">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete user" viewBox="0 0 16 16">
-              <path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m.256 7a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1z"/>
-              <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m-.646-4.854.646.647.646-.647a.5.5 0 0 1 .708.708l-.647.646.647.646a.5.5 0 0 1-.708.708l-.646-.647-.646.647a.5.5 0 0 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 .708-.708"/>
-          </svg></button>{% endif %}</td></tr>
-    {% endfor %}
-  </tbody>
-</table>
+<div class="table-responsive">
+  <table class="table table-striped table-hover align-middle">
+    <thead>
+      <tr><th>Name</th><th>EMail</th><th>Admin</th><th>Last play date</th><th></th></tr>
+    </thead>
+    <tbody>
+      {% for user in users %}
+      <tr>
+        <td>{% if request.user.id == user.id %}{{ user.name }}{% else %}
+          <a href="{{ url_for('frontend.user_profile', uid = user.id) }}">{{ user.name }}</a>{% endif %}</td>
+        <td>{{ user.mail }}</td><td>{{ user.admin }}</td><td>{{ user.last_play_date }}</td><td>
+          {% if request.user.id != user.id %}<button class="btn btn-outline-danger btn-sm" data-href="{{ url_for('frontend.del_user', uid = user.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-delete" aria-label="Delete user">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete user" viewBox="0 0 16 16">
+                <path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m.256 7a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1z"/>
+                <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m-.646-4.854.646.647.646-.647a.5.5 0 0 1 .708.708l-.647.646.647.646a.5.5 0 0 1-.708.708l-.646-.647-.646.647a.5.5 0 0 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 .708-.708"/>
+            </svg></button>{% endif %}</td></tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
 <a href="{{ url_for('frontend.add_user_form') }}" class="btn btn-light">Add new user</a>
 <div class="modal fade" id="confirm-delete" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="confirm-delete-label" aria-hidden="true">
   <div class="modal-dialog">