Merge pull request #51 from AustinKelsay/bugfix/fix-mobile-layout

Bugfix/fix mobile layout

src/components/content/dropdowns/ContentDropdownItem.js

@@ -15,47 +15,58 @@ const ContentDropdownItem = ({ content, onSelect }) => {
 
     return (
         <div 
-            className="px-6 py-6 border-b border-gray-700 cursor-pointer" 
+            className="group px-6 py-5 border-b border-gray-700/50 cursor-pointer hover:bg-gray-800/30 transition-colors duration-200" 
             onClick={() => onSelect(content)}
         >
-            <div className={`flex ${isMobile ? 'flex-col' : 'flex-row'} gap-4`}>
+            <div className={`flex ${isMobile ? 'flex-col' : 'flex-row'} gap-5`}>
-                <div className={`relative ${isMobile ? 'w-full h-40' : 'w-[160px] h-[90px]'} flex-shrink-0 overflow-hidden rounded-md`}>
+                <div className={`relative ${isMobile ? 'w-full h-40' : 'w-[180px] h-[100px]'} flex-shrink-0 overflow-hidden rounded-lg shadow-lg transition-transform duration-200 group-hover:scale-[1.02]`}>
                     <Image
                         alt="content thumbnail"
                         src={returnImageProxy(content?.image)}
-                        width={isMobile ? 600 : 160}
+                        width={isMobile ? 600 : 180}
-                        height={isMobile ? 240 : 90}
+                        height={isMobile ? 240 : 100}
                         className="w-full h-full object-cover object-center"
                     />
-                    <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50 opacity-60" />
+                    <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50 opacity-50 group-hover:opacity-40 transition-opacity duration-200" />
                     <div className="absolute bottom-2 left-2 flex gap-2">
-                        <BookOpen className="w-5 h-5 text-white" />
+                        <BookOpen className="w-5 h-5 text-white drop-shadow-lg" />
                     </div>
                 </div>
                 
-                <div className="flex-1">
+                <div className="flex-1 flex flex-col justify-between">
-                    <div className="flex justify-between items-center mb-2">
+                    <div>
-                        <h3 className="text-xl font-bold text-[#f8f8ff]">{content?.title || content?.name}</h3>
+                        <div className="flex justify-between items-start gap-4 mb-2">
+                            <h3 className="text-xl font-bold text-[#f8f8ff] group-hover:text-white transition-colors duration-200">
+                                {content?.title || content?.name}
+                            </h3>
                             
                             {content?.price > 0 ? (
-                            <Message severity="info" text={`${content.price} sats`} className="py-1 text-xs whitespace-nowrap" />
+                                <Message severity="info" text={`${content.price} sats`} className="py-1 text-xs whitespace-nowrap shadow-sm" />
                             ) : (
-                            <Message severity="success" text="Free" className="py-1 text-xs whitespace-nowrap" />
+                                <Message severity="success" text="Free" className="py-1 text-xs whitespace-nowrap shadow-sm" />
                             )}
                         </div>
                         
                         {content?.summary && (
-                        <p className="text-neutral-50/90 line-clamp-2 mb-3 text-sm">{content.summary}</p>
+                            <p className="text-neutral-50/80 line-clamp-2 mb-3 text-sm leading-relaxed group-hover:text-neutral-50/90 transition-colors duration-200">
+                                {content.summary}
+                            </p>
                         )}
+                    </div>
                     
-                    <div className="flex flex-wrap gap-2 mt-2">
+                    <div>
+                        <div className="flex flex-wrap gap-2 mb-3">
                             {content?.topics?.map((topic) => (
-                            <Tag key={topic} value={topic} className="px-2 py-1 text-sm text-[#f8f8ff]" />
+                                <Tag 
+                                    key={topic} 
+                                    value={topic} 
+                                    className="px-2.5 py-1 text-xs font-medium text-[#f8f8ff] bg-gray-700/50 border border-gray-600/30 rounded-full" 
+                                />
                             ))}
                         </div>
                         
-                    <div className="flex justify-between items-center mt-3">
+                        <div className="flex justify-between items-center">
-                        <div className="text-sm text-gray-300">
+                            <div className="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-200">
                                 {(content?.published_at || content?.created_at) 
                                     ? `Published: ${formatUnixTimestamp(content?.published_at || content?.created_at)}` 
                                     : "Not yet published"}
@@ -65,20 +76,21 @@ const ContentDropdownItem = ({ content, onSelect }) => {
                                 <GenericButton 
                                     outlined 
                                     size="small" 
-                                label="Start Learning" 
+                                    label="Open" 
                                     icon="pi pi-chevron-right"
                                     iconPos="right"
                                     onClick={(e) => {
                                         e.stopPropagation();
                                         onSelect(content);
                                     }} 
-                                className="items-center py-1" 
+                                    className="items-center py-1 shadow-sm hover:shadow-md transition-shadow duration-200" 
                                 />
                             )}
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
     );
 };
 

src/components/content/dropdowns/MessageDropdownItem.js

@@ -211,7 +211,7 @@ const MessageDropdownItem = ({ message, onSelect }) => {
 
     return (
         <div 
-            className="px-6 py-6 border-b border-gray-700 cursor-pointer" 
+            className="group px-6 py-5 border-b border-gray-700/50 cursor-pointer hover:bg-gray-800/30 transition-colors duration-200" 
             onClick={() => !loading && onSelect(messageData || messageRef)}
         >
             {loading ? (
@@ -220,10 +220,49 @@ const MessageDropdownItem = ({ message, onSelect }) => {
                 </div>
             ) : (
                 isMobile ? renderSimplifiedMessage() : 
-                <CommunityMessage 
+                <div className="flex flex-col">
-                    message={finalMessage}
+                    <div className="flex gap-4">
-                    platform={platform} 
+                        <div className="w-12 h-12 rounded-full overflow-hidden bg-gray-700/50 flex-shrink-0 shadow-lg">
+                            {messageData?.avatarProxy ? (
+                                <Image 
+                                    src={messageData.avatarProxy} 
+                                    alt="avatar" 
+                                    width={48} 
+                                    height={48} 
+                                    className="object-cover w-full h-full transition-transform duration-200 group-hover:scale-[1.05]" 
                                 />
+                            ) : (
+                                <div className="w-full h-full flex items-center justify-center">
+                                    <i className="pi pi-user text-gray-400 text-xl" />
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="flex-1">
+                            <div className="flex items-center justify-between mb-2">
+                                <div className="font-medium text-[#f8f8ff] group-hover:text-white transition-colors duration-200">
+                                    {messageData?.author}
+                                </div>
+                                <div className="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-200">
+                                    {messageData?.timestamp ? formatTimestampToHowLongAgo(messageData.timestamp) : ''}
+                                </div>
+                            </div>
+                            <p className="text-neutral-50/80 whitespace-pre-wrap mb-3 text-sm leading-relaxed group-hover:text-neutral-50/90 transition-colors duration-200">
+                                {messageData?.content}
+                            </p>
+                            
+                            <div className="flex flex-wrap gap-2">
+                                <div className="px-3 py-1.5 bg-blue-500/20 border border-blue-500/30 text-blue-400 rounded-full text-xs font-medium flex items-center group-hover:bg-blue-500/30 transition-colors duration-200">
+                                    {getPlatformIcon()}
+                                    {platform}
+                                </div>
+                                <div className="px-3 py-1.5 bg-gray-700/50 border border-gray-600/30 text-gray-300 rounded-full text-xs font-medium group-hover:bg-gray-700/70 transition-colors duration-200">
+                                    plebdevs
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             )}
         </div>
     );

src/pages/content/index.js

@@ -172,7 +172,7 @@ const ContentPage = () => {
     return (
         <div className="w-full px-10 max-mob:px-1">
             <div className="w-fit mt-8 flex flex-col items-start">
-                <h1 className="text-3xl font-bold mb-4 ml-2">All Content</h1>
+                <h1 className="text-3xl font-bold mb-4 ml-2 max-mob:hidden">All Content</h1>
             </div>
             <MenuTab
                 items={allTopics}

src/pages/feed.js

@@ -48,7 +48,7 @@ const Feed = () => {
     };
 
     return (
-        <div className="w-full mx-auto px-10">
+        <div className="w-full mx-auto px-10 max-mob:px-2">
             <div className="mb-2">
                 <div className='flex flex-col'>
                     <div className='my-4 flex flex-row items-end'>

src/pages/profile.js

@@ -53,7 +53,7 @@ const Profile = () => {
     if (!session) return null;
 
     return (
-        <div className="w-full min-h-full mx-auto px-10">
+        <div className="w-full min-h-full mx-auto px-10 max-mob:px-2">
             <TabView
                 pt={{
                     root: {