Merge remote-tracking branch 'mayTkhin24/FixLabel' into develop

Couchers-org · Dec 10, 2024 · a65b7c5 · a65b7c5
2 parents 61a0fc2 + 8c232dc
commit a65b7c5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/app/web/components/LabelAndText.tsx b/app/web/components/LabelAndText.tsx
@@ -12,6 +12,7 @@ const useStyles = makeStyles((theme) => ({
   root: {
     display: "flex",
     marginTop: theme.spacing(0.5),
+    alignItems: "flex-start", // Ensures the label aligns with the top of multi-line text
   },
   flexItem: {
     flex: "1 1 50%",

diff --git a/app/web/features/profile/view/userLabels.tsx b/app/web/features/profile/view/userLabels.tsx
@@ -107,6 +107,11 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(0.5),
     alignSelf: "center",
   },
+  container: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+  },
 }));
 
 const AgeAndGenderRenderer = ({ user }: Props) => {
@@ -180,13 +185,14 @@ const AgeAndGenderRenderer = ({ user }: Props) => {
     }
   };
   return (
-    <>
+    <div className={useStyles().container}>
       <span>{age}</span>
-      {getBirthdateVerificationIcon(birthdateVerificationStatus)} /&nbsp;
+      {getBirthdateVerificationIcon(birthdateVerificationStatus)}
+      <span>/&nbsp;</span>
       <span>{gender}</span>
       {getGenderVerificationIcon(genderVerificationStatus)}
-      <span> {pronouns && ` (${pronouns})`}</span>
-    </>
+      {pronouns && <span>({pronouns.replace(/\s+/g, "")})</span>}
+    </div>
   );
 };
 
@@ -248,3 +254,4 @@ export const RemainingAboutLabels = ({ user }: Props) => {
     </>
   );
 };
+