feat: use text-wrap: pretty for balanced representation

Author: rschiang

src/components/Booth.astro

@@ -30,7 +30,7 @@ const getIcon = (name: string) => {
 <div class="booth-card tranition-all flex h-fit cursor-pointer gap-2 rounded-lg group" data-booth={booth.location?.split('#')[1]}>
   <img src={`./img/booth/${booth.name_en}.png`} alt={booth.name} class="h-16 w-16 rounded-md bg-neutral-100 object-contain p-2 group-hover:p-1 transition-all duration-300 shrink-0" />
   <div class="p-1 group-hover:ps-2 transition-all duration-300">
-    <h5>{locale === 'en' ? booth.name_en : booth.name}</h5>
+    <h5 class="text-pretty">{locale === 'en' ? booth.name_en : booth.name}</h5>
     <p class="m-0 text-sm text-neutral-500">{t('venue.community_booth')} {booth.location}</p>
   </div>
   <div class="modal-content hidden">

src/styles/base.css

@@ -168,6 +168,12 @@
     scrollbar-color: var(--color-brand) white;
     @apply overflow-x-auto overflow-y-hidden;
   }
+
+  @supports not (text-wrap-style: pretty) {
+      .text-pretty {
+          text-wrap-style: balance;
+      }
+  }
 }
 
 @keyframes pinchLoop {