From 0621ceeca7cda54cc12ea73de43facc07bd1836c Mon Sep 17 00:00:00 2001
From: ashish200729 <darkaneesport@gmail.com>
Date: Sun, 7 Jun 2026 08:19:28 +0530
Subject: [PATCH] Fix portfolio footer responsiveness and username unavailable
 feedback.

Make the info icon sit inline with the branding pill on all screen sizes, return a clear error when a username is taken, and show that message in the selection UI.
---
 backend/src/routes/auth.js                   | 10 ++++++++-
 frontend/src/pages/UsernameSelection.jsx     | 17 ++++++++++++---
 frontend/src/portfolio/components/Footer.jsx | 22 ++++++++++----------
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/backend/src/routes/auth.js b/backend/src/routes/auth.js
index b92fe2f..a2c5be7 100644
--- a/backend/src/routes/auth.js
+++ b/backend/src/routes/auth.js
@@ -33,8 +33,16 @@ router.get('/check-username', async (req, res) => {
 
         const existingUser = await User.findOne({ username: username.toLowerCase() });
 
+        if (existingUser) {
+            return res.json({
+                available: false,
+                username: username.toLowerCase(),
+                error: 'Username is not available'
+            });
+        }
+
         res.json({
-            available: !existingUser,
+            available: true,
             username: username.toLowerCase()
         });
     } catch (error) {
diff --git a/frontend/src/pages/UsernameSelection.jsx b/frontend/src/pages/UsernameSelection.jsx
index cca12ef..24c69aa 100644
--- a/frontend/src/pages/UsernameSelection.jsx
+++ b/frontend/src/pages/UsernameSelection.jsx
@@ -54,15 +54,19 @@ function UsernameSelection() {
     useEffect(() => {
         if (!username || username.length < 3) {
             setIsAvailable(null)
+            setError('')
             return
         }
 
         const timer = setTimeout(async () => {
             setIsChecking(true)
+            setError('')
             try {
                 const { data } = await checkUsername(username)
                 setIsAvailable(data.available)
-                setError(data.error || '')
+                setError(
+                    data.error || (data.available === false ? 'Username is not available' : '')
+                )
             } catch (err) {
                 setError(err.response?.data?.error || 'Failed to check username')
                 setIsAvailable(false)
@@ -99,6 +103,8 @@ function UsernameSelection() {
         const value = e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, '')
         if (value.length <= MAX_USERNAME_LENGTH) {
             setUsername(value)
+            setIsAvailable(null)
+            setError('')
         }
     }
 
@@ -154,7 +160,7 @@ function UsernameSelection() {
                                         <Check size={18} strokeWidth={ICON_STROKE} className="text-success" />
                                     )}
                                     {!isChecking && isAvailable === false && (
-                                        <X size={18} strokeWidth={ICON_STROKE} className="text-muted" />
+                                        <X size={18} strokeWidth={ICON_STROKE} className="text-error" />
                                     )}
                                 </div>
                             </div>
@@ -175,7 +181,12 @@ function UsernameSelection() {
                                     ✓ Username is available!
                                 </p>
                             )}
-                            {error && (
+                            {isAvailable === false && !isChecking && (
+                                <p className="mt-2 text-sm text-error">
+                                    ✗ {error || 'Username is not available'}
+                                </p>
+                            )}
+                            {error && isAvailable !== false && (
                                 <p className="mt-2 text-sm text-error">
                                     {error}
                                 </p>
diff --git a/frontend/src/portfolio/components/Footer.jsx b/frontend/src/portfolio/components/Footer.jsx
index 72955f4..5718748 100644
--- a/frontend/src/portfolio/components/Footer.jsx
+++ b/frontend/src/portfolio/components/Footer.jsx
@@ -26,7 +26,7 @@ function Footer({ profile, compact = false }) {
     const customBranding = profile?.customBranding
 
     return (
-        <footer className={`relative flex-shrink-0 ${compact ? 'py-3 mt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]' : 'py-12 px-4 mt-8'}`}>
+        <footer className={`relative flex-shrink-0 overflow-visible ${compact ? 'px-2 sm:px-0 py-3 mt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]' : 'py-12 px-4 mt-8'}`}>
             {!compact && (
                 <div
                     className="absolute top-0 left-1/2 -translate-x-1/2 w-1/2 max-w-md h-px"
@@ -34,7 +34,7 @@ function Footer({ profile, compact = false }) {
                 />
             )}
 
-            <div className={`${compact ? '' : 'max-w-6xl mx-auto'} flex justify-center`}>
+            <div className={`${compact ? 'w-full' : 'max-w-6xl mx-auto'} flex justify-center`}>
                 {customBranding?.enabled && customBranding?.text ? (
                     <a
                         href={safeHref(customBranding.url) || '#'}
@@ -55,20 +55,20 @@ function Footer({ profile, compact = false }) {
                         )}
                     </a>
                 ) : (
-                    <div className="relative">
+                    <div className="inline-flex items-center gap-2 sm:gap-3 max-w-full">
                         <div
-                            className="absolute -top-2 -left-2 z-20 portfolio-no-print"
+                            className="relative flex-shrink-0 portfolio-no-print"
                             onMouseEnter={handleMouseEnter}
                             onMouseLeave={handleMouseLeave}
                         >
                             <button
                                 type="button"
-                                className="portfolio-btn-primary min-h-[44px] min-w-[44px] rounded-full flex items-center justify-center shadow-lg portfolio-touch-target"
+                                className="portfolio-btn-primary rounded-full flex items-center justify-center shadow-lg portfolio-touch-target w-9 h-9 sm:w-10 sm:h-10"
                                 aria-label="Premium branding information"
                                 aria-expanded={showPremiumInfo}
                                 onClick={() => setShowPremiumInfo((open) => !open)}
                             >
-                                <Info size={14} strokeWidth={3} />
+                                <Info size={compact ? 12 : 14} strokeWidth={3} className="flex-shrink-0" />
                             </button>
 
                             <AnimatePresence>
@@ -77,7 +77,7 @@ function Footer({ profile, compact = false }) {
                                         initial={{ opacity: 0, y: 8, scale: 0.96 }}
                                         animate={{ opacity: 1, y: 0, scale: 1 }}
                                         exit={{ opacity: 0, y: 8, scale: 0.96 }}
-                                        className="portfolio-surface absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-56 p-4 rounded-xl text-xs text-center shadow-xl z-30"
+                                        className="portfolio-surface absolute bottom-full mb-2 left-1/2 -translate-x-1/2 w-[min(14rem,calc(100vw-2rem))] p-3 sm:p-4 rounded-xl text-xs text-center shadow-xl z-30"
                                         onMouseEnter={handleMouseEnter}
                                         onMouseLeave={handleMouseLeave}
                                     >
@@ -101,17 +101,17 @@ function Footer({ profile, compact = false }) {
                             href={getAppUrl()}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className={`group portfolio-surface rounded-xl inline-flex items-center gap-3 transition-transform hover:-translate-y-0.5 ${compact ? 'px-4 py-2' : 'px-6 py-3'}`}
+                            className={`group portfolio-surface rounded-xl inline-flex items-center gap-2 sm:gap-3 transition-transform hover:-translate-y-0.5 min-w-0 ${compact ? 'px-3 py-2 sm:px-4' : 'px-6 py-3'}`}
                         >
                             <img
                                 src={BRAND_LOGO_SRC}
                                 alt={BRAND_LOGO_ALT}
-                                className={`object-contain flex-shrink-0 ${compact ? 'w-6 h-6' : 'w-8 h-8'}`}
+                                className={`object-contain flex-shrink-0 ${compact ? 'w-5 h-5 sm:w-6 sm:h-6' : 'w-8 h-8'}`}
                                 width={compact ? 24 : 32}
                                 height={compact ? 24 : 32}
                                 decoding="async"
                             />
-                            <div className="flex items-center gap-2">
+                            <div className="flex items-center gap-1.5 sm:gap-2 min-w-0 whitespace-nowrap">
                                 <span className={`portfolio-text-secondary ${compact ? 'text-xs' : 'text-sm'}`}>Built with</span>
                                 <span className={`font-semibold ${compact ? 'text-xs' : 'text-sm'}`}>
                                     <span className="portfolio-text">Portlify</span>
@@ -121,7 +121,7 @@ function Footer({ profile, compact = false }) {
                             <ChevronRight
                                 size={16}
                                 strokeWidth={ICON_STROKE}
-                                className="portfolio-link opacity-0 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all"
+                                className="portfolio-link opacity-0 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all hidden sm:block flex-shrink-0"
                             />
                         </a>
                     </div>