more fixes

resources/js/components/profile/ProfileTabs.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react'
 
 export const TABS = [
   { id: 'artworks',    label: 'Artworks',    icon: 'fa-images' },
+  { id: 'stories',     label: 'Stories',     icon: 'fa-feather-pointed' },
   { id: 'posts',       label: 'Posts',       icon: 'fa-newspaper' },
   { id: 'collections', label: 'Collections', icon: 'fa-layer-group' },
   { id: 'about',       label: 'About',       icon: 'fa-id-card' },
@@ -35,7 +36,7 @@ export default function ProfileTabs({ activeTab, onTabChange }) {
       aria-label="Profile sections"
       role="tablist"
     >
-      <div className="max-w-6xl mx-auto px-3 flex gap-0 min-w-max sm:min-w-0">
+      <div className="max-w-6xl mx-auto px-3 flex gap-1 py-1 min-w-max sm:min-w-0">
         {TABS.map((tab) => {
           const isActive = activeTab === tab.id
           return (
@@ -47,16 +48,16 @@ export default function ProfileTabs({ activeTab, onTabChange }) {
               aria-selected={isActive}
               aria-controls={`tabpanel-${tab.id}`}
               className={`
-                relative flex items-center gap-2 px-4 py-3.5 text-sm font-medium whitespace-nowrap
+                relative flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap rounded-lg
                 transition-colors duration-150 outline-none
                 focus-visible:ring-2 focus-visible:ring-sky-400/70 rounded-t
                 ${isActive
-                  ? 'text-white'
-                  : 'text-slate-400 hover:text-slate-200'
+                  ? 'text-white bg-white/[0.05]'
+                  : 'text-slate-400 hover:text-slate-200 hover:bg-white/[0.03]'
                 }
               `}
             >
-              <i className={`fa-solid ${tab.icon} fa-fw text-xs ${isActive ? 'text-sky-400' : ''}`} />
+              <i className={`fa-solid ${tab.icon} fa-fw text-xs ${isActive ? 'text-sky-400' : 'opacity-75'}`} />
               {tab.label}
               {/* Active indicator bar */}
               {isActive && (