🔧 fix: 支持移动端显示

B1ue1nWh1te · Nov 6, 2024 · 3b6e405 · 3b6e405
1 parent 8cd0417
commit 3b6e405
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/app/components/Profile.tsx b/app/components/Profile.tsx
@@ -66,7 +66,7 @@ export default function Profile() {
 
   return (
     <Card
-      className="flex min-w-[26rem] flex-[2] select-none items-center justify-center bg-white/60 p-6 backdrop-blur-lg transition-all duration-300 hover:shadow-lg hover:shadow-[#a78bfa]/25 hover:ring-2 hover:ring-[#a78bfa]/50"
+      className="flex min-w-[24rem] flex-[2] select-none items-center justify-center bg-white/60 p-6 backdrop-blur-lg transition-all duration-300 hover:shadow-lg hover:shadow-[#a78bfa]/25 hover:ring-2 hover:ring-[#a78bfa]/50"
       isBlurred={true}
       isPressable={true}
       onPress={showConfetti}
@@ -83,11 +83,11 @@ export default function Profile() {
         <h1 className="text-2xl font-bold text-gray-600">
           {profileInfo.nickname}
         </h1>
-        <div className="flex items-center justify-center space-x-3">
+        <div className="flex flex-col items-center justify-center space-y-3 md:flex-row md:space-x-3 md:space-y-0">
           {profileInfo.labels.map((label, index) => (
             <AnimatedGradientText key={label}>
               <p
-                className="inline bg-gradient-to-r bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent"
+                className="inline whitespace-nowrap bg-gradient-to-r bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent"
                 style={{
                   backgroundImage: `linear-gradient(to right, ${LABELS_GRADIENT_COLORS[index].from}, ${LABELS_GRADIENT_COLORS[index].via}, ${LABELS_GRADIENT_COLORS[index].to})`,
                 }}

diff --git a/app/components/ProjectsBeam.tsx b/app/components/ProjectsBeam.tsx
@@ -60,7 +60,7 @@ export default function ProjectsBeam() {
 
   return (
     <Card
-      className="flex min-w-[26rem] flex-[3] select-none items-center justify-center px-14 py-12 backdrop-blur-lg transition-all duration-300 hover:shadow-lg hover:shadow-[#4facfe]/25 hover:ring-2 hover:ring-[#4facfe]/50"
+      className="flex min-w-[24rem] flex-[3] select-none items-center justify-center px-14 py-12 backdrop-blur-lg transition-all duration-300 hover:shadow-lg hover:shadow-[#4facfe]/25 hover:ring-2 hover:ring-[#4facfe]/50"
       ref={containerRef}
       isBlurred={true}
       isPressable={true}