reduce size header

components/spaces/index.tsx

@@ -62,16 +62,17 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
 
   return (
     <section id="app" className="flex h-screen overflow-auto">
-      <div className="w-full container px-6 py-10 lg:pb-20 lg:py-12 mx-auto space-y-10 lg:space-y-14">
+      <div className="w-full container px-6 py-10 lg:pb-20 lg:py-12 mx-auto space-y-10">
         <div className="rounded-lg p-[3px] lg:max-w-max mx-auto bg-gradient-to-br from-pink-300 via-green-200 to-yellow-200 shadow-lg z-[9999]">
-          <p className="bg-white dark:bg-slate-900 rounded-md p-5 text-sm text-gray-500 dark:text-slate-500">
+          <p className="bg-white dark:bg-slate-900 rounded-md px-5 py-3 text-sm text-gray-500 dark:text-slate-500">
             <a
               href="https://huggingface.co/settings/billing/subscription#subscribe"
               className="underline text-gray-600 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-200"
             >
               Subscribe to PRO
             </a>
-            to unlock 5x usage quota and the highest ZeroGPU queue priority.
+            &nbsp;to unlock 5x usage quota and the highest ZeroGPU queue
+            priority.
           </p>
         </div>
         <header className="max-w-5xl mx-auto w-full flex-col items-start flex gap-5 lg:gap-10">
@@ -115,7 +116,7 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
             <Sort value={sort} onChange={setSort} />
           </div>
         </header>
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pt-4">
           {filteredSpaces.length === 0 && (
             <div className="col-span-full flex items-center flex-col justify-center gap-2">
               <p className="text-neutral-500 font-regular text-base dark:text-slate-300">