style: update TrialWarning component layout and styling for improved responsiveness and visual consistency

Author: danieldanielecki

components/TrialWarning.tsx

@@ -14,10 +14,10 @@ export const TrialWarning: React.FC = () => {
   return (
     <>
       {isInTrial && (
-        <div className="fixed top-4 right-4 bg-amber-600 text-white px-4 py-2 rounded-lg shadow-lg z-40">
-          <div className="flex items-center gap-2">
+        <div className="fixed top-4 left-8 md:left-8 md:top-4 left-1/2 top-4 -translate-x-1/2 md:left-8 md:-translate-x-0 bg-amber-600 text-white px-8 py-3 rounded-lg shadow-lg z-40">
+          <div className="flex items-center gap-4">
             <svg
-              className="w-5 h-5"
+              className="w-6 h-6"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -29,12 +29,12 @@ export const TrialWarning: React.FC = () => {
                 d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
               />
             </svg>
-            <span className="font-medium">
+            <span className="font-medium whitespace-nowrap">
               Trial: {formatTimeRemaining()} remaining
             </span>
             <button
               onClick={() => setShowAuthModal(true)}
-              className="ml-2 bg-white text-amber-600 px-2 py-1 rounded text-sm font-medium hover:bg-amber-50 transition-colors"
+              className="ml-4 bg-white text-amber-600 px-4 py-2 rounded text-sm font-medium hover:bg-amber-50 transition-colors whitespace-nowrap"
             >
               Sign In
             </button>