From e90b974c70ab4ff3c4c17eb47057f4d3158df10d Mon Sep 17 00:00:00 2001
From: btahir89 <bilal.tahir89@gmail.com>
Date: Sat, 16 Nov 2024 22:29:53 -0800
Subject: [PATCH] fix mobile screen icon sizing

---
 app/page.tsx                    | 28 +++++++++++++------------
 components/PlaybackControls.tsx | 36 ++++++++++++++++++---------------
 2 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 510652b..6bd3e8d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -624,7 +624,7 @@ const EnhancedLofiPlayer = () => {
 
             {/* Controls Container */}
             <div className="space-y-4">
-              <div className="flex items-center justify-between px-2">
+              <div className="flex items-center justify-between gap-3">
                 {/* Left Side - Playback Controls */}
                 {mounted && (
                   <PlaybackControls
@@ -638,22 +638,24 @@ const EnhancedLofiPlayer = () => {
 
                 {/* Right Side - Channel Management */}
                 {mounted && (
-                  <ChannelManagement
-                    isAddingChannel={isAddingChannel}
-                    setIsAddingChannel={setIsAddingChannel}
-                    newChannel={newChannel}
-                    setNewChannel={setNewChannel}
-                    saveChannel={handleSaveChannel}
-                    currentTheme={currentTheme}
-                    currentChannel={currentChannel}
-                    handleEditChannel={handleEditChannel}
-                    setShowDeleteConfirm={setShowDeleteConfirm}
-                  />
+                  <div className="flex shrink-0 items-center">
+                    <ChannelManagement
+                      isAddingChannel={isAddingChannel}
+                      setIsAddingChannel={setIsAddingChannel}
+                      newChannel={newChannel}
+                      setNewChannel={setNewChannel}
+                      saveChannel={handleSaveChannel}
+                      currentTheme={currentTheme}
+                      currentChannel={currentChannel}
+                      handleEditChannel={handleEditChannel}
+                      setShowDeleteConfirm={setShowDeleteConfirm}
+                    />
+                  </div>
                 )}
               </div>
 
               {/* Progress Bar */}
-              <div className="px-2">
+              <div className="">
                 <div className="h-1 w-full overflow-hidden rounded-full bg-[var(--lofi-card-hover)]">
                   <div
                     className="h-full bg-[var(--lofi-accent)] transition-all duration-300"
diff --git a/components/PlaybackControls.tsx b/components/PlaybackControls.tsx
index 01041f2..6ebf2d3 100644
--- a/components/PlaybackControls.tsx
+++ b/components/PlaybackControls.tsx
@@ -24,51 +24,55 @@ const PlaybackControls: React.FC<PlaybackControlsProps> = ({
   setVolume,
   changeChannel,
 }) => (
-  <div className="flex items-center justify-between">
+  <div className="flex w-full items-center justify-between gap-2">
     {/* Left Side - Playback Controls */}
-    <div className="flex items-center space-x-2">
+    <div className="flex shrink-0 items-center space-x-1">
       <button
         onClick={() => changeChannel('prev')}
-        className="rounded-[var(--lofi-button-radius)] p-2 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)]"
+        className="rounded-[var(--lofi-button-radius)] pl-0 pr-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:px-2"
       >
-        <SkipBack size={16} />
+        <SkipBack size={14} className="sm:h-4 sm:w-4" />
       </button>
       <button
         onClick={() => setIsPlaying(!isPlaying)}
-        className="rounded-[var(--lofi-button-radius)] p-2 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)]"
+        className="rounded-[var(--lofi-button-radius)] px-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:p-2"
       >
-        {isPlaying ? <Pause size={16} /> : <Play size={16} />}
+        {isPlaying ? (
+          <Pause size={14} className="sm:h-4 sm:w-4" />
+        ) : (
+          <Play size={14} className="sm:h-4 sm:w-4" />
+        )}
       </button>
       <button
         onClick={() => changeChannel('next')}
-        className="rounded-[var(--lofi-button-radius)] p-2 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)]"
+        className="rounded-[var(--lofi-button-radius)] px-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:p-2"
       >
-        <SkipForward size={16} />
+        <SkipForward size={14} className="sm:h-4 sm:w-4" />
       </button>
     </div>
 
     {/* Right Side - Volume Control */}
-    <div className="flex items-center space-x-2">
+    <div className="flex min-w-[90px] items-center space-x-1 sm:min-w-[110px] sm:space-x-2">
       <button
-        onClick={() => setVolume(volume === 0 ? 0.7 : 0)}
-        className="rounded-[var(--lofi-button-radius)] p-2 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)]"
+        onClick={() => setVolume(volume === 0 ? 1 : 0)}
+        className="hidden sm:block rounded-[var(--lofi-button-radius)] px-1 py-1.5 text-[var(--lofi-text-primary)] shadow-[var(--lofi-card-shadow)] hover:bg-[var(--lofi-card-hover)] sm:p-2"
       >
         {volume === 0 ? (
-          <VolumeX size={16} />
+          <VolumeX size={14} className="sm:h-4 sm:w-4" />
         ) : volume < 0.5 ? (
-          <Volume1 size={16} />
+          <Volume1 size={14} className="sm:h-4 sm:w-4" />
         ) : (
-          <Volume2 size={16} />
+          <Volume2 size={14} className="sm:h-4 sm:w-4" />
         )}
       </button>
       <input
         type="range"
         min={0}
         max={1}
-        step={0.01}
+        step={0.1}
         value={volume}
         onChange={(e) => setVolume(parseFloat(e.target.value))}
-        className="w-16 accent-[var(--lofi-accent)]"
+        className="h-1 w-full cursor-pointer accent-[var(--lofi-accent)] rounded-lg bg-[var(--lofi-card-hover)]"
       />
     </div>
   </div>