Prevent horizontal scrolling on small view ports (#61496)

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: steves

src/landings/components/CookBookArticleCard.module.scss

@@ -8,8 +8,19 @@
 
 .cardContainer {
   min-height: 200px;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .label {
-  margin-right: 0.25rem;
+  white-space: normal !important;
+  overflow: visible !important;
+  text-overflow: unset !important;
+  height: auto !important;
+  line-height: 1.4 !important;
+}
+
+.labelGroup {
+  flex-wrap: wrap;
+  gap: 0.25rem;
 }

src/landings/components/CookBookArticleCard.tsx

@@ -34,23 +34,23 @@ export const CookBookArticleCard = ({
   return (
     <div className="m-2">
       <div
-        className={`${styles.cardContainer} ${spotlight ? spotlightClasses : 'd-flex pb-3 border-bottom'}`}
+        className={`${styles.cardContainer} ${spotlight ? spotlightClasses : 'd-flex flex-wrap pb-3 border-bottom'}`}
       >
         {spotlight ? setImage(image, title) : null}
         {spotlight
           ? null
           : IconComponent && (
               <IconComponent
                 size={48}
-                className="mr-4 bgColor-accent-muted p-3 circle fgColor-accent"
+                className="mr-4 bgColor-accent-muted p-3 circle fgColor-accent flex-shrink-0"
               />
             )}
-        <div>
+        <div className="min-width-0 flex-1">
           <h3 className="h4 fgColor-accent">
             <Link href={url}>{title}</Link>
           </h3>
           <div className="fgColor-muted mb-3 mt-2">{description}</div>
-          <LabelGroup>
+          <LabelGroup className={styles.labelGroup}>
             {tags.map((tag, index) => (
               <Label key={index} variant="accent" className={styles.label} size="small">
                 {tag}