fix design

Author: totocalcio

apps/web/app/components/namecard/Namecard.vue

@@ -45,14 +45,18 @@ const { backgroundColor } = useUserRole()
 
 .namecard-role {
   --background-color-role: color-mix(in srgb, var(--color-vue-blue), #000 20%);
-  font-size: 1.3125rem;
-  height: 2.0625rem;
+  font-size: 1.6875rem;
+  height: 2.625rem;
   display: grid;
   place-items: center;
   font-weight: 700;
   text-transform: uppercase;
   color: var(--color-white);
   background-color: var(--background-color-role);
+  @media (--mobile) {
+    font-size: 1.3125rem;
+    height: 2.0625rem;
+  }
 }
 
 .namecard-sponsor {
@@ -61,7 +65,10 @@ const { backgroundColor } = useUserRole()
   height: 3.75rem;
   img {
     width: 16.25rem;
-    @media (--mobile) {
+  }
+  @media (--mobile) {
+    height: 2.8125rem;
+    img {
       width: 12.5rem;
     }
   }

apps/web/app/components/namecard/NamecardAvatar.vue

@@ -100,15 +100,18 @@ const COLOR_AVATAR_NAME = {
 
 .avatar-name-area {
   width: 85cqi;
+  height: 8rem;
   background-color: var(--color-white);
   margin-top: 0.8125rem;
   display: grid;
   place-items: center;
   border-radius: calc(var(--unit) * 1.25);
-  padding: 2.8125rem 1rem;
+  padding-inline: 1rem;
+  overflow-wrap: anywhere;
+  word-break: break-all;
   @media (--mobile) {
     margin-top: 0.625rem;
-    padding: 2.25rem 0.5rem;
+    height: 6.125rem;
   }
 }
 
@@ -138,12 +141,4 @@ const COLOR_AVATAR_NAME = {
     margin-bottom: 0.4rem;
   }
 }
-
-.role {
-  padding: calc(var(--unit) * 1) calc(var(--unit) * 3);
-  border-radius: calc(var(--unit) * 6.25);
-  font-size: 1.5rem;
-  font-weight: 700;
-  text-transform: uppercase;
-}
 </style>