Fix the overflow problem for the link tooltips

Author: yimingpeng

src/styles/global.css

@@ -85,7 +85,7 @@ body {
 
 .tooltip .tooltip-text {
 	visibility: hidden;
-	width: 200px;
+	width: 120px;
 	background-color: #1e1e2e;
 	color: #cdd6f4;
 	text-align: center;
@@ -95,14 +95,16 @@ body {
 	z-index: 1000;
 	top: 125%;
 	left: 50%;
-	margin-left: -100px;
+	transform: translateX(-50%);
 	opacity: 0;
 	transition: opacity 0.2s ease-in-out;
 	font-size: 0.85rem;
 	font-weight: 500;
 	border: 1px solid #89b4fa;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 	pointer-events: none;
+	white-space: nowrap;
+	overflow: visible;
 }
 
 .tooltip .tooltip-text::after {
@@ -155,8 +157,10 @@ body {
 	}
 
 	.tooltip .tooltip-text {
-		width: 160px;
-		margin-left: -80px;
+		width: auto;
+		min-width: 80px;
+		max-width: 160px;
+		transform: translateX(-50%);
 		font-size: 0.8rem;
 	}
 }
@@ -182,8 +186,10 @@ body {
 	}
 
 	.tooltip .tooltip-text {
-		width: 140px;
-		margin-left: -70px;
+		width: auto;
+		min-width: 70px;
+		max-width: 140px;
+		transform: translateX(-50%);
 		font-size: 0.75rem;
 		padding: 6px 10px;
 	}

src/styles/hero.css

@@ -102,6 +102,16 @@
 
 .social-links .tooltip {
 	display: inline-block;
+	position: relative;
+}
+
+.social-links .tooltip .tooltip-text {
+	width: auto;
+	min-width: 80px;
+	max-width: 120px;
+	left: 50%;
+	transform: translateX(-50%);
+	white-space: nowrap;
 }
 
 .social-links a {