From 33ed1cce4b8831fc6412ca482d9867a9dff9ffec Mon Sep 17 00:00:00 2001
From: Aurélien Hamy <me@aunetx.dev>
Date: Thu, 22 May 2025 15:50:44 +0200
Subject: [PATCH] feat: improve responsiveness on small devices

Based on patch by josselinonduty <contact@josselinonduty.fr>
Makes it possible to use the application for with a width as low as 550 pixels
without problems, and is usable even below. Should not change anything for
devices larger than 950 pixels, and nearly nothing above 800 pixels wide.
---
 build/index.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++++
 build/main.js    |  4 +--
 2 files changed, 85 insertions(+), 2 deletions(-)
diff --git a/build/index.html b/build/index.html
index 8016bc8..4efcd23 100644
--- a/build/index.html
+++ b/build/index.html
@@ -4,6 +4,89 @@
     <meta charset="utf-8" />
     <title>Deezer</title>
     <script defer="defer" src="./renderer.js"></script>
+    <style>
+      #page_topbar {
+        min-width: 0px !important;
+      }
+
+      .naboo {
+        min-width: auto !important;
+      }
+
+      .page-main {
+        min-width: auto !important;
+      }
+
+      /* this removes an unuseful margin that breaks on low width */
+      @media screen and (max-width: 850px) {
+        .carousel {
+          margin-right: -24px !important;
+        }
+      }
+
+      /* this prevents the content from overflowing */
+      @media screen and (max-width: 808px) {
+        .container > .carousel-wrapper {
+          width: 100% !important;
+          margin: 0px;
+          padding: 0px;
+        }
+      }
+
+      /* this makes the width transition seamless for carousels */
+      @media only screen and (max-width: 784px) {
+        .container {
+          width: 100% !important;
+        }
+      }
+
+      /* this makes the track list responsive */
+      @media screen and (max-width: 950px) {
+        .page-player .player-full {
+          min-width: auto !important;
+        }
+
+        .page-player .player-queuelist .player-container {
+          margin: 32px 2% 0 !important;
+        }
+
+        .page-player .queuelist-cover {
+          width: 180px !important;
+          margin-right: 2% !important;
+        }
+      }
+
+      /* this hides the unuseful cover in track list for small screens */
+      @media screen and (max-width: 750px) {
+        .page-player .queuelist-cover {
+          display: none !important;
+        }
+      }
+
+      /* this makes the bottom player bar responsive */
+      @media screen and (max-width: 800px) {
+        #page_player > div:first-child {
+          min-width: auto !important;
+        }
+
+        /* icon and name */
+        #page_player > div:first-child > div:first-child {
+          width: calc(49% - 52px) !important;
+        }
+
+        /* player controls */
+        #page_player > div:first-child > div:nth-child(2) {
+          padding-inline-start: unset !important;
+          padding-inline-end: unset !important;
+          width: calc(49% - 52px) !important;
+        }
+
+        /* queue, volume and audio quality */
+        #page_player > div:first-child > div:last-child {
+          width: auto !important;
+        }
+      }
+    </style>
   </head>
   <body class="electron">
     <div id="dzr-app"></div>
diff --git a/build/main.js b/build/main.js
index 22b50ff..99935cb 100644
--- a/build/main.js
+++ b/build/main.js
@@ -3169,8 +3169,8 @@
           },
           windowOptions = {
             title: "Deezer Desktop",
-            minWidth: 990,
-            minHeight: 600,
+            minWidth: 450,
+            minHeight: 450,
             icon: external_electron_namespaceObject.nativeImage.createFromPath(
               getAppIcon(external_electron_namespaceObject.app)
             ),
-- 
2.49.0

