🐛 fix responsive (#2664)

equinor · Nov 8, 2024 · 75c6558 · 75c6558
1 parent 7acdbd7
commit 75c6558
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 16 deletions.
diff --git a/web/pageComponents/shared/Hero/DefaultHero.tsx b/web/pageComponents/shared/Hero/DefaultHero.tsx
@@ -59,12 +59,12 @@ export const DefaultHero = ({ title, image, isBigTitle, bigTitle, tags }: Props)
       {tags && tags?.length > 0 && (
         <div className="px-layout-md pb-12">
           {tags && tags?.length > 0 && (
-            <ul className="flex items-center divide-x-2 divide-energy-red-100">
+            <ul className="flex flex-wrap gap-y-4 divide-x-2 divide-energy-red-100">
               {tags.map((tag: string) => {
                 return (
                   <span
                     key={`magazine_tag_key_${tag}`}
-                    className="inline-block text-sm font-medium pl-3 pr-3 first:pl-0 lg:text-xs"
+                    className="inline-block text-sm font-medium pl-3 pr-3 first:pl-0 lg:text-xs whitespace-nowrap"
                   >
                     {tag}
                   </span>

diff --git a/web/templates/magazine/MagazinePage.tsx b/web/templates/magazine/MagazinePage.tsx
@@ -62,12 +62,12 @@ const MagazinePage = ({ data }: MagazinePageProps) => {
         {data.hero.type !== HeroTypes.DEFAULT && (
           <div className="max-w-viewport px-layout-lg mx-auto pb-6">
             {tags && tags?.length > 0 && (
-              <ul className="flex items-center divide-x-2 divide-energy-red-100">
+              <ul className="flex flex-wrap gap-y-4 divide-x-2 divide-energy-red-100">
                 {tags.map((tag: string) => {
                   return (
                     <span
                       key={`magazine_tag_key_${tag}`}
-                      className="inline-block text-sm font-medium pl-3 pr-3 first:pl-0 lg:text-xs"
+                      className="inline-block text-sm font-medium pl-3 pr-3 first:pl-0 lg:text-xs whitespace-nowrap"
                     >
                       {tag}
                     </span>

diff --git a/web/templates/magazine/Magazineroom.tsx b/web/templates/magazine/Magazineroom.tsx
@@ -131,7 +131,7 @@ const MagazineRoom = ({ pageData, slug }: MagazineIndexTemplateProps) => {
                 </li>
               ))}
             {!isLoading &&
-              pagedList[page].map((article) => (
+              pagedList?.[page]?.map((article) => (
                 <li key={article.id}>
                   <MagazineCard data={article} />
                 </li>

diff --git a/web/templates/newsroom/sanity/NewsHeadlinerSanity.tsx b/web/templates/newsroom/sanity/NewsHeadlinerSanity.tsx
@@ -23,7 +23,7 @@ const NewsHeadlinerSanity = forwardRef<HTMLLIElement, NewsHeadlinerProps>(functi
     <section ref={ref} {...rest} className={envisTwMerge('', className)}>
       <BaseLink href={slug} className="group flex flex-col gap-2 pb-6">
         {(heroImage?.image?.asset || fallbackImage) && (
-          <div className="aspect-video relative max-h-[324px] mb-2">
+          <div className="max-h-[212px] aspect-video md:aspect-video relative md:max-h-[324px] mb-2">
             <Image
               //@ts-ignore: TODO Fix SanityImage to take SanityImageObject
               image={heroImage?.image?.asset ? heroImage?.image : fallbackImage}
@@ -44,10 +44,13 @@ const NewsHeadlinerSanity = forwardRef<HTMLLIElement, NewsHeadlinerProps>(functi
             {title}
           </Typography>
         )}
-        <div className="pb-2 flex gap-3 text-xs divide-x-2 divide-energy-red-100">
+        <div className="pb-2 flex flex-wrap gap-y-4 text-xs divide-x-2 divide-energy-red-100">
           {tags?.map((tag: any, i: number) => {
             return (
-              <span key={tag.label} className=" text-xs inline-block text-grey-60 pl-3 pr-3 first:pl-0">
+              <span
+                key={tag.label}
+                className=" text-xs inline-block text-grey-70 pl-3 pr-3 first:pl-0 whitespace-nowrap"
+              >
                 {tag.label}
                 {i < tags.length - 1 && <span className="sr-only">,</span>}
               </span>
@@ -56,7 +59,7 @@ const NewsHeadlinerSanity = forwardRef<HTMLLIElement, NewsHeadlinerProps>(functi
           {countryTags?.length > 0 && <span className="sr-only">,</span>}
           {countryTags?.map((country: any, i: number) => {
             return (
-              <span key={country.label} className=" inline-block text-grey-60 pl-3 pr-3 first:pl-0">
+              <span key={country.label} className=" inline-block text-grey-70 pl-3 pr-3 first:pl-0 whitespace-nowrap">
                 {country.label}
                 {i < countryTags.length - 1 && <span className="sr-only">,</span>}
               </span>

diff --git a/web/templates/newsroom/sanity/NewsItemSanity.tsx b/web/templates/newsroom/sanity/NewsItemSanity.tsx
@@ -20,9 +20,12 @@ const NewsItemSanity = forwardRef<HTMLLIElement, NewsListItemProps>(function New
   const { slug, title, publishDateTime, heroImage, thumbnailUrl, tags, countryTags } = data || {}
 
   return (
-    <section ref={ref} className={envisTwMerge('border-b border-grey-30', className)} {...rest}>
-      <BaseLink href={slug} className="h-full group grid grid-cols-[60%_30%] justify-between gap-4 lg:gap-6">
-        <div className="flex flex-col py-6">
+    <section ref={ref} className={envisTwMerge('md:border-b md:border-grey-30', className)} {...rest}>
+      <BaseLink
+        href={slug}
+        className="h-full group flex flex-col-reverse md:grid md:grid-cols-[60%_30%] md:justify-between gap-4 lg:gap-6"
+      >
+        <div className="flex flex-col py-2 md:py-6">
           {publishDateTime && (
             <FormattedDate datetime={publishDateTime} uppercase className="text-2xs font-normal leading-normal pb-1" />
           )}
@@ -31,10 +34,10 @@ const NewsItemSanity = forwardRef<HTMLLIElement, NewsListItemProps>(function New
               {title}
             </Typography>
           )}
-          <div className="pb-4 flex gap-3 text-xs divide-x-2 divide-energy-red-100">
+          <div className="pb-4 flex flex-wrap gap-y-4 text-xs divide-x-2 divide-energy-red-100">
             {tags?.map((tag: any, i: number) => {
               return (
-                <span key={tag?.label} className={`inline-block text-grey-60 pl-3 pr-3 first:pl-0`}>
+                <span key={tag?.label} className={`inline-block text-grey-70 pl-3 pr-3 first:pl-0 whitespace-nowrap`}>
                   {tag?.label}
                   {i < tags.length - 1 && <span className="sr-only">,</span>}
                 </span>
@@ -43,15 +46,15 @@ const NewsItemSanity = forwardRef<HTMLLIElement, NewsListItemProps>(function New
             {countryTags?.length > 0 && <span className="sr-only">,</span>}
             {countryTags?.map((country: any, i: number) => {
               return (
-                <span key={country?.label} className="inline-block text-grey-60 pl-3 pr-3 first:pl-0">
+                <span key={country?.label} className="inline-block text-grey-70 pl-3 pr-3 first:pl-0 whitespace-nowrap">
                   {country?.label}
                   {i < countryTags.length - 1 && <span className="sr-only">,</span>}
                 </span>
               )
             })}
           </div>
         </div>
-        <div className=" relative object-cover">
+        <div className="w-full max-md:max-h-[212px] h-full aspect-video md:aspect-auto relative object-cover">
           {(heroImage?.image?.asset || fallbackImage || thumbnailUrl) && (
             <>
               {thumbnailUrl ? (