Update src/App.js

src/App.js

@@ -164,45 +164,47 @@ const HoroscopeApp = () => {
         </div>
 
         {/* Zodiac Signs Grid - Single Row */}
-        <div className="flex justify-center gap-2 md:gap-3 mb-6 md:mb-10 overflow-x-auto pb-4">
-          {zodiacSigns.map((sign) => (
-            <div
-              key={sign.id}
-              onClick={() => setSelectedSign(sign.id)}
-              className="flex flex-col items-center cursor-pointer transition-all duration-300 hover:scale-105 min-w-max"
-            >
-              <div className={`w-20 h-20 md:w-24 md:h-24 rounded-full p-0.5 transition-all ${
-                selectedSign === sign.id
-                  ? 'shadow-lg'
-                  : ''
-              }`} 
-              style={{
-                background: selectedSign === sign.id 
-                  ? 'linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)'
-                  : 'linear-gradient(135deg, #07090A 0%, #979999 100%)'
-              }}>
-                <div className={`w-full h-full rounded-full flex items-center justify-center text-xl overflow-hidden ${
-                  isDarkMode ? 'bg-gray-800' : 'bg-gray-100'
-                }`}>
-                  {sign.image ? (
-                    <img 
-                      src={sign.image} 
-                      alt={sign.name}
-                      className="w-full h-full object-cover rounded-full"
-                      onError={(e) => {
-                        e.target.style.display = 'none';
-                        e.target.nextSibling.style.display = 'block';
-                      }}
-                    />
-                  ) : null}
-                  <span style={{ display: sign.image ? 'none' : 'block' }}>
-                    {sign.emoji}
-                  </span>
+        <div className="w-full overflow-x-auto mb-6 md:mb-10">
+          <div className="flex justify-start md:justify-center gap-2 md:gap-3 pb-4 px-4 min-w-max">
+            {zodiacSigns.map((sign) => (
+              <div
+                key={sign.id}
+                onClick={() => setSelectedSign(sign.id)}
+                className="flex flex-col items-center cursor-pointer transition-all duration-300 hover:scale-105 flex-shrink-0"
+              >
+                <div className={`w-20 h-20 md:w-24 md:h-24 rounded-full p-0.5 transition-all ${
+                  selectedSign === sign.id
+                    ? 'shadow-lg'
+                    : ''
+                }`} 
+                style={{
+                  background: selectedSign === sign.id 
+                    ? 'linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)'
+                    : 'linear-gradient(135deg, #07090A 0%, #979999 100%)'
+                }}>
+                  <div className={`w-full h-full rounded-full flex items-center justify-center text-xl overflow-hidden ${
+                    isDarkMode ? 'bg-gray-800' : 'bg-gray-100'
+                  }`}>
+                    {sign.image ? (
+                      <img 
+                        src={sign.image} 
+                        alt={sign.name}
+                        className="w-full h-full object-cover rounded-full"
+                        onError={(e) => {
+                          e.target.style.display = 'none';
+                          e.target.nextSibling.style.display = 'block';
+                        }}
+                      />
+                    ) : null}
+                    <span style={{ display: sign.image ? 'none' : 'block' }}>
+                      {sign.emoji}
+                    </span>
+                  </div>
                 </div>
+                <p className="text-xs font-medium mt-2 text-center">{sign.name}</p>
               </div>
-              <p className="text-xs font-medium mt-2 text-center">{sign.name}</p>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
 
         {/* Period Selection */}
@@ -348,4 +350,4 @@ const HoroscopeApp = () => {
   );
 };
 
-export default HoroscopeApp;
+export default HoroscopeApp;