fix(ui): improve text wrapping and image responsiveness

add word break and overflow wrap styles to prevent text overflow
adjust partner logos grid spacing and image sizing for better responsiveness
include locale handling in KeyPromises component for tenant-specific content

Author: kelvinkipruto

src/app/(frontend)/[entitySlug]/promises/[promiseId]/page.tsx

@@ -390,6 +390,8 @@ export default async function PromiseDetailPage({
                   typography: { xs: "h3", lg: "h1" },
                   fontWeight: 600,
                   lineHeight: 1.1,
+                  wordBreak: "break-word",
+                  overflowWrap: "anywhere",
                 }}
               >
                 {titleText}

src/components/EntityHero/index.tsx

@@ -61,6 +61,8 @@ export const EntityHero = async ({ title, description }: EntityHeroBlock) => {
               sx={{
                 fontWeight: 700,
                 mb: 2,
+                wordBreak: "break-word",
+                overflowWrap: "anywhere",
               }}
             >
               {title}

src/components/KeyPromises/index.tsx

@@ -1,13 +1,17 @@
+import { resolveBrowserLocale } from "@/app/(frontend)/layout";
 import { resolveMedia } from "@/lib/data/media";
+import { getPromiseUpdateEmbed } from "@/lib/data/promiseUpdates";
+import { getTenantBySubDomain } from "@/lib/data/tenants";
+import { getDomain } from "@/lib/domain";
 import { getGlobalPayload } from "@/lib/payload";
 import type {
   KeyPromisesBlock,
   PoliticalEntity,
   Promise as PromiseDocument,
   PromiseStatus,
 } from "@/payload-types";
+import { resolveTenantLocale } from "@/utils/locales";
 import { KeyPromisesClient, type KeyPromiseItem } from "./KeyPromises.Client";
-import { getPromiseUpdateEmbed } from "@/lib/data/promiseUpdates";
 
 const DEFAULT_ITEMS = 5;
 
@@ -49,6 +53,11 @@ export const KeyPromises = async ({
   }
 
   const payload = await getGlobalPayload();
+  const { subdomain } = await getDomain();
+  const tenant = await getTenantBySubDomain(subdomain);
+  const locale = tenant
+    ? resolveTenantLocale(tenant)
+    : await resolveBrowserLocale();
 
   const entityQuery = await payload.find({
     collection: "political-entities",
@@ -59,6 +68,7 @@ export const KeyPromises = async ({
     },
     limit: 1,
     depth: 0,
+    locale,
   });
 
   const entity = entityQuery.docs[0] as PoliticalEntity | undefined;
@@ -71,6 +81,7 @@ export const KeyPromises = async ({
     collection: "promise-status",
     limit: -1,
     depth: 0,
+    locale,
   });
 
   const statusById = new Map<string, PromiseStatus>(
@@ -98,10 +109,11 @@ export const KeyPromises = async ({
     limit: resolvedLimit,
     depth: 1,
     sort: "-updatedAt",
+    locale,
   });
 
   const promiseDocs = promisesQuery.docs as PromiseDocument[];
-  const promiseUpdateSettings = await getPromiseUpdateEmbed();
+  const promiseUpdateSettings = await getPromiseUpdateEmbed(locale);
   const fallbackImage = promiseUpdateSettings?.defaultImage
     ? await resolveMedia(promiseUpdateSettings.defaultImage)
     : null;

src/components/Partners/Partners.tsx

@@ -45,6 +45,8 @@ const Partners = React.forwardRef<HTMLDivElement, Props>(function Partners(
                 xs: "center",
                 lg: "space-between",
               }}
+              rowSpacing={{ xs: 4, md: 5 }}
+              columnSpacing={{ lg: 4 }}
             >
               {partners.slice(0, 6).map((partner) => (
                 <Grid
@@ -57,9 +59,11 @@ const Partners = React.forwardRef<HTMLDivElement, Props>(function Partners(
                   <CMSLink {...partner.url} label={""} entitySlug={entitySlug}>
                     <Box
                       sx={{
-                        height: { xs: 126.56, lg: 120 },
-                        width: { xs: 273.6, lg: 260 },
+                        width: "100%",
+                        maxWidth: { xs: 260, sm: 320, lg: 280 },
+                        aspectRatio: "3 / 2",
                         position: "relative",
+                        mx: "auto",
                       }}
                       component={"figure"}
                     >
@@ -68,6 +72,8 @@ const Partners = React.forwardRef<HTMLDivElement, Props>(function Partners(
                           src={partner.image?.url}
                           alt={partner.name}
                           fill
+                          style={{ objectFit: "contain" }}
+                          sizes="(min-width: 1200px) 280px, (min-width: 900px) 320px, 260px"
                         />
                       )}
                     </Box>