ui mobile tweaks

app/page.tsx

@@ -12,7 +12,7 @@ export default async function Home() {
     <main className="flex min-h-screen flex-col items-center justify-center lg:justify-start p-8 lg:p-24 lg:pt-44">
       <div className="w-full max-w-xl mx-auto grid gap-16 lg:gap-24 grid-cols-1">
         <header className="grid grid-cols-1 gap-5">
-          <h1 className="relative font-sans text-center text-5xl lg:text-7xl font-extrabold max-w-max mx-auto text-transparent bg-clip-text bg-flashy">
+          <h1 className="relative font-sans text-center text-4xl lg:text-7xl font-extrabold max-w-max mx-auto text-transparent bg-clip-text bg-flashy">
             Space Shuffler
             <Image
               src={CardsSvg}
@@ -22,7 +22,7 @@ export default async function Home() {
               className="w-10 lg:w-14 absolute -right-9 lg:-right-12 -top-5 lg:-top-6 -rotate-6"
             />
           </h1>
-          <h2 className="font-serif text-white/60 text-xl lg:text-2xl text-center">
+          <h2 className="font-serif text-white/60 text-lg lg:text-2xl text-center">
             Find hidden gems from 180k Spaces
           </h2>
         </header>

components/shuffler/button.tsx

@@ -3,10 +3,10 @@ import { Shuffle } from "lucide-react";
 export const ButtonShuffler = ({ onClick }: { onClick: () => void }) => {
   return (
     <button
-      className="bg-white/90 hover:bg-white transition-all duration-200 rounded-full text-xl flex items-center justify-center gap-3 text-black px-8 py-5 font-bold"
+      className="bg-white/90 hover:bg-white transition-all max-lg:w-full duration-200 lg:rounded-full text-lg lg:text-xl flex items-center justify-center gap-3 text-black px-6 py-3.5 lg:px-8 lg:py-5 font-bold"
       onClick={onClick}
     >
-      <Shuffle size={28} />
+      <Shuffle className="w-5 lg:w-8" />
       Shuffle
     </button>
   );

components/shuffler/index.tsx

@@ -27,7 +27,7 @@ export const Shuffler = ({
 
   return (
     <motion.div className="grid grid-cols-1 gap-10 relative">
-      <div className="relative w-full h-[350px]">
+      <div className="relative w-full h-[290px] lg:h-[350px]">
         <AnimatePresence initial={false}>
           <Card key={index + 1} front={false}>
             <Space space={nextSpace} />
@@ -37,8 +37,8 @@ export const Shuffler = ({
           </Card>
         </AnimatePresence>
       </div>
-      <div className="w-4 h-[1px] bg-white/50 mx-auto" />
-      <footer className="flex items-center justify-center">
+      <div className="w-4 h-[1px] bg-white/50 mx-auto hidden lg:block" />
+      <footer className="flex items-center justify-center fixed lg:relative bottom-0 left-0 w-full">
         <ButtonShuffler
           onClick={() => {
             getSpace().then((newSpace) => {

components/space/index.tsx

@@ -10,7 +10,7 @@ export const Space: React.FC<{ space: SpaceProps }> = ({ space }) => {
     <main className="w-full rounded-xl grid grid-cols-1 gap-3">
       <SpaceHeader space={space} />
       <div className="flex items-start justify-between">
-        <p className="text-[1.95rem] leading-[2rem] text-white/80 font-light">
+        <p className="text-2xl lg:text-[1.95rem] lg:leading-[2rem] text-white/80 font-light">
           {space?.title}
         </p>
         <Link
@@ -25,7 +25,7 @@ export const Space: React.FC<{ space: SpaceProps }> = ({ space }) => {
       </div>
       <SpaceAuthor author={space?.authorData} />
       {space?.shortDescription && (
-        <p className="text-xl font-serif text-white/60 flex items-center justify-start gap-1.5 line-clamp-1">
+        <p className="text-lg font-serif text-white/60 flex items-center justify-start gap-1.5 line-clamp-1">
           Explore thousands of community trained LoRAs.
         </p>
       )}

components/space/sub/author.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 
 export const SpaceAuthor = ({ author }: { author: SpaceAuthorData }) => {
   return (
-    <p className="text-xl font-serif text-white/60 flex items-center justify-start gap-1.5">
+    <p className="text-lg lg:text-xl font-serif text-white/60 flex items-center justify-start gap-2">
       by
       <Image
         src={

components/space/sub/header.tsx

@@ -4,7 +4,7 @@ import { Space } from "@/utils/types";
 
 export const SpaceHeader = ({ space }: { space: Space }) => {
   return (
-    <figure className="relative z-[1] h-[200px] px-6 py-4 mb-4">
+    <figure className="relative z-[1] h-[150px] lg:h-[200px] px-6 py-4 mb-4">
       <div
         className={`bg-gradient-to-br ${space.colorFrom} ${space.colorTo} absolute w-full top-0 left-0 h-full rounded-2xl -z-[1]`}
       />
@@ -21,7 +21,7 @@ export const SpaceHeader = ({ space }: { space: Space }) => {
           {space.likes}
         </p>
       </div>
-      <p className="absolute top-0 left-0 h-full w-full flex items-center justify-center opacity-90 text-7xl text-center whitespace-nowrap truncate">
+      <p className="absolute top-0 left-0 h-full w-full flex items-center justify-center opacity-90 text-5xl lg:text-7xl text-center whitespace-nowrap truncate">
         {space.emoji}
       </p>
     </figure>