Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

src/features/Artists/Artists.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { IonSearchbar, IonList, IonItem, IonLabel, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonIcon, IonContent } from '@ionic/react';
+import { IonSearchbar, IonItem, IonLabel, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonIcon, IonContent } from '@ionic/react';
-import { close, add, heart, heartOutline, list } from 'ionicons/icons';
+import { close, list } from 'ionicons/icons';
-import { InfiniteScrollList } from '../../components/common';
+import { InfiniteScrollList, SongItem } from '../../components/common';
 import { useArtists } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectSongs } from '../../redux';
@@ -82,7 +82,12 @@ const Artists: React.FC = () => {
         />
 
         {/* Artist Songs Modal */}
-        <IonModal isOpen={!!selectedArtist} onDidDismiss={handleCloseArtistSongs}>
+        <IonModal 
+          isOpen={!!selectedArtist} 
+          onDidDismiss={handleCloseArtistSongs}
+          breakpoints={[0, 0.5, 0.8]}
+          initialBreakpoint={0.8}
+        >
           <IonHeader>
             <IonToolbar>
               <IonTitle>Songs by {selectedArtist}</IonTitle>
@@ -93,36 +98,17 @@ const Artists: React.FC = () => {
           </IonHeader>
           
           <IonContent>
-            <IonList>
+            <div className="p-4">
               {selectedArtistSongs.map((song) => (
-                <IonItem key={song.key}>
+                <SongItem
-                  <IonLabel>
+                  key={song.key}
-                    <h3 className="text-sm font-medium text-gray-900">
+                  song={song}
-                      {song.title}
+                  context="search"
-                    </h3>
+                  onAddToQueue={() => handleAddToQueue(song)}
-                    <p className="text-sm text-gray-500">
+                  onToggleFavorite={() => handleToggleFavorite(song)}
-                      {song.artist}
+                />
-                    </p>
-                  </IonLabel>
-                  <div slot="end" className="flex gap-2">
-                    <IonButton
-                      fill="clear"
-                      size="small"
-                      onClick={() => handleAddToQueue(song)}
-                    >
-                      <IonIcon icon={add} slot="icon-only" />
-                    </IonButton>
-                    <IonButton
-                      fill="clear"
-                      size="small"
-                      onClick={() => handleToggleFavorite(song)}
-                    >
-                      <IonIcon icon={song.favorite ? heart : heartOutline} slot="icon-only" />
-                    </IonButton>
-                  </div>
-                </IonItem>
               ))}
-            </IonList>
+            </div>
           </IonContent>
         </IonModal>
       </div>

src/features/Queue/Queue.tsx

@@ -219,7 +219,7 @@ const Queue: React.FC = () => {
 
   return (
     <>
-      <div className="flex justify-between items-center mb-4">
+      <div className="flex justify-end items-center mb-4 pr-4 right-button-container">
 
         {isAdmin && (
           <IonButton

src/features/Singers/Singers.tsx

@@ -70,14 +70,14 @@ const Singers: React.FC = () => {
 
   return (
     <>
-      <div className="flex justify-between items-center mb-4">
+      <div className="flex justify-end items-center mb-4 pr-4 right-button-container">
         {isAdmin && (
           <IonButton 
             fill="clear" 
             onClick={handleOpenAddModal}
             className="text-primary"
           >
-            <IonIcon icon={add} slot="icon-only" />
+            <IonIcon icon={add} slot="icon-only" size="large" />
           </IonButton>
         )}
       </div>
@@ -97,7 +97,12 @@ const Singers: React.FC = () => {
       </div>
 
       {/* Add Singer Modal */}
-      <IonModal isOpen={showAddModal} onDidDismiss={handleCloseAddModal}>
+      <IonModal 
+        isOpen={showAddModal} 
+        onDidDismiss={handleCloseAddModal}
+        breakpoints={[0, 0.5, 0.8]}
+        initialBreakpoint={0.8}
+      >
         <IonHeader>
           <IonToolbar>
             <IonTitle>Add New Singer</IonTitle>

src/features/SongLists/SongLists.tsx

@@ -90,6 +90,8 @@ const SongLists: React.FC = () => {
         <IonModal 
           isOpen={!!finalSelectedList} 
           onDidDismiss={handleCloseSongList}
+          breakpoints={[0, 0.5, 0.8]}
+          initialBreakpoint={0.8}
         >
           <IonHeader>
             <IonToolbar>

src/features/TopPlayed/Top100.tsx

@@ -137,6 +137,8 @@ const Top100: React.FC = () => {
       <IonModal 
         isOpen={!!selectedTopPlayed} 
         onDidDismiss={handleCloseModal}
+        breakpoints={[0, 0.5, 0.8]}
+        initialBreakpoint={0.8}
       >
         <IonHeader>
           <IonToolbar>

src/index.css

@@ -85,6 +85,13 @@ ion-item {
   margin-left: auto !important;
 }
 
+/* Right-justified button container with padding */
+.right-button-container {
+  padding-right: 16px !important;
+  padding-top: 20px !important;
+  padding-bottom: 10px !important;
+}
+
 /* Ensure accordion content is visible */
 ion-accordion {
   --background: transparent;