Release 2025-05-21-AQ5C

web/src/components/ChatMessages.astro

@@ -75,9 +75,9 @@ const { messages, userId, class: className, ...htmlProps } = Astro.props
                   {!!message.user.picture && (
                     <MyPicture
                       src={message.user.picture}
-                      height={16}
-                      width={16}
-                      class="inline-block rounded-full align-[-0.33em]"
+                      height={20}
+                      width={20}
+                      class="inline-block size-5 rounded-full align-[-0.5em]"
                       alt=""
                     />
                   )}
@@ -86,16 +86,15 @@ const { messages, userId, class: className, ...htmlProps } = Astro.props
               )}
               <p
                 class={cn(
-                  'rounded-xl p-3 text-sm whitespace-pre-wrap',
+                  'rounded-xl p-3 text-sm wrap-anywhere whitespace-pre-wrap',
                   isCurrentUser ? 'bg-blue-900 text-white' : 'bg-night-500 text-day-300',
                   isCurrentUser ? 'rounded-br-xs' : 'rounded-bl-xs',
                   isCurrentUser && isNextFromSameUser && isNextSameDate && 'rounded-tr-xs',
                   !isCurrentUser && isNextFromSameUser && isNextSameDate && 'rounded-tl-xs'
                 )}
                 id={`message-${message.id.toString()}`}
-              >
-                {message.content}
-              </p>
+                set:text={message.content}
+              />
               {(!isPrevFromSameUser || !isPrevSameDate) && (
                 <p class="text-day-500 mt-0.5 mb-2 text-xs">{message.formattedCreatedAt}</p>
               )}

web/src/components/CommentItem.astro

@@ -371,8 +371,9 @@ const commentUrl = makeCommentUrl({ serviceSlug, commentId: comment.id, origin:
     comment.communityNote && (
       <div class="mt-2 peer-checked/collapse:hidden">
         <div class="border-l-2 border-zinc-600 bg-zinc-900/30 py-0.5 pl-2 text-xs">
-          <span class="font-medium text-zinc-400">Added context:</span>
-          <span class="text-zinc-300">{comment.communityNote}</span>
+          <span class="prose prose-sm prose-invert prose-strong:text-zinc-300/90 text-xs text-zinc-300">
+            <Markdown content={`**Added context:** ${comment.communityNote}`} />
+          </span>
         </div>
       </div>
     )

web/src/components/CommentModeration.astro

@@ -110,16 +110,18 @@ if (!user || !user.admin || !user.verifier) return null
       <button
         class={cn(
           'rounded-sm px-1.5 py-0.5 text-xs transition-colors',
-          comment.status === 'PENDING'
+          comment.status === 'PENDING' || comment.status === 'HUMAN_PENDING'
             ? 'border border-blue-500/30 bg-blue-500/20 text-blue-400'
             : 'bg-night-700 hover:bg-blue-500/20 hover:text-blue-400'
         )}
         data-action="status"
-        data-value={comment.status === 'PENDING' ? 'APPROVED' : 'PENDING'}
+        data-value={comment.status === 'PENDING' || comment.status === 'HUMAN_PENDING'
+          ? 'APPROVED'
+          : 'PENDING'}
         data-comment-id={comment.id}
         data-user-id={user.id}
       >
-        {comment.status === 'PENDING' ? 'Approve' : 'Pending'}
+        {comment.status === 'PENDING' || comment.status === 'HUMAN_PENDING' ? 'Approve' : 'Pending'}
       </button>
 
       <button

web/src/components/InputFile.astro

@@ -25,8 +25,19 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
 <InputWrapper inputId={inputId} {...wrapperProps}>
   {
     !!removeCheckbox && (
-      <label class="flex cursor-pointer items-center gap-2 py-1 pl-1 text-sm leading-none">
-        <input transition:persist type="checkbox" name={removeCheckbox.name} data-remove-checkbox />
+      <label
+        class={cn(
+          'flex cursor-pointer items-center gap-2 py-1 pl-1 text-sm leading-none',
+          disabled && 'cursor-not-allowed opacity-50'
+        )}
+      >
+        <input
+          transition:persist
+          type="checkbox"
+          name={removeCheckbox.name}
+          data-remove-checkbox
+          disabled={disabled}
+        />
         {removeCheckbox.label || 'Remove'}
       </label>
     )

web/src/components/InputTextArea.astro

@@ -31,6 +31,7 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
       hasError && baseInputClassNames.error,
       !!inputProps?.disabled && baseInputClassNames.disabled
     )}
-    name={wrapperProps.name}>{value}</textarea
-  >
+    name={wrapperProps.name}
+    set:text={value}
+  />
 </InputWrapper>

web/src/components/MyPicture.astro

@@ -4,6 +4,7 @@ import type { ComponentProps } from 'react'
 import { Picture } from 'astro:assets'
 
 import defaultServiceImage from '../assets/fallback-service-image.jpg'
+import { cn } from '../lib/cn'
 
 const fallbackImages = {
   service: defaultServiceImage,
@@ -20,6 +21,7 @@ const {
   fallback = undefined as keyof typeof fallbackImages | undefined,
   height,
   width,
+  pictureAttributes,
   ...props
 } = Astro.props
 
@@ -36,6 +38,10 @@ const fallbackImage = fallback ? fallbackImages[fallback] : undefined
       formats={formats}
       height={height ? Number(height) * 2 : undefined}
       width={width ? Number(width) * 2 : undefined}
+      pictureAttributes={{
+        ...pictureAttributes,
+        class: cn('shrink-0', pictureAttributes?.class),
+      }}
       {...(props as any)}
     />
   )

web/src/components/Tooltip.astro

@@ -36,7 +36,7 @@ const {
         class={cn(
           'pointer-events-none hidden select-none group-hover/tooltip:flex',
           'ease-out-cubic scale-75 opacity-0 transition-all transition-discrete duration-100 group-hover/tooltip:scale-100 group-hover/tooltip:opacity-100 starting:group-hover/tooltip:scale-75 starting:group-hover/tooltip:opacity-0',
-          'z-1000 w-max max-w-sm rounded-lg px-3 py-2 font-sans text-sm font-normal tracking-normal text-pretty whitespace-pre-wrap',
+          'z-1000 w-max max-w-sm rounded-lg px-3 py-2 font-sans text-sm font-normal tracking-normal text-pretty wrap-anywhere whitespace-pre-wrap',
           // Position classes
           {
             'absolute -top-2 left-1/2 origin-bottom -translate-x-1/2 translate-y-[calc(-100%+0.5rem)] text-center group-hover/tooltip:-translate-y-full starting:group-hover/tooltip:translate-y-[calc(-100%+0.25rem)]':
@@ -85,9 +85,8 @@ const {
           },
           classNames?.tooltip
         )}
-      >
-        {text}
-      </span>
+        set:text={text}
+      />
     )
   }
 </Component>

web/src/components/VerificationWarningBanner.astro

@@ -45,7 +45,7 @@ const wasRecentlyAdded = isPast(listedDate) && differenceInDays(new Date(), list
         )}
       </p>
       {!!service.verificationSummary && (
-        <div class="mt-2 whitespace-pre-wrap">{service.verificationSummary}</div>
+        <div class="mt-2 wrap-anywhere whitespace-pre-wrap" set:text={service.verificationSummary} />
       )}
     </div>
   ) : service.verificationStatus === 'COMMUNITY_CONTRIBUTED' ? (